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

Question

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

他们说要将它添加到 <head></head> 中，但在 Gatsby 中你的头盔是 <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 爬虫检测到。

Answer 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 涵盖了使用组件设置和放置广告单元。

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

Answer 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>

Answer 3

如果您使用 Netlify 等服务来部署您的网站，您可以使用片段注入功能来完成这项工作，而无需触及您的源代码。

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

然后您可以 select 在要添加代码段（脚本标签）的位置。对于 Adsense，这应该在 </head> 之前。希望能帮助到你。 :)

Answer 4

您可以在此处找到有关 how to add Google AdSense in Gatsby 的精彩教程。

基本上，建议的方法是使用 React 并在 gatsby-ssr.js 文件中包含 Google AdSense 代码来实现 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。

Answer 5

要在 Gatsby 中添加 Google Adsense，您需要这三个软件包

react-adsense rehype-react gatsby-transformer-remark

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

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

How to add Adsense to a website built with GatsbyJS?

reactjs

jsx

adsense

gatsby

head