How to embed Google Ad Sense into React Component?

Question

The question at hand deals with Google Ad Sense specifically but could apply to any script tag insert. I don't understand how I could add something like this to my component.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                            <!-- My Ad-->
                            <ins class="adsbygoogle"
                                 style="display:block"
                                 data-ad-client="ca-pub-24524524"
                                 data-ad-slot="152452452"
                                 data-ad-format="auto"></ins>
                            <script>
                            (adsbygoogle = window.adsbygoogle || []).push({});
                            </script>

Is something like this even possible?

Answer 1

Maybe you can use this react-component: react-adsence. It supports both Google and Baidu.

Google AdSence gives you the ad code below:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- adapte_ad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-7292810486004926"
     data-ad-slot="9220497478"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

So how to include it in a react component? Very easy:

1. Write a Component Class, and give it props with style, client, slot, format.
2. exec (adsbygoogle = window.adsbygoogle || []).push({}); in the componentDidMount lifecycle method.

Then get the react-adsence. How to use it?

import AdSence from 'react-adsence';

<AdSence.Google client='ca-pub-7292810486004926'
                slot='7806394673' />

Before doing this, you should add the script in the HTML.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Notice: modify the client/slot with yours.

Answer 2

A third party script should not be necessary for something like this.

Ad-Sense requires a third party script that looks like this, this should be loaded prior to react and or just put into a template if you're using any sort of template (i.e... django template etc...)

put this in template:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

then take your ad sense include, remove the comment (assuming you're using JSX) and turn what google gave you

what google gave you:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
<!-- yourAdname-->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-23452425"
     data-ad-slot="24524524"
     data-ad-format="auto">
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

change it to this:

<ins className="adsbygoogle"
     style={{display:'block'}}
     data-ad-client="ca-pub-23452425"
     data-ad-slot="24524524"
     data-ad-format="auto">
</ins>

then put the actual execution code in the componentDidMount function

(adsbygoogle = window.adsbygoogle || []).push({});

I would imagine a similar solution would work for just about any of the same circumstances, not just Ad-Sense.

One common misconception is that people often think they can put a script tag in a dangerouslySetInnerHTML attribute and that is not the case. It's using setInnerHTML which will not execute script tags.

Answer 3

Based on the awesome answer by Chris Hawkes, here is the solution adapted for Typescript.

After you follow the steps above, you will get errors in componentDidMount() because the compiler does not know about the adsbygoogle variable and the adsbygoogle property on the Window object.

To fix these issues:

1. declare var adsbygoogle: any; globally (I did it in index.tsx, above all components)
2. In componentDidMount(), write (adsbygoogle = (window as any).adsbygoogle || []).push({});