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

小编典典

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

reactjs

眼前的问题专门针对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>

这样的事情可能吗？

阅读 272

2020-07-22

共1个答案

小编典典

这样的事情不需要第三方脚本。

Ad-Sense需要使用如下所示的第三方脚本，如果您使用任何类型的模板（例如django模板等），则应在进行响应之前加载该脚本或将其放入模板中。

把它放在模板中：

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

然后将您的广告意识包括在内，删除评论（假设您使用的是JSX），然后转到Google给您的内容

谷歌给你的是什么：

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

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

2020-07-22