Проблема интеграции Google Adsense в ReactJS - PullRequest
Новая
       7

Проблема интеграции Google Adsense в ReactJS

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

Я пытаюсь использовать Google Adsense для ReactJS кода, но я сталкиваюсь с этой ошибкой: 

uncaught exception: TagError: adsbygoogle.push() error: No slot size for availableWidth=0

Это происходит только на панели инструментов, потому что в теле я могу использовать его, хотя он изменяет я часть других стилей.

Это компонент: 

import React from 'react';
import PropTypes from 'prop-types';

export default class Ad extends React.Component {
  componentDidMount() {
    const installGoogleAds = () => {
      const script = document.createElement('script');
      script.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
      script.async = true;
      document.body.appendChild(script);
    };
    installGoogleAds();
    (window.adsbygoogle = window.adsbygoogle || []).push({});
  }

  render() {
    return (
      <div className='ad'>
        <ins className={`${this.props.className} adsbygoogle`}
             style={this.props.style}
             data-ad-client={this.props.client}
             data-ad-slot={this.props.slot}
             data-ad-layout={this.props.layout}
             data-ad-layout-key={this.props.layoutKey}
             data-ad-format={this.props.format}
             data-full-width-responsive={this.props.responsive}></ins>
      </div>
    );
  }
}

Ad.propTypes = {
  className: PropTypes.string,
  style: PropTypes.object, // eslint-disable-line
  client: PropTypes.string.isRequired,
  slot: PropTypes.string.isRequired,
  layout: PropTypes.string,
  layoutKey: PropTypes.string,
  format: PropTypes.string,
  responsive: PropTypes.string
};

Ad.defaultProps = {
  className: '',
  style: {display: 'block'},
  format: 'auto',
  layout: '',
  layoutKey: '',
  responsive: 'false'
};

Я звоню, используя это: 

  <Ad client='ca-pub-xxxxxxxxxxxxxx'
      slot='xxxxxxxxxx'
      style={{display: 'block'}}
      format='auto'
      responsive='true'/>

Как я могу это исправить ??

С уважением,

...