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.
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"> </div> <div id="amzn_assoc_ad_div_adunit0_0"> </div> </div> </div> ) } }
