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

IT技术 javascript reactjs
2021-03-23 18:15:03

手头的问题专门针对 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>

这样的事情甚至可能吗?

3个回答

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

Ad-Sense 需要一个看起来像这样的第三方脚本,这应该在react之前加载,或者如果您使用任何类型的模板(即.. 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。

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

谢谢@Chris Hawkes - 这正是我需要的新 React 站点。
2021-06-05 18:15:03
该视频不可用。解决方案改变了还是?
2021-06-12 18:15:03

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

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

要解决这些问题:

  1. declare var adsbygoogle: any; 全局(我在 index.tsx 中做到了,首先是所有组件)
  2. componentDidMount(),写(adsbygoogle = (window as any).adsbygoogle || []).push({});

也许你可以使用这个react组件:react-adsence它支持谷歌和百度。

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>

那么如何将它包含在react组件中呢?很简单:

  1. 编写一个组件类,并用style, client, slot,给它propsformat
  2. EXEC(adsbygoogle = window.adsbygoogle || []).push({});在componentDidMount生命周期方法。

然后得到react-adsence如何使用它?

import AdSence from 'react-adsence';

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

在执行此操作之前,您应该script在 HTML 中添加

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

注意:用你的修改客户端/插槽。