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