如何将Adsense添加到使用GatsbyJS构建的网站中？
如何将Adsense添加到使用GatsbyJS构建的网站中？
提问于 2019-01-21 16:43:37
我想知道我应该在哪里添加谷歌广告提供的<script></script>。
他们说要把它添加到<head></head>，但在盖茨比，你有头盔作为<head>。
我还尝试在html.js文件中添加脚本，其中它使用{``}定位一个<head>标记，以转义<script>标记，但它在网站顶部输出脚本内容。
TL;DR:向用GatsbyJS构建的网站添加Adsense的最佳方法是什么？
- 我尝试过使用包，但是我不知道如何与盖茨比一起使用它。
- 我尝试将
<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爬行器检测到。
回答 5
Stack Overflow用户
回答已采纳
发布于 2019-01-21 17:02:28
最后，由于对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>Stack Overflow用户
发布于 2019-07-16 13:00:35
如果您正在使用像Netlify这样的服务来部署您的网站，您可以使用代码段注入功能来使其工作，而无需触及源代码。
settings -> build & deploy -> post processing -> snippet injection -> add snippet
然后，您可以选择要在何处添加代码段(脚本标记)。对于Adsense，这应该在</head>之前。希望能帮上忙。:)
Stack Overflow用户
发布于 2021-04-28 20:25:25
您可以在这里找到一个关于如何在盖茨比中添加Google AdSense的很好的教程。
基本上，建议的方法是使用React实现Google AdSense横幅，并将Google AdSense代码包含在gatsby-ssr.js文件中。
Gatsby-Sr.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插件，它是不推荐的。
全文这里。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54294345
复制相关文章
相似问题
腾讯云开发者
