Amazon Affiliate won't render after page move in react

Question

I want to use Search Ads.

So when component did mount append scripts, and when it will unmount remove them

But i am struggle with changing page issue

Changing page doesn't render my affiliate ads, but return error(getBoundcingClientRect)

when i refresh the page then i can see my ads.

I looked up this post amazon affiliate search ad script: Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null

but i couldn't use postscribe in my project, there's a dependency issue

here's my react component code

import React, { Component } from 'react';
import { connect }          from 'react-redux';
import { getLocale }        from '../../selectors/session';

function mapStateToProps (state, { concerts }) {
  return {
    artist: state.artist.artist,
    locale: getLocale(state),
  };
}

@connect(mapStateToProps)
export default class AffiliateContainer extends Component {
  componentDidMount () {
    this.appendScript()
  }

  componentWillUnmount() {
    this.removeScript()
  }

  appendScript(){
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = `//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US`
    script.id = 'amazon-affiliate'
    script.async = true
    const s = document.createElement('script')
    s.type = 'text/javascript'
    s.id = 'amazon-affiliate2'
    s.async = true
    const code = `amzn_assoc_placement = "adunit0"; amzn_assoc_tracking_id = "trackingID"; amzn_assoc_search_bar = "false"; amzn_assoc_ad_mode = "search"; amzn_assoc_ad_type = "smart"; amzn_assoc_marketplace = "amazon"; amzn_assoc_region = "US"; amzn_assoc_default_search_phrase = "kpop, ${this.props.artist?.groups?.length > 0 ? `${this.props.artist.name}, ${this.props.artist.groups[0].name}` : this.props.artist.name}"; amzn_assoc_default_category = "All"; amzn_assoc_linkid = "linkID"; amzn_assoc_title = "Shop Related Products";`
    s.appendChild(document.createTextNode(code))

    const dom = document.getElementById('amazon-search-container')
    const ad = document.getElementsByClassName('amzn-native-container')

    if(dom && !ad.length > 0) {
      dom.appendChild(s)
      dom.appendChild(script)
    }
  }

  removeScript(){
    const dom = document.getElementById('amazon-search-container')
    const script1 = document.getElementById('amazon-affiliate')
    const script2 = document.getElementById('amazon-affiliate2')
    if(dom){
      dom.removeChild(script1)
      dom.removeChild(script2)
    }
  }

  render() {
    return (
      <div className="contents-wrap">
        <div id="amazon-search-container">
          <div id="amzn_assoc_ad_div_adunit0_0"/>
        </div>
      </div>
    );
  }
}

score 2 · Answer 1 · answered Feb 13 '20 at 05:28

I figured it out that it rendered amzn_assoc_ad_div_adunit0_0 at first and next adunit0_1, adunit0_2, and so on.

Here's what i found on amazon webpage

There's a div_name parameter, so i added amzn_assoc_div_name = "amzn_assoc_ad_div_adunit0_0" and it works properly

Amazon Affiliate won't render after page move in react

1 Answers1