如何将 Adsense 添加到使用 GatsbyJS 构建的网站？
Posted
技术标签:
【中文标题】如何将 Adsense 添加到使用 GatsbyJS 构建的网站？【英文标题】：How to add Adsense to a website built with 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);', />
【参考方案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-s-s-r.js 文件中包含 Google AdSense 代码。
gatsby-s-s-r.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
【讨论】：
以上是关于如何将 Adsense 添加到使用 GatsbyJS 构建的网站？的主要内容，如果未能解决你的问题，请参考以下文章
text 将adsense广告添加到beaver builder post
如何在 VuePress 上实现 Google Adsense？
如何将 OAuth 与 Google AdWords / AdSense API 一起使用？
jQuery 将 Google Adsense 附加到 div