如何将Google Ad Sense嵌入React组件？

Question

手头的问题专门处理Google Ad Sense,但可以应用于任何脚本标记插入.我不明白如何将这样的东西添加到我的组件中.

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

这样的事情甚至可能吗？

Answer 1

对于类似的东西,不应该需要第三方脚本.

Ad-Sense需要一个看起来像这样的第三方脚本,这应该在做出反应之前加载,或者如果你使用任何类型的模板(例如...... django模板等等)就放入模板中

把它放在模板中:

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

然后把你的广告意义包括在内,删除评论(假设你正在使用JSX)并转向谷歌给你的

谷歌给你的东西:

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

把它改成这个:

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

然后将实际执行代码放在componentDidMount函数中

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

我认为类似的解决方案几乎适用于任何相同的情况,而不仅仅是Ad-Sense.

一个常见的误解是人们通常认为他们可以将一个脚本标记放在危险的SetInnerHTML属性中,而事实并非如此.它使用的setInnerHTML不会执行脚本标记.

Answer 2

基于 Chris Hawkes 的精彩回答，这里是适用于Typescript的解决方案。

按照上述步骤操作后，您将收到错误，componentDidMount()因为编译器不知道对象上的adsbygoogle变量和属性。adsbygoogleWindow

要解决这些问题：

1. declare var adsbygoogle: any;全局（我在index.tsx中完成，在所有组件之上）
2. 在 中componentDidMount()，写(adsbygoogle = (window as any).adsbygoogle || []).push({});