How to use AdSense with React

The code to insert AdSense on a website is:

html
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
    style="display:block"
    data-ad-client="ca-pub-number"
    data-ad-slot="number"
    data-ad-format="auto"
    data-full-width-responsive="true"></ins>
<script>
    (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Let's see the process to tranform the previous lines into a React component:

Insert the first script between <head></head> tags in index.html.

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

Create the block <ins></ins> and replace class for className and style = 'display:block for style = {{display: 'block'}}. Call the function of the last script inside the useEffect() Hook.

Here is the full code:

jsx
import React, { useEffect } from 'react';

const Ad = () => {
    
    useEffect(() => {
        
        (window.adsbygoogle = window.adsbygoogle || []).push({});
        
    }, []);
    
    return(
        <ins 
            className = 'adsbygoogle'
            style = {{display: 'block'}}
            data-ad-client = 'ca-pub-number'
            data-ad-slot = 'number'
            data-ad-format = 'auto'
            data-full-width-responsive = 'true'>
        </ins>
    );
    
}

export default Ad;

That's it! 😀

Remember that you could configure the ad to a fixed size. As an example, I'll set the ad dimensions to 250 x 250 px:

jsx
<ins 
    className = 'adsbygoogle'
    style = {{display: 'inline-block', width: '250px', height: '250px'}}
    data-ad-client = 'ca-pub-number'
    data-ad-slot = 'number'
</ins>

Note

If you don't get any errors, you can skip this note. But if you have problems displaying the ad and you are getting the following error:

Uncaught Error: adsbygoogle.push(): All ins elements in the DOM with class=adsbygoogle already have ads in them

You might be sure that <ins></ins> has fully loaded by checking out the state variables.

Example:

jsx
import React, { useState, useEffect } from 'react';

const Ad = () => {

    const [displayAd, setDisplayAd] = useState(false);
    
    useEffect(() => {
        
        // Without this condition, we'll get the Uncaught Error
        if(displayAd)
            (window.adsbygoogle = window.adsbygoogle || []).push({});
        
    }, [displayAd]);
    
    return(
        <div className = 'GoogleAd'>
            { displayAd
            ? <ins 
                className = 'adsbygoogle'
                style = {{display: 'block'}}
                data-ad-client = 'ca-pub-number'
                data-ad-slot = 'number'
                data-ad-format = 'auto'
                data-full-width-responsive = 'true'>
             </ins>
            : <button onClick = {() => setDisplayAd(true)}>Click to display ad</button>
            }
        </div>
    );
    
}

export default Ad;

Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.

Note

More articles