javascript - Can't get Google Ads to show in React no matter what I do - Stack Overflow

admin管理员组

文章数量:1336113

I've been following this example:

/

I have this ponent:

import React from "react";

export default class AdBanner extends React.Component {
    ponentDidMount () {
        (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>
        );
    }
}

I have this on my index.html:

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

When I run my test page I get no ads rendering and this error:

I have no idea what this error means or how to resolve it.

It's critical to mention that the client and slot IDs work perfectly in a non-react test app So something else must be wrong here.

also, I am testing this via localhost:8080 -- which works for the non react test app, so I do not think it's a localhost/google ads issue.

IN OUR OLD NON-REACT APP

in our <header>:

<script async='async' src='.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>

in our <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>

This produces a working ad right now, even from 127.0.0.1:80 (running via Docker) Our problem is our lack of ability to make this work inside a React ponent.

I've been following this example:

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

I have this ponent:

import React from "react";

export default class AdBanner extends React.Component {
    ponentDidMount () {
        (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>
        );
    }
}

I have this on my index.html:

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

When I run my test page I get no ads rendering and this error:

I have no idea what this error means or how to resolve it.

It's critical to mention that the client and slot IDs work perfectly in a non-react test app So something else must be wrong here.

also, I am testing this via localhost:8080 -- which works for the non react test app, so I do not think it's a localhost/google ads issue.

IN OUR OLD NON-REACT APP

in our <header>:

<script async='async' src='https://www.googletagservices./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>

in our <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>

This produces a working ad right now, even from 127.0.0.1:80 (running via Docker) Our problem is our lack of ability to make this work inside a React ponent.

• javascript
• reactjs
• adsense

Share Improve this question Follow edited Jun 7, 2019 at 13:53 Jim G. 15.4k2323 gold badges108108 silver badges176176 bronze badges asked Jun 3, 2019 at 20:27 JasonGenXJasonGenX 5,4442828 gold badges118118 silver badges216216 bronze badges 4

• But the src url is different, right? //pagead2.googlesyndication./pagead/js/adsbygoogle.js vs https://www.googletagservices./tag/js/gpt.js? – Jim G. Commented Jun 6, 2019 at 17:02
• well, yes, I took that one from the React Google Ads example I put the link to at the top of my post. – JasonGenX Commented Jun 6, 2019 at 17:28
• OK. So why do you feel that it's using the same Google API? Emphasis: Why are you asserting that you're paring apples to apples? – Jim G. Commented Jun 6, 2019 at 21:28
• 1 I was following the example in the link to the letter, replacing our slot and ID with the one we're using in our old implementation. It does seem however that there is a gross mismatch between the services and how they're used in our old app and this guy's example. I will try to level the playing field on that and bring our own Google API links into play. – JasonGenX Commented Jun 7, 2019 at 14:25

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2 +300

You are getting HTTP 400 (i.e. Bad Request) because the data being sent to google ad servers seems wrong.

The data-ad-client value should have the format like ca-pub-00000000000000 which is obtained from adsense administration page. (I believe this is not your case!!!)

The data you provide, div-gpt-ad seems as an id of a divfor google publisher tag which has the id /164808479/Leaderboard. So in order to use that in your react application properly you can use this library: https://github./nfl/react-gpt

So below you can find the modified code which is suitable for your case. Just add react-gptto your react application.

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>
        );
    }
}

You can see the above code working beautifully in this link: https://codesandbox.io/embed/determined-bash-k30nq

Just for these who are reading between lines (as me) - put push call to useEffect instead of row jsx like:

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

You just need to wait, when you first implement Adsense it will give this error. It took until next morning for Adsense to start displaying ads. I implemented their Responsive ad type.

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

本文标签： javascriptCan39t get Google Ads to show in React no matter what I doStack Overflow