如何使用Wix Corvid动态更改Amazon Search Ads的搜索短语？

问题描述

我想在博客页面上放置一个Amazon搜索广告小部件。

当我直接在“ HTML iFrame”的“代码”部分中使用Amazon生成的代码时，它可以正常工作。

代码如下：

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

在corvid中，我获得了博客文章标题，并通过以下方式将其发送到HTML元素：

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

我必须向HTML元素发送一条消息，以将“ amzn_assoc_default_search_phrase”变量设置为帖子标题，以显示与博客相关的搜索结果。

我不太擅长JavaScript。尝试了以下HTML代码段，但无法管理：

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

我希望这很清楚。任何帮助将不胜感激。

谢谢。

解决方法

经过如此多的尝试，我找到了一个解决方案。

我了解到页面加载时，await $w('#post1').getPost();的加载速度比$w("#html2").postMessage(searchCommand);慢。

因此，我决定给页面一些时间以了解其标题。

1秒是不够的，但是2秒就足够了。我等待2秒钟，然后将帖子标题发送到HTML元素。

正确的代码如下：

$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);
}

另外，另一个问题是HTML部分。 Amazon生成的代码中有2个标签，一个是text / javascript，另一个是src。当我在第一个标签中为变量分配值时，第二个标签在分配新变量之前会按原样使用该变量。

因此，我转到了用编写的URL，在分配变量后，我将所有内容（大约25k个字符）复制到其中，并粘贴到第一个标记中。

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

因此，现在，在博客文章页面中，有一个iFrame在Amazon上搜索博客文章的标题并显示结果。

我认为仍然有必要采用一种更有效的方法。