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和插槽ID在非反应式测试应用中可以完美运行，因此这里有些其他地方一定是错误的。

另外，我正在通过localhost：8080进行测试-适用于非React测试应用，因此我不认为这是localhost / google ads问题。

在我们的旧版非反应应用中

在我们的<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

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

data-ad-client的值应采用ca-pub-00000000000000之类的格式，该格式是从adsense管理页面获得的。（我相信这不是您的情况！）

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

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

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

Answer 2

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

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

Answer 3

仅针对那些在行之间阅读的人（像我一样）-将push调用放到useEffect而不是像这样的行jsx：

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

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

3 个答案: