使用 javascript 在 p(react) 项目中实现 Google Adsense答案

【问题标题】：Implementing Google Adsense inside a p(react) project using javascript使用 javascript 在 p(react) 项目中实现 Google Adsense
【发布时间】：2020-11-10 06:36:28
【问题描述】：

我有一个问题，我花了很多时间试图解决这个问题。我正在尝试将 Google Adsense 代码添加到与 React 相同的 Preact 项目中。我的状态一直停留在：“您的网站需要改进”。附加信息说明 Google 找不到代码。即使我已经添加了它（以多种方式）。

我发现每次这行：

<script data-ad-client="ca-pub-#####" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

转化为这一行：

<script data-ad-client="ca-pub-#####" async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" data-checked-head="true"></script>

这就是我尝试添加代码的方式：

选项 1：在我的 app.js 文件中

componentDidMount() {
        //SetAdsense
        let script = document.createElement('script');
        script.setAttribute('data-ad-client','ca-pub-########' );
        script.setAttribute('async');
        script.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";           
        document.getElementsByTagName('head')[0].appendChild(script);
}

选项 2：使用头盔

<Helmet>
   <script data-ad-client="ca-pub-#####" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</Helmet>

知道如何让 Google 在我的脑海中看到提供的 Adsense 代码吗？

更新 1 23/07/2020 我刚刚发现没有实现 Adsense 的原因与我实现 Adsense 代码 sn-p 的方式无关。这种假设的两个原因：

Adsense has unapproved my website with the message: No content provided (which is strange because I've tested the crawlresults in the Google Webmaster tools and it crawls my website like a charm).
This solution has the same changes in the snippet and the Ads are still working.
https://react-adsense.xmplaylist.com/

所以我的问题可能与 Preact（或任何 JS 框架的使用）有关。我还不能弄清楚为什么，因为我预渲染我的所有页面（使用 json 文件）并运行 preact build 应该自动使用该 json 来预渲染所有这些页面吗？

我的 prerender-urls.json 看起来像这样：

[{  
    "url": "/",
    "title": "Homepage"
  },
  {  
    "url": "/error",
    "title": "ErrorPage"
  },
  {  
    "url": "/other",
    "title": "Other"
  }
 etc.etc.etc.

2020 年 7 月 24 日更新 2

如果我打开一个随机页面>index.html，它在 Chrome 中看起来像这样（见屏幕截图）。我很确定这就是为什么 Google Adsense 请求被拒绝的原因。我怎样才能预渲染包含渲染内容的页面？所有静态内容都在屏幕截图中可见。所有动态内容都来自一个由 javascript 加载的 JSON 文件。我使用 URL 作为键来确定应该显示哪些内容。

亲切的问候！

【问题讨论】：

您的代码看起来正确。 data-checked-head 是 adsbygoogle.js 在初始化时添加的，因此您应该在 devtools 中检查 DOM 时看到它。您在 devtools 的网络选项卡中看到 /pagead/ads 请求吗？
嘿，谢谢！是的，我确实看到了 pagead.googlesyndication 等。但这是在我在构建的 index.html 中硬编码实现之后。我知道该死的肮脏解决方案；）
你知道在你的反应解决方案中添加了什么data-checked-head="true" 吗？据我了解，在将标签添加到浏览器 DOM 之前，它是由某些东西（反应？）添加的？想知道我们是否需要改变方法以不使用 data-checked-head 属性，如果这些预处理很常见并且它们会破坏 adsbygoogle.js。
这与 Preact CLI 渲染有关。请看我上面的更新。 @MikitaBelahlazau

标签： javascript html reactjs typescript adsense

【解决方案1】：

通过将设置内容的函数移动到 componentWillRender() 解决了这个问题。所以我面临的问题与生命周期有关。

【讨论】：