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）并转向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。

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

Answer 2

也许你可以使用这个react-component：react-adsence。它支持Google和百度。

Google AdSence为您提供以下广告代码：

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

那么如何将它包含在反应组件中呢？很简单：

撰写一个组件类，并使用style，client，slot，format为其添加道具。
exec (adsbygoogle = window.adsbygoogle || []).push({});在componentDidMount生命周期方法中。

然后获取react-adsence。怎么用？

import AdSence from 'react-adsence';

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

在此之前，您应该在HTML中添加script。

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

注意：用你的方法修改客户端/插槽。

Answer 3

根据克里斯霍克斯的精彩答案，这里的解决方案适用于打字稿。

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

解决这些问题：

declare var adsbygoogle: any;（我在index.tsx中完成了所有组件）
componentDidMount(), write（adsbygoogle =（窗口为任何）.adsbygoogle || 。[]）推（{}）;`

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

3 个答案: