javascriptveloamazon-advertising-api

How to Dynamically Change Amazon Search Ads' Search Phrase with Wix Corvid?


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.


Solution

  • 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.