Question

https://affiliate-program.amazon.com/welcome/getstarted_fifth

是否可以在React项目中引入Amazon Native Shopping Ads的“搜索广告”？

我尝试了试错法，但我认为全局变量问题可能进展不顺利。

Answer 1

是的，在此逻辑下效果很好，但是我从中得出了更好的版本。

在您的React Hook中

  useEffect(() => {
    const script = document.createElement('script')
    script.text = `amzn_assoc_ad_type = "banner"; amzn_assoc_marketplace = "amazon"; amzn_assoc_region = "US"; amzn_assoc_placement =
    "assoc_banner_placement_default"; .................`

    const script2 = document.createElement('script')
    script2.src = '//z-na.amazon-adsystem.com............'
    script2.async = false

    const amazonAdd = document.querySelector('#amzn_assoc_ad_div_assoc_banner_placement_default_0')
    if (amazonAdd) {
      amazonAdd.appendChild(script)
      amazonAdd.appendChild(script2)
    }
  }, [])

在您的JSX中

<div id="amzn_assoc_ad_div_assoc_banner_placement_default_0" />

您需要使用与亚马逊完全相同的ID。查看您的DOM，以了解此亚马逊脚本如何在DOM中添加div，获取其ID并在JSX div中使用相同的

Answer 2

这是我的方法。

如果您的原生购物广告代码如下：

<div id="amzn-assoc-ad-xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"></div><script async src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"></script>

在您的组件中，

componentDidMount () {
    const script = document.createElement("script");

    script.src = "//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
    script.async = true;

    document.body.appendChild(script);
}

在您的JSX中

<div id="amzn-assoc-ad-xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"> </div>

React中的Amazon Native Shopping Ads（搜索广告）

2 个答案: