当前位置: 首页 > 面试题库 >

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

扈韬
2023-03-14
问题内容

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

这样的事情可能吗?


问题答案:

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

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,它将不执行脚本标签。



 类似资料:
  • lng、lat COORD呈现到iframe fine下的页面 我想这可能很容易做到,但似乎不能将它们嵌入到URL中。TIA

  • 问题内容: 我有一个小问题。从服务请求数据后,我得到了一个iframe代码作为响应。 我想将其作为道具传递给我的模式组件并显示它,但是当我在render函数中简单地将其显示为字符串时。 在react中将其显示为html的基本方法是什么? 问题答案: 您可以像这样使用property 同样,您可以从 字符串中 复制所有属性( 根据问题,您从服务器获取iframe作为字符串 ),其中包含标签,并将其传

  • 问题内容: 我想将CSS文件导入React组件。 我已经尝试过,但是下面出现错误; 找不到模块:错误:无法解析c:\ Users \ User \ User \ Documents \ pizza-app \ client \ src \ components @中的“文件”或“目录” ../../../public/styles/disabledLink。 /client/src/compone

  • null 如何克服这些缺点并使IPython输出更具交互性?

  • 问题内容: 这是我制作的屏幕,我在该屏幕上导入了三个文件,这些文件将在单击单选按钮时显示。另外还有一个相关的移动屏幕,例如,我现在导入了,如您看到的BigText,它包含表格,现在我想在BigTextMobile组件中打印其输入值 问题答案: 为了简化解决方案,您可以执行以下操作: 然后,在 BigText 组件中,您可以通过此回调添加一些数据,如下所示: 并将数据从状态传输到您的 BigText

  • 我在将状态从孩子发送到家长方面遇到了问题。点击主组件中的菜单后,我想改变状态active并将此active发送到侧边栏组件,因为我想隐藏/显示侧边栏取决于CSS中的active类。在Vanilla JS中很容易,但在React中我有点困惑。 主: 菜单: 侧栏: 应用程序JS