亚马逊联盟搜索广告脚本：未捕获的TypeError：无法读取null的属性'getBoundingClientRect' [英] amazon affiliate search ad script: Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null

问题描述

我在我的网站上嵌入了亚马逊联盟原生搜索广告。当我测试我的开发笔记本电脑时，搜索广告显示没有任何问题。但是，当部署到托管提供商时，遇到运行时错误和亚马逊搜索广告未显示。请帮忙。

I have embedded Amazon affiliate native search Ad on my website. When I test it my dev laptop, the "Search ad" displays without any issues. However when deployed to hosting Provider, encounter runtime error and amazon search Ad not displayed. Please help here.

错误：

   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位）中遇到了此问题。我不确定其他浏览器/不同的版本。

Update: The code works fine in IE browser (Version: 11.0.9600.19267) without any issues. I encounter the issue in Chrome Version 72.0.3626.109 (Official Build) (64-bit). I am not sure about other browsers/different versions.

推荐答案

我已经尝试了这么多，之前无法得到答案之后我问了一个问题 here 以及之后的问题很多R& DI找到我的答案如何加载脚本反应组件。

Well I have tried it so much and could not get the answer before after that I asked a question here and after lots of R&D I have found my answer 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>
    )
  }
} 

这篇关于亚马逊联盟搜索广告脚本：未捕获的TypeError：无法读取null的属性'getBoundingClientRect'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！