12

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.

nyedidikeke
  • 6,899
  • 7
  • 44
  • 59
javapedia.net
  • 2,531
  • 4
  • 25
  • 50
  • At first glance, it looks like the Amazon code is trying to write a new div to put its advert into, `
    `, using document.write and then immediately trying to find it on the page. The problem is that rocket-loader.js has intercepted document.write() - I'm not sure exactly what it is (or does) but I'd guess it adds it to the page asynchronously later, after Amazon has tried (and failed) to find it. It you look at the final page after the script error you will see the div there under the Amazon `     – Rup Feb 14 '19 at 12:51
  • It looks like rocket-loader is supplied by CloudFlare, which would explain why you're only seeing this on production. Do you get this on the origin server without CloudFlare? However you can't be the only one running Amazon Ads through CloudFlare, so there must be a solution out there. Worst case if you can isolate this down to CloudFlare you can talk to either their support or Amazon's. – Rup Feb 14 '19 at 12:53
  • @Rup I have found the answer. thank you for reply – Profer Feb 15 '19 at 08:21

3 Answers3

3

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-

usernotnull
  • 3,480
  • 4
  • 25
  • 40
1

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>
    )
  }
}
Profer
  • 553
  • 8
  • 40
  • 81
  • Looks like the new Native recommendation-based ads support `async` so they will work in React components. This one, which I'm using too, doesn't yet so I instead chose to use an iframe (which is OK because they are not contextual). I think your code works due to you manually creating the `amzn_assoc_ad` div. I think you could safely use `ref` instead and it would work too. https://affiliate-program.amazon.com/help/topic/t423?ac-ms-src=recofaqasyncguide – kamranicus Aug 25 '19 at 08:48
1

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.

Shehryar Khan
  • 61
  • 10