Sunday, 9 June 2019

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

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=
                     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:

enter image description here

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.



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

No comments:

Post a Comment