CODEWITHSUNDEEP
reactjsadsense
Niccolò Segato
Niccolò Segato

Reputation: 96

Why Google AdSense not showing with Reactjs?

I'm trying to implement a simple banner Ad with Google AdSense inside my React website. I used create-react-app.

I've created a component wrapping the banner:

import React, { Component } from 'react';

class AdBanner extends Component {

    componentDidMount () {
        (window.adsbygoogle = window.adsbygoogle || []).push({});
        console.log('DID IT!!');
    }

    render () {
        return (
            <ins className="adsbygoogle"
                style={{ display: "block"}}
                data-ad-format="fluid"
                data-ad-layout-key="-fb+5w+4e-db+86"
                data-ad-client="ca-pub-xxxxxxxxxxxxx"
                data-ad-slot="xxxxxxxxxx">
            </ins>
        );
    }
}
export default AdBanner;

And I've added the following script inside the <head> tag of my index.html file

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

## The problem ## The Ad is not showing up in any way! The compiler is ok and browser does not give any message in the console (apart of 'DID IT!'. I've created the Ad in the console two days ago.

I've tried also deactivating React strict mode.

Thankssssss

Upvotes: 1

Views: 4423

Answers (1)

Mikita Belahlazau
Mikita Belahlazau

Reputation: 15434

When you say ad is not showing up - do you see empty white rectangle where ad should be? Also do you see googleads.g.doubleclick.net/pagead/ads? requests in network tab? If so - how many? If you see 2 then ad requests are made and what might be happening is that AdSense didn't find a good ad, which is normal. You can also try adding data-adtest="on" to the <ins> tag which might help to force an ad.

Upvotes: 4

Related Questions