amazon affiliate search ad script: Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null

Question

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.

Error:

   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>

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.

Answer 1

The answer of @Shehryar Khan is correct, Rocket Loader (if enabled thru Cloudflare or other) makes all JS asynchronous, so some JS may not work (as amazon mentions that only recommendation ads can be async).

Fortunately, you can disable Rocket Loader for specific JS by adding (data-cfasync="false") instead of disabling Rocket altogether.

Example:

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

Important: The 'data-cfasync' attribute must be added before the 'src' attribute AND make sure it is added in BOTH script tags from the amazon code!

Alternatively you can disable Rocket Loader on specific pages as such: https://support.cloudflare.com/hc/en-us/articles/200168306-Is-there-a-tutorial-for-Page-Rules-

Answer 2

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.

I have used 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

I was facing the same problem. After so much testing I realised that some of my JS Files are not loading before running the Ad script. That was due to Cloudflare.

Yes, I just turned off the Rocket Loader from the Speed menu of Cloudflare & Ads started showing.