How to Implement Google AdSense into ReactJS - 2025

Iamdeuos — Sat, 03 May 2025 22:45:15 +0000

Many of you guys probably came across the issue I faced while trying to figure out how to implement AdSense into my website. After many Google searches and hours spent on Stack Overflow questions, I finally figured out how to implement AdSense within ReactJS. This tutorial should guide you through the basic setups needed to set up ads on your React website. We’ll be serving ads via Client-side Manual Ads, not server-side. There is a Google API to handle server-side ads. My website, FreeEnglishPractice.com, currently uses this method for ads. You might have to go into the lessons to see the ads, by the way.

Some of the key things needed: Approved Adsense (I had my account approved before I started; I'm not sure if it makes a difference or not, but yeah), and the most important part is this package - https://www.npmjs.com/package/@ctrl/react-adsense. I didn't create it, but whoever did is a godsend. This package also supports Typescript, so there's no need to worry about it.
Remember to turn off uBlock Origin or any ad blockers for localhost since they will block the AdSense scripts.

Okay, head over to your Public folder and create an ads.txt file. Then, go to Google AdSense, and it will prompt you with the line of text you should insert to authorize your domain to serve ads. That should be good for your ads.txt.

google.com, pub-1234, DIRECT, 1234

Now, head over to your Public folder and add the following data-adbreak-test="on" into your Google AdSense Verification script to simulate ads showing up on your localhost. But in the production environment, remember to take it out.

<script async
    data-adbreak-test="on"
    src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-123"
    crossorigin="anonymous">
</script>

Head over to AdSense → Ads → By ad unit. For this example, I will go with Auto Responsive Display ad to show you how you can reside the same ad for desktop and mobile. But it's up to you on what ads you prefer. So, just click on the display unit without changing any of the settings for now.

This is the example code provided by AdSense; we will need some parts of this code for ours.

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

Head over to your source folder and create a new component AdsenseExample.tsx. Below is an example of mine that I used. You can view examples of how to use Adsense here: https://www.npmjs.com/package/@ctrl/react-adsense. What I will show you is responsive for the same ad unit, so less work for both mobile and desktop.

ClassName will be used for your style sheet. You can name it anything you want. Remember to turn off adTest in production. Fill in the information based on your AdSense code provided.

import React from 'react'
import { Adsense } from '@ctrl/react-adsense';
import './css/AdsenseStylesheet.css';

function AdsenseExample() {
        //console.log("Ads Shown")
        return (
            <Adsense
                className='ExampleAdSlot'
                client="ca-pub-1234"
                slot="2222222"
                adTest='on' //Dev Only
            />
        )

    }
}

export default AdsenseExample

In your stylesheet, you can change the width and height based on screen size and hide it based on screen changes using media queries. This is an example of a banner ad. Remember to display it as a block; the format works for most manual ads, but I am not sure about the custom feeds ads. You can experiment with that on your own.

This is an example to show you how it works. Alter it based on your screen sizes and how you would like it to display. Google provides a list of the best sizes for ads and such here: https://support.google.com/admanager/answer/1100453?hl=en.

Since AdTest is on, it will not show you any ads; instead, it will display a white rectangle. You can see this by inspecting the element or adding a block border in your CSS to make your life easier.

.ExampleAdSlot{
    margin-top: 16px;
    height: 250px;
    width: 970px;
    display: block;
    border: solid; //Remove in Production
}

@media (min-width: 1280px) {
    .ExampleAdSlot{
        display: none !important;
    }
}

@media (max-width: 1000px) {
    .ExampleAdSlot{
        width: 728px;
        height: 90px;
    }
}

@media (max-width: 750px) {
    .ExampleAdSlot{
        width: 336px;
        height: 280px;
    }
}

Now it's done, and you can call your Ad component in whatever page you want it in. It will work.

Error times.

TagError: adsbygoogle.push() error: No slot size for availableWidth=0

This is a common error that I encountered at the beginning, but I no longer encounter it after using Google's recommended ad slots. This Stack Overflow post should clarify it more.

https://stackoverflow.com/questions/50827616/tagerror-adsbygoogle-push-error-no-slot-size-for-availablewidth-0-when-i-use

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

Since you are using ReactJS and you tend to refresh frequently, which I'm guilty of too, this error might pop up here and there. It's a React issue from my experience, as React tends to call everything twice in development mode. I haven't seen this error in production, so it's a React development thing.

https://stackoverflow.com/questions/74577652/how-to-solve-uncaught-tagerror-adsbygoogle-push-error-all-ins-elements-in-t

That's All - Good Luck - Make Money.

Also comment if you got issues, and lets see if we can figure them out.

Forem: Iamdeuos

How to Implement Google AdSense into ReactJS - 2025