React 中的亚马逊原生购物广告（搜索广告）答案

【问题标题】：Amazon Native Shopping Ads (Search Ads) in ReactReact 中的亚马逊原生购物广告（搜索广告）
【发布时间】：2018-08-12 17:04:35
【问题描述】：

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

是否可以在 React 项目中引入 Amazon Native Shopping Ads 的「Search Ads」？

我尝试过反复试验，但我认为它可能无法很好地解决全局变量问题。

【问题讨论】：

标签： reactjs amazon amazonads

【解决方案1】：

这是我的做法。

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

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

【讨论】：

谢谢！我想按页面动态更改“搜索广告”的搜索关键字。你知道怎么做吗？
Native Shopping Ads 代码已更改为你能更新答案吗？

【解决方案2】：

是的，它非常适合这种逻辑，但我用它制作了一个更好的版本。

在你的 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 中使用它

【讨论】：