Question

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

他们说要将其添加到<head></head>中，但是在盖茨比，您的头盔为<head>。

我也尝试将脚本添加到html.js文件中，该文件位于带有<head>的{{1}}标签下，以逃避{``}标签，但在脚本顶部输出网站上的脚本内容。

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

我尝试使用react adsense package，但不了解如何在盖茨比中使用它。
我尝试将<script>标记添加到html.js中，但无法编译。
如果您使用<script>对其进行转义，则会在网站顶部按原样获得脚本。

{``}

源：html.js

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

Answer 1

感谢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 2

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

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

然后，要放置广告单元，您可以如前所述在npm上使用react-adsense之类的预制组件，也可以自己构建。

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

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

Answer 3

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

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

然后，您可以选择要将代码段添加到的位置（脚本标记）。对于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。

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

4 个答案: