Question

我在我的网站上嵌入了亚马逊会员本机搜索广告。当我测试我的开发笔记本电脑时，“搜索广告”显示没有任何问题。但是，当部署到托管提供程序时，会遇到运行时错误，并且不会显示亚马逊搜索广告。请在这里帮助。

错误：

   Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
        at Object.v.getAAXUrl (onejs?MarketPlace=US:1)
        at Object.render (onejs?MarketPlace=US:1)
        at onejs?MarketPlace=US:1
    v.getAAXUrl @ onejs?MarketPlace=US:1
    render @ onejs?MarketPlace=US:1
    (anonymous) @ onejs?MarketPlace=US:1




//Amazon generated code

<script type="text/javascript">
amzn_assoc_placement = "adunit0";
amzn_assoc_search_bar = "true";
amzn_assoc_tracking_id = "******-**";
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 = "watches";
amzn_assoc_default_category = "All";
amzn_assoc_linkid = "*********";
</script>
<script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US"></script>

更新：该代码在IE浏览器（版本：11.0.9600.19267）中运行正常，没有任何问题。我在Chrome 72.0.3626.109版（正式版）（64位）中遇到了此问题。我不确定其他浏览器/不同版本。

Answer 1

@Shehryar Khan的回答是正确的，Rocket Loader（如果通过Cloudflare或其他功能启用）会使所有JS异步运行，因此某些JS可能无法正常工作（如Amazon提到，只有推荐广告可以是异步的）。

幸运的是，您可以通过添加（data-cfasync =“ false”）而不是完全禁用Rocket来禁用特定JS的Rocket Loader。

示例：

<script data-cfasync="false" type="text/javascript">
amzn_assoc_placement = [...]
<script data-cfasync="false" src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US"></script>';

重要提示：必须在“ src”属性之前添加“ data-cfasync”属性，并确保将其添加到亚马逊代码的两个脚本标签中！

或者，您可以在特定页面上禁用Rocket Loader，例如： https://support.cloudflare.com/hc/en-us/articles/200168306-Is-there-a-tutorial-for-Page-Rules-

Answer 2

好吧，我已经尝试了很多，在问了一个问题here之后就找不到答案了，经过大量的研发，我找到了答案How to load script in react component。

我用过npm postcribe

import { inject, observer } from 'mobx-react'
import React from 'react'
const postscribe = require ('postscribe')

@inject('store')
@observer
export default class Ads extends React.Component<{}> {
  public componentDidMount() {
    const div = document.createElement('div')
    div.id = 'amzn_assoc_ad_div_adunit0_0'
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = `//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US`
    const s = document.createElement('script')
    s.type = 'text/javascript'
    const code = `amzn_assoc_placement = "adunit0"; 
    amzn_assoc_tracking_id = "teamhansel-20";
    amzn_assoc_ad_mode = "search";
    amzn_assoc_ad_type = "smart";
    amzn_assoc_marketplace = "amazon";
    amzn_assoc_region = "US";
    amzn_assoc_default_search_phrase = "Search Amazon For Cash Back";
    amzn_assoc_default_category = "All";
    amzn_assoc_linkid = "";
    amzn_assoc_search_bar = "true";
    amzn_assoc_search_bar_position = "top";
    amzn_assoc_title = "Shop Related Products"`  
    s.appendChild(document.createTextNode(code))
        postscribe(
      '#amazon-search-container',
      `<script
        language="javascript"
        src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US"
      ></script>`
    )
    const dom = document.getElementById('amazon-search-container')
    if(dom) {
      dom.appendChild(s)
      dom.appendChild(script)
    }
  }

  public render() {
    return (
      <div key={Math.random()}>
        <div className="mt-3 item__wrapper" id="amazon-ads-container"> 
          <div id="amazon-search-container">&nbsp;</div>
          <div id="amzn_assoc_ad_div_adunit0_0">&nbsp;</div>
        </div>  
      </div>
    )
  }
}

Answer 3

我面临着同样的问题。经过如此多的测试，我意识到在运行Ad脚本之前，我的一些JS文件没有加载。这是由于 Cloudflare 。

是的，我刚刚从 Cloudflare 的 Speed 菜单中关闭了 Rocket Loader ，并且广告开始展示。

亚马逊会员搜索广告脚本：未捕获的TypeError：无法读取null的属性“ getBoundingClientRect”

3 个答案: