CODEWITHSUNDEEP
javascripthtmlreactjstypescriptadsense
Foo
Foo

Reputation: 606

Implementing Google Adsense inside a p(react) project using javascript

I have an issue and I've spent A LOT OF TIME trying to solve this. I am trying to add the Google Adsense code to my Preact project which works the same as React. My status stays stuck at: "Your site needs work". the additional information explains that Google can't find the code. Even though I've added it (in multiple ways).

What I've found out is that every time this line:

<script data-ad-client="ca-pub-#####" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

gets transformed to this line:

<script data-ad-client="ca-pub-#####" async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" data-checked-head="true"></script>

This is how I'm trying to add the code:

Option 1: In my app.js file

componentDidMount() {
        //SetAdsense
        let script = document.createElement('script');
        script.setAttribute('data-ad-client','ca-pub-########' );
        script.setAttribute('async');
        script.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";           
        document.getElementsByTagName('head')[0].appendChild(script);
}

Option 2: Using Helmet

<Helmet>
   <script data-ad-client="ca-pub-#####" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</Helmet>

Any idea how I can make Google see the provided Adsense code in my Head?

UPDATE 1 23/07/2020 I've just found out that the reason for not getting Adsense implemented is not related to the way I've implemented the Adsense code snippet. 2 reasons for this assumption:

Adsense has unapproved my website with the message: No content provided (which is strange because I've tested the crawlresults in the Google Webmaster tools and it crawls my website like a charm).
This solution has the same changes in the snippet and the Ads are still working.
https://react-adsense.xmplaylist.com/

So my issues could be related to Preact (or the usage of any JS framework). I cant figure out why exatly yet, because I prerender al my pages (using the json file) and running the preact build should automatically use that json to prerender all these pages right?

My prerender-urls.json looks like this:

[{  
    "url": "/",
    "title": "Homepage"
  },
  {  
    "url": "/error",
    "title": "ErrorPage"
  },
  {  
    "url": "/other",
    "title": "Other"
  }
 etc.etc.etc.

UPDATE 2 24/7/2020

If I open a random page>index.html it looks like this (see screenshot) in Chrome. I'm shure thats why Google Adsense request gets disaproved.How can I prerender the pages WITH the content rendered as well? All static content is visible in the screenshot.All dynamic content comes from a JSON file which gets loaded by javascript. I use the URL as the key to determine which content should be displayed. enter image description here

Kind regards!

Upvotes: 3

Views: 1780

Answers (1)

Foo
Foo

Reputation: 606

Solved the issue by moving the function that sets the content to the componentWillRender(). So the issue I was facing was lifecycle related.

Upvotes: 2

Related Questions