如何将 Adsense 添加到使用 GatsbyJS 构建的网站？答案

【问题标题】：How to add Adsense to a website built with GatsbyJS?如何将 Adsense 添加到使用 GatsbyJS 构建的网站？
【发布时间】：2019-06-15 02:26:07
【问题描述】：

我想知道应该在哪里添加 Google Adsense 提供的 <script></script>。

他们说将其添加到 <head></head>，但在 Gatsby 中，您将 Helmet 设置为 <head>。

我还尝试将脚本添加到 html.js 文件中，该文件位于带有 {``} 的 <head> 标记以转义 <script> 标记，但它会在网站顶部输出脚本内容。

TL;DR：将 Adsense 添加到使用 GatsbyJS 构建的网站的最佳方式是什么？

我尝试使用 react adsense package，但我不明白如何将它与 Gatsby 一起使用。
我尝试将<script> 标记添加到html.js，但它无法编译。
如果您使用{``} 对其进行转义，您将获得位于网站顶部的脚本。

<head>
          <meta charSet="utf-8" />
          <meta httpEquiv="x-ua-compatible" content="ie=edge" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
          />
          {this.props.headComponents}
          {`<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>`}
             {` <script>
                  (adsbygoogle = window.adsbygoogle || []).push({
                    google_ad_client: "ca-pub-1540853335472527",
                    enable_page_level_ads: true
                  });
                </script> 
              `}
        </head>

来源：html.js

Google 抓取工具应该会检测到该网站。

【问题讨论】：

引号被转换成"在浏览器中。不确定是否有修复。
使用dangerouslySetInnerHTML 抑制浏览器错误。
<script dangerouslySetInnerHTML={{ __html: '(adsbygoogle = window.adsbygoogle || []).push({google_ad_client: "something",enable_page_level_ads: true});', }} />

标签： reactjs jsx adsense gatsby head

【解决方案1】：

要设置 Adsense，请将 <script> 标记（没有模板文字 {``} 放在 html.js 中的结束 </body> 标记之前，如下所示：

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

然后，要放置广告单元，您可以使用预先构建的组件，如您提到的 npm 上的react-adsense，也可以自己构建。

This is a useful article 涵盖了带有组件的广告单元的设置和放置。

让我知道这是否适合您或有什么不清楚的地方！

【讨论】：

【解决方案2】：

感谢Github上给出的答案，终于解决了问题：

如果要添加 Adsense：

cp .cache/default-html.js src/html.js
添加脚本，但里面的所有内容都应该转义 -> {<some-js-code-here>}
以我的情况为例：

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
             <script>
                  {`
                    (adsbygoogle = window.adsbygoogle || []).push({
                      google_ad_client: "ca-pub-1540853335472527",
                      enable_page_level_ads: true
                    });
                  `}
             </script>

【讨论】：

最终，如果您想验证是否已添加 Adsense，您可以控制是否出现与广告相关的 <script> -> 在 <head> 标记内，您应该会找到类似 <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 的内容

【解决方案3】：

如果您使用 Netlify 之类的服务来部署您的网站，您可以使用 sn-p 注入功能来完成这项工作，而无需接触您的源代码。

settings -> build & deploy -> post processing -> snippet injection -> add snippet

然后您可以选择要添加sn-p（脚本标记）的位置。对于Adsense，这应该在</head> 之前。希望能帮助到你。 :)

【讨论】：

好一个！我不必担心忽略 Github 上的东西

【解决方案4】：

您可以在这里找到关于how to add Google AdSense in Gatsby 的精彩教程。

基本上，建议的方法是使用 React 实现 Google AdSense 横幅，并在 gatsby-ssr.js 文件中包含 Google AdSense 代码。

gatsby-ssr.js 文件：

const React = require('react')

const HeadComponents = [
  <script
    src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXX"
    crossOrigin="anonymous"
    async
  />,
]

exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
  setHeadComponents(HeadComponents)
}

AdSense 横幅组件：

const Banner: React.FC<BannerProps> = ({
  className,
  style,
  layout,
  format,
  client = 'ca-pub-XXXX',
  slot,
  responsive,
  layoutKey,
}) => {
  useEffect(() => {
    try {
      const adsbygoogle = window.adsbygoogle || []
      adsbygoogle.push({})
    } catch (e) {
      console.error(e)
    }
  }, [])
  return (
    <div className={clx(container, className)}>
      <ins
        className="adsbygoogle"
        style={style}
        data-ad-layout={layout}
        data-ad-format={format}
        data-ad-client={client}
        data-ad-slot={slot}
        data-ad-layout-key={layoutKey}
        data-full-width-responsive={responsive}
      />
    </div>
  )
}

不要使用 gatsby-adsense 插件，它已被弃用。

全文here.

【讨论】：

附带说明，对于 Gatsby V2（带有 ES6），您需要使用 export const onRenderBody 而不是 exports.onRenderBody。

【解决方案5】：

要在 Gatsby 中添加 Google Adsence，您需要这三个包

react-adsense rehype-react gatsby-transformer-remark

如果您想知道如何在您的网站中实施这些软件包，请查看this tutorial

【讨论】：