最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

reactjs - How to Display Google AdSense Ads Correctly in a React TypeScript SPA? - Stack Overflow

programmeradmin5浏览0评论

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=".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.

发布评论

评论列表(0)

  1. 暂无评论