为 Gatsby 静态站点添加 Adsense 广告

生活 Mar 09, 2020
1

对于使用 Gatsby 生成的静态站点,并不像 Wordpress 和 Ghost 等建站系统那样,成功插入广告代码并不简单。参考国外两篇博文,把方法总结如下:

在 Adsense 后台获得固定广告单元代码,不要使用自动代码,现在 Gatsby 还没办法实现自动加载 Adsense 广告。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- post页广告 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-2527854722096700"
     data-ad-slot="7748165687"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

国内小哥针对 react 网站开发了专门的 React-Adsense 插件。首先,cd 到 Gatsby 站点目录,安装插件。

npm i react-adsense

复制 .cache目录下的 html.jssrc目录下。

cp .cache / default-html.js src / html.js

将在 Adsense 后台获得的广告代码,如下两部分添加到 html.js 标签的 之间,需要对adsbygoogle进行定义。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script dangerouslySetInnerHTML={{__html: '(window.adsbygoogle = window.adsbygoogle || []).push({});'}}></script>
</body>
</html>

在需要插入广告的页面如 post 等文件中,插入广告位。

import React from 'react';
import AdSense from 'react-adsense';
 
// ads with no set-up
<AdSense.Google
  client='ca-pub-7292810486004926'
  slot='7806394673'
/>
 
// ads with custom format
<AdSense.Google
  client='ca-pub-7292810486004926'
  slot='7806394673'
  style={{ width: 500, height: 300, float: 'left' }}
  format=''
/>
 
// responsive and native ads
<AdSense.Google
  client='ca-pub-7292810486004926'
  slot='7806394673'
  style={{ display: 'block' }}
  layout='in-article'
  format='fluid'
/>
 
// auto full width responsive ads
<AdSense.Google
  client='ca-pub-7292810486004926'
  slot='7806394673'
  style={{ display: 'block' }}
  format='auto'
  responsive='true'
  layoutKey='-gw-1+2a-9x+5c'
/>

等待广告生效。一般需要1-2天。

参考资料

[1]. Using Google AdSense with Gatsby

[2]. [gatsbyにgoogleのadsenseを入れる方法](

席一舟

四野八荒,苦茶清禅。渔樵江渚,浊酒西风。 螽斯蓝寿,稀禾芡菱。嬉笑怒骂,行藏自由。 策马悬崖,雕弓满月。惊涛拍岸,毕力遐方。 银鞍白马,一剑寒霜。此生谁料,咸是妙明。

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.