代码之家 › 专栏 › 技术社区 › JasonGenX

不管我做什么,都不能让谷歌广告显示出来

adsense reactjs

0

JasonGenX · 技术社区 · 7 年前

我一直在遵循这个例子:

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组件中运行此功能的能力。

0 回复 | 直到 7 年前

1

2

Mehmet Kaplan 7 年前

你得到的是http 400(即错误的请求),因为发送到google广告服务器的数据似乎是错误的。

这个 data-ad-client 值的格式应为 ca-pub-00000000000000 这是从Adsense管理页面获得的。( 我相信这不是你的情况!!!! )

你提供的数据, div-gpt-ad 似乎是 div 对于具有id的google publisher标记 /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

2

1

Jim G. 7 年前

您只需要等待,当您第一次实现adsense时,它会给出这个错误。直到第二天早上,adsense才开始显示广告,我实现了他们的响应式广告。

碳氧比 https://stackoverflow.com/a/38351709/109941