How to Dynamically Change Amazon Search Ads' Search Phrase?

Ask the community
, ,
1

Hello,
I want to have an Amazon search ads widget on a blog page.
When I use the Amazon generated code directly in the “code” section of “HTML iFrame”, it works perfectly.
The code is as follows:

<script type="text/javascript">
    amzn_assoc_placement = "adunit0";
    amzn_assoc_search_bar = "true";
    amzn_assoc_tracking_id = "atmarhoreca-20";
    amzn_assoc_search_bar_position = "bottom";
    amzn_assoc_ad_mode = "search";
    amzn_assoc_ad_type = "smart";
    amzn_assoc_marketplace = "amazon";
    amzn_assoc_region = "US";
    amzn_assoc_title = "Shop Related Products";
    amzn_assoc_default_search_phrase = "product";
    amzn_assoc_default_category = "All";
    amzn_assoc_linkid = "ae6ccb4140ba25fbef6d6ba67d36b98d";
</script>
<script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US"></script>

In corvid, I get the blog post title and send it to the HTML element by:

$w.onReady(function () {
 loadSearchAds();
});
async function loadSearchAds() {
 let getPostData = await $w('#post1').getPost();
 let postTitle = getPostData.title;
 $w('#html2').postMessage(postTitle);
}

I must send a message to the HTML element to set “amzn_assoc_default_search_phrase” variable as the post’s title to show search results related to the blog.

I am not so good at JavaScript. Tried the following HTML snippet but couldn’t manage:

<script type="text/javascript">
      window.onmessage = (event) => {
            if (event.data) {
                  searchPhrase = event.data;
            } else {
	          searchPhrase = "horeca";
	    }
      };
      amzn_assoc_placement = "adunit0";
      amzn_assoc_search_bar = "true";
      amzn_assoc_tracking_id = "atmarhoreca-20";
      amzn_assoc_search_bar_position = "bottom";
      amzn_assoc_ad_mode = "search";
      amzn_assoc_ad_type = "smart";
      amzn_assoc_marketplace = "amazon";
      amzn_assoc_region = "US";
      amzn_assoc_title = "Shop Related Products";
      amzn_assoc_default_search_phrase = searchPhrase;
      amzn_assoc_default_category = "All";
      amzn_assoc_linkid = "ae6ccb4140ba25fbef6d6ba67d36b98d";
</script>
<script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US"></script>

I hope it is clear. Any help would be appreciated.
Thank you.

2

There is a solution I reached after so many trials.

I understood that when the page loads, " await $w( ‘#post1’ ).getPost();" loads slower than “$w( “#html2” ).postMessage(searchCommand);”.
So I decided to give the page some time to understand what is its title.
1 second is not enough, but 2 seconds is enough. I wait 2 seconds, then send the post title to the HTML element.

Corvid code is as follows:

$w.onReady(function () {
    loadSearchAds();
});

async function loadSearchAds() {
 let getPostData = await $w('#post1').getPost();
 let postTitle = getPostData.title;
 let searchCommand = "pageRequests<:>" + postTitle;
    setTimeout(function () {
        $w("#html2").postMessage(searchCommand);
    }, 2000);
}

Also, the other problem was the HTML part. There are 2 tags in the code generated by Amazon, one is text/javascript, other is src. When I assign a value to a variable in the first tag, the second tag uses the variable as it is before assigning a new variable.

So I went to the URL, which is written in , I copied everything in there (about 25k characters) and pasted in the first tag, after assigning the variables.

<script type="text/javascript">
window.onmessage = (event) => {
	var splittedEventData = event.data.split("<:>");
	if (splittedEventData[0] == "pageRequests") {
	 
		amzn_assoc_placement = "adunit0";
		amzn_assoc_search_bar = "true";
		amzn_assoc_tracking_id = "atmarhoreca-20";
		amzn_assoc_search_bar_position = "bottom";
		amzn_assoc_ad_mode = "search";
		amzn_assoc_ad_type = "smart";
		amzn_assoc_marketplace = "amazon";
		amzn_assoc_region = "US";
		amzn_assoc_title = "Shop Related Products";
		amzn_assoc_default_search_phrase = splittedEventData[1];
		amzn_assoc_default_category = "All";
		amzn_assoc_linkid = "d241147a833a91225d67c0372ac8df2d";


		[!] HERE COMES THE SNIPPET IN AMAZON URL. I DIDN'T COPY EVERYTHING HERE IN FORUM BECAUSE AMAZON CODE SNIPPET IS ABOUT 25000 CHARACTERS [!]
	
	}
};     
</script>

So now, in blog post pages, there is an iFrame that searches on Amazon the title of the blog post and shows the result.

I think it is still necessary for me to have a more efficient way. :grinning: