如何将Google Ad Sense嵌入React组件？ [英] How to embed Google Ad Sense into React Component?

问题描述

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

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?

推荐答案

对于类似这样的事情，不需要第三方脚本。

A third party script should not be necessary for something like this.

Ad-Sense需要一个看起来像这样的第三方脚本，这应该在做出反应之前加载，或者只是在你使用任何类型的模板（即... django模板等...）

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

将此项放入模板中

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

然后将您的广告意义包括在内，删除评论（假设您正在使用JSX）并转而使用google给了你

then take your ad sense include, remove the comment (assuming you're using JSX) and turn 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>

将其更改为：

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

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

then put the actual execution code in the componentDidMount function

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

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

I would imagine a similar solution would work for just about any of the same circumstances, not just Ad-Sense.

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

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.

这篇关于如何将Google Ad Sense嵌入React组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！