reactjs React中的亚马逊本地购物广告(搜索广告)

nc1teljy  于 2023-03-17  发布在  React
关注(0)|答案(2)|浏览(149)

https://affiliate-program.amazon.com/welcome/getstarted_fifth
是否可以将亚马逊原生购物广告的“搜索广告“引入React项目?
我尝试了试错法,但我不认为它在全局变量问题上可能进展顺利。

vuv7lop3

vuv7lop31#

我是这么做的。
如果您的本地购物广告代码如下所示:

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

pgky5nke2#

是的,它非常适合这个逻辑,但我做了一个更好的版本了。
在您的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" />

您需要使用与amazon完全相同的id,请查看DOM,了解amazon脚本如何在DOM中追加div,获取其id并在JSXdiv中使用相同的id

相关问题