无论我做什么，都无法让 Google Ads 在 React 中显示

Question

我一直在关注这个例子：

https://www.jamesbaum.co.uk/blether/using-google-adsense-with-react/

我有这个组件：

import React from "react";

export default class AdBanner extends React.Component {

    componentDidMount () {

        (window.adsbygoogle = window.adsbygoogle || []).push({});

    }

    render () {

        return (

            <div className='ad'>

                <ins className='adsbygoogle'

                     style={{ display: 'block' }}

                     data-ad-client='div-gpt-ad-1536172937182-0'

                     data-ad-slot='/164808479/Leaderboard'

                     data-ad-format='auto' />

            </div>

        );

    }

}

我有这个index.html：

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

当我运行我的测试页面时，我没有看到广告呈现，并且出现以下错误：

我不知道这个错误是什么意思或如何解决它。

值得一提的是，客户端和插槽 ID 在非反应测试应用程序中完美运行，所以这里肯定有其他问题。

另外，我正在通过 localhost:8080 进行测试——它适用于非反应测试应用程序，所以我认为这不是 localhost/google 广告问题。

在我们旧的非反应应用程序中

在我们的<header>：

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>

    <script>

        var googletag = googletag || {};

        googletag.cmd = googletag.cmd || [];

    </script>

    <script>

        googletag.cmd.push(function() {

            googletag.defineSlot('/164808479/Leaderboard', [728, 90], 'div-gpt-ad-1536172937182-0').addService(googletag.pubads());

            googletag.pubads().enableSingleRequest();

            googletag.enableServices();

        });

    </script>

在我们的<page.php>：

<!-- /164808479/Leaderboard -->

        <div id='div-gpt-ad-1536172937182-0' style='height:90px; width:728px;'>

            <script>

                googletag.cmd.push(function() { googletag.display('div-gpt-ad-1536172937182-0'); });

            </script>

        </div>

这会立即产生一个有效的广告，甚至来自127.0.0.1:80（通过 Docker 运行）我们的问题是我们缺乏在 React 组件中使其工作的能力。

Answer 1

仅针对那些在行间阅读的人（如我） - 将 push 调用放到 useEffect 而不是 row jsx ，如：&nbsp; &nbsp; useEffect(() => {&nbsp; &nbsp; &nbsp; &nbsp; window.adsbygoogle = window.adsbygoogle || [];&nbsp; &nbsp; &nbsp; &nbsp; window.adsbygoogle.push({});&nbsp; &nbsp; }, [])

Answer 2

您只需要等待，当您第一次实施 Adsense 时，它会出现此错误。直到第二天早上 Adsense 才开始展示广告。我实现了他们的响应式广告类型。