CODEWITHSUNDEEP
reactjstagsadsense
Maria Lopez
Maria Lopez

Reputation: 1

How to Display Google AdSense Ads Correctly in a React TypeScript SPA?

Problem:

I am working on a Single Page Application (SPA) using React, and I’m trying to display Google AdSense ads on my website. I’ve followed the official documentation to integrate AdSense, but the ads are not showing up. Instead, I only see blank spaces where the ads should be displayed on production when I deploy the website.

enter image description here

I’ve already added the AdSense script in the <head> of my index.html and used <ins> containers in my React components for the ads. Additionally, I called adsbygoogle.push inside useEffect, but the issue persists.

Here is a simplified example of my implementation:

index.html:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXX"
        crossOrigin="anonymous"></script>

React Component:

import React, { useEffect } from "react";

const AdComponent = () => {
    useEffect(() => {
        try {
            (window.adsbygoogle = window.adsbygoogle || []).push({});
        } catch (e) {
            console.error("AdSense error: ", e);
        }
    }, []);

    return (
        <ins className="adsbygoogle"
             style={{ display: "block" }}
             data-ad-client="ca-pub-XXXXXXXXXXXXXXX"
             data-ad-slot="XXXXXXX"
             data-ad-format="auto"
             data-full-width-responsive="true"></ins>
    );
};

export default AdComponent;

I also tried:

On Adsense page you can add ads automatically enabling Auto-ads but when I want press "Apply to site" a messabe box says "No changes were made to your site." but it doesn't give you a feedback of why it didn't apply the ads.

Upvotes: 0

Views: 24

Answers (0)

Related Questions