Аффилиат Amazon не будет отображаться после перемещения страницы в ответ - PullRequest
Новая
       6

Аффилиат Amazon не будет отображаться после перемещения страницы в ответ

0 голосов
/ 13 февраля 2020

Я хочу использовать поисковую рекламу.

Так что, когда компонент монтировал сценарии добавления и размонтирования, удалял их

Но я борюсь с проблемой изменения страницы

Изменение страницы не отображает мои партнерские объявления, но возвращает ошибку (getBoundcingClientRect) getBoundingClientRect

, когда я обновляю sh страницу, тогда я вижу свои объявления.

Я посмотрел этот пост. Амазонский скрипт поиска для аффилированного поиска: Uncaught TypeError: Невозможно прочитать свойство 'getBoundingClientRect' со значением null

, но я не смог использовать postscribe в моем проекте, есть проблема зависимости

вот мой код компонента реакции 

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>
    );
  }
}

1 Ответ

0 голосов
/ 13 февраля 2020

Я понял, что он рендерил amzn_assoc_ad_div_adunit0_0 вначале и затем adunit0_1, adunit0_2 и т. Д.

Вот что я нашел на веб-странице amazon enter image description here

Есть параметр div_name, поэтому я добавил amzn_assoc_div_name = "amzn_assoc_ad_div_adunit0_0", и он работает правильно

...