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

IT技术 reactjs jsx adsense gatsby head
2021-05-20 01:42:28

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

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

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

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

  • 我尝试使用react adsense 包，但我不明白如何将它与 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 抓取工具检测到。

4个回答

多亏了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>

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

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

然后您可以选择要添加代码段的位置（脚本标记）。对于Adsensethis 应该在</head>. 希望能帮助到你。:)

在此处输入图片说明

您可以在此处找到有关如何在 Gatsby 中添加 Google AdSense的不错教程。

基本上，建议的方法是使用 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 插件，它已被弃用。

全文在这里。

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

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

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

这是一篇有用的文章，涵盖了设置和放置带有组件的广告单元。

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

其它你可能感兴趣的问题
上一篇如何在不公开我的真实姓名的情况下将我的作品上传到 Thingiverse 下一篇样式组件中的动态主题