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

【问题标题】：Can't get Google Ads to show in React no matter what I do无论我做什么，都无法让 Google Ads 在 React 中展示
【发布时间】：2019-10-19 09:48:06
【问题描述】：

我一直在关注这个例子：

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 组件中进行这项工作的能力。

【问题讨论】：

但是 src url 不一样吧？ //pagead2.googlesyndication.com/pagead/js/adsbygoogle.js 与 https://www.googletagservices.com/tag/js/gpt.js?
嗯，是的，我从 React Google Ads 示例中获取了那个示例，我将链接放在了帖子的顶部。
好的。那么为什么你觉得它使用的是相同的 Google API？重点：你为什么断言你是在比较苹果和苹果？
我按照信函链接中的示例，将我们的插槽和 ID 替换为我们在旧实现中使用的那个。然而，服务与它们在我们的旧应用程序和这个人的示例中的使用方式之间似乎存在严重的不匹配。我将尝试为此提供公平的竞争环境，并使用我们自己的 Google API 链接。

标签： javascript reactjs adsense

【解决方案1】：

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

c/o https://stackoverflow.com/a/38351709/109941

【讨论】：

我们已经使用 AdSense 两年了。该代码适用于遗留的非反应应用程序。但不是在我们现在正在构建的 react 应用程序中。
我在 non-react 应用程序中添加了适用于我们的代码

【解决方案2】：

您收到 HTTP 400（即错误请求），因为发送到 Google 广告服务器的数据似乎有误。

data-ad-client 值的格式应该类似于ca-pub-00000000000000，它是从 AdSense 管理页面获得的。（我相信这不是你的情况！！！）

您提供的数据div-gpt-ad 似乎是divfor 具有ID /164808479/Leaderboard 的Google 发布商代码的ID。所以为了在你的 react 应用程序中正确使用它，你可以使用这个库：https://github.com/nfl/react-gpt

因此，您可以在下面找到适合您情况的修改后的代码。只需将react-gpt添加到您的反应应用程序。

import React from "react";
import {Bling as GPT} from "react-gpt";

GPT.enableSingleRequest();

export default class AdBanner extends React.Component {
    render () {
        return (
            <div id="div-gpt-ad-1536172937182-0">
                <GPT
                    adUnitPath="/164808479/Leaderboard"
                    slotSize={[728, 90]}
                />
            </div>
        );
    }
}

您可以在此链接中看到上面的代码运行良好：https://codesandbox.io/embed/determined-bash-k30nq

【讨论】：

【解决方案3】：

仅适用于那些在行间阅读的人（就像我一样） - 将 push 调用放到 useEffect 而不是 row jsx 中，例如：

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

【讨论】：