javascript - 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

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.