PythonIsGreat PythonIsGreat - 2 months ago 27
React JSX Question

How to embed Google Ad Sense into React Component?

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

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.

For a video demonstration of this solution check out my video below.

https://www.youtube.com/watch?v=z3EigiCeHzo