Question

我正在尝试在ReactJS代码上使用Google Adsense，但遇到此错误：

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'/>

我该如何解决？

此致

将Google Adsense集成到ReactJS中时出现问题

0 个答案: