Can't get Google Ads to show in React no matter what I do

Question

I've been following this example:

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

I have this component:

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

I have this on my index.html:

<script async src="//pagead2.googlesyndication.com/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.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>

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 component.

But the src url is different, right? `//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js` vs `https://www.googletagservices.com/tag/js/gpt.js`? — Jim G., Jun 06 '19 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, Jun 06 '19 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 comparing apples to apples? — Jim G., Jun 06 '19 at 21:28
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, Jun 07 '19 at 14:25

Mehmet Kaplan · Accepted Answer · 2019-06-10T07:38:24.280

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.com/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

score 2 · Answer 2 · answered Oct 18 '20 at 20:12

2

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({});
    }, [])

answered Oct 18 '20 at 20:12

Dima Dorogonov

2,297
1
20
23

score 1 · Answer 3 · answered Jun 06 '19 at 16:10

1

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.com/a/38351709/109941

answered Jun 06 '19 at 16:10

Jim G.

15,141
22
103
166

We're already using AdSense for two years now. The code works in a legacy non react application. But not in the react app we're building now. – JasonGenX Jun 06 '19 at 16:25
I added the code that works for us in the non-react app – JasonGenX Jun 06 '19 at 16:48

Can't get Google Ads to show in React no matter what I do

3 Answers3