最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】Gitbook页面底部加google adsense广告

gitbook crifan 5876浏览 0评论

之前已经用gitbook制作了电子书,且还弄了个模板:

crifan/gitbook_template: 演示如何使用crifan的gitbook的模板去创建自己的gitbook电子书

现在的总体界面效果是:

考虑到,能尽量再增加点广告费,所以去加上google AdSense。

加的位置,考虑加载页面底部,评论上面。

gitbook adsense

Important differences – GitBook Documentation

gitbook-plugin-google-adsense – npm

petehouston/gitbook-plugin-google-adsense: Inject Google Adsense to your Gitbook.

但是没说明,具体效果如何。

* location(require): the DOM selector to element you want to inject ad into.

还是不太会用。

How to install adsense plugin in Gitbook – Stack Overflow

看了下:

.page-inner section

目前是:

但是如何指定此处要放的section,不清楚。

算了,先去这么设置试试效果

【已解决】Google Adsense中创建广告单元并设置使用广告代码到网页中

得到:

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

其中核心字段:

  • ca-pub-6626240105039250

  • 6956288491

去试试

book.json

"plugins": [
    "google-adsense"
],
"pluginsConfig": {
    "ads": [
        {
            "client": "ca-pub-XXXXXXXXXXXXXXXX",
            "slot": "XXXXXXXXXX",
            "format": "auto",
            "location": ".page-inner section"
        }
    ]
}

再去安装:

【已解决】gitbook中安装Google Adsense插件:gitbook-plugin-google-adsense

回去看看是否可以正常使用插件

gitbook-plugin-google-adsense

【已解决】gitbook中调试google-adsense插件的plugin.js看如何生效

可以看到log了,看到出错了:

【已解决】gitbook的Adsense插件报错:Failed to load resource the server responded with a status of 403

页面中,最开始adsense部分高度是0,刷新后,有高度了:

只不过还是没广告内容显示。

那去adsense的实时广告中,看看能否检测到

暂时看不到数据

希望的是 展示次数,应该大于0,有数据才对。

那就等过段时间再看,希望能生效。

【总结】

此处是加了配置:

books/gitbook_demo/book.json

{
...
  "plugins": [
    "google-adsense",
...
  ],
  "pluginsConfig": {
...
    "google-adsense": {
      "ads": [
        {
          "slot": "6956288491",
          "client": "ca-pub-6626240105039250",
          "location": ".page-inner section",
          "format": "auto"
        }
      ]
    },
...
}

然后去安装:

gitbook install

注:最好等待所有插件都安装完毕,会更能确保安装后的插件正常工作。

附录:

此处手动修改了代码:

generated/books/gitbook_demo/debug/gitbook/gitbook-plugin-google-adsense/plugin.js

把:

    function createAdElement(adConfig) {
...
        adConfig.style && adElement.setAttribute('style', adConfig.style);

改为:

    function createAdElement(adConfig) {
...
        // adConfig.style && adElement.setAttribute('style', adConfig.style);
        adElement.setAttribute('data-full-width-responsive', "true");

目的:

去掉style,加上:自适应

不过目前效果是:

  • 本地调试,会403

  • 真正上传到crifan.com中,才不会报错

  • 但是广告没显示出来

  • adsense中统计数据也看不到

  • 过段时间,再确认能否看到统计数据

后来试了试,把某gitbook发布到book.crifan.com上,还真的可以看到google adsense的广告了:

https://book.crifan.com/books/scientific_network_summary/website/

不过对于github.io中,目前不显示广告:

https://crifan.github.io/scientific_network_summary/website/

会报错403

-》那就去google adsense中去看看,能否加上github.io的域名,使得此处广告能显示

此处顺带也去把子域名加上:

然后再去添加github.io的:

好像和crifan.com中的配置代码没区别啊

-》估计就是:

只要确保了,(github.io的)内部的html代码中有类似于:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({
          google_ad_client: "ca-pub-6626240105039250",
          enable_page_level_ads: true
     });
</script>

就可以确保广告可以正常显示了。

“让您的网站可以开始展示广告

请耐心等待!通常,此过程几天之内就能完成,但在某些情况下最长可能需要 2 周时间。审核完您的网站后,我们会立即通知您。

请一定不要移除网站后再重新提交,因为这可能会延误整个进程。

在此期间,请将代码放置在要展示广告的每个网页上。我们审核完毕后,您的网站将可以开始展示广告。

别忘了前往广告部分选择要展示的广告格式。”

向网站列表中添加新网站 – AdSense帮助

那就是等了,最多2周,然后回去GA后台看看是否能看到广告来自github.io

如果有,则说明是对了。

另外,此处,对于

book.crifan.com

中的gitbook_bottom的广告,已经开始看到有展示数据了:

至此,说明:

book.crifan.com

中的google adsense的广告(gitbook_bottom)的确是生效了。

等过些天,去看看github.io中是否生效。

现在

已验证网站 

只有crifan.com

希望过段时间后,能看到

crifan.github.io

后记:

收到邮件了:

好消息!
您的网站“crifan.github.io”现已准备好展示 AdSense 广告了。

如果您已经启用了自动广告,在几个小时内,就会有贴合用户需求的广告开始在 "crifan.github.io" 上陆续展示,为您带来真金白银。如果还未启用自动广告,请前往您 AdSense 帐号中的“我的广告”页面,启用您想展示的广告。
请注意,您随时都可以通过添加广告代码,在此网站上符合我们合作规范的任意新网页上展示广告。
此致

后来看到:

-》猜测可能是:

新加的github.io的网站缺了这个ads.txt

使用 ads.txt 声明授权卖方 – AdSense帮助

“在您的网域的根级目录下托管您的 ads.txt 文件。”

先去现有www.crifan.com的根目录下看是否有ads.txt

看了看

https://crifan.com/ads.txt

好像没有

看网站文件,是有的:

然后发现需要加上www.

https://www.crifan.com/ads.txt

-》

即 www.crifan.com上有

有这个提示,那说明是:

新加的 crifan.github.io中缺少

待会去加上

“我在 AdSense 中看到一条关于我的 ads.txt 文件的提醒信息。如何确定我的哪个网站的 ads.txt 文件不正确?

如果您在帐号中看到 ads.txt 提醒信息,可以访问您的“网站”页面查看受影响的网站列表。”

果然是:

新加的

crifan.github.io

已就绪

但是发现缺少了:ads.txt

google.com, pub-6626240105039250, DIRECT, f08c47fec0942fa0

去放过去:

git上传上去

暂时还无法访问到:

http://crifan.github.io/ads.txt

估计要等段时间才行。

过段时间,再去Google Adsense中确认,估计缺失ads.txt的警告就会消失了。

第二天就可以了:

但是此处还有警告:

然后再去看看介绍:

使用 ads.txt 声明授权卖方 – AdSense帮助

感觉是:

或许是

此处的

crifan.github.io

的根域名:

github.io

没有ads.txt

所以可能会一直提示此警告,也可能支持子域名,过段时间警告消失。

所以等过段时间看看警告是否消失再说。

然后过了几天,警告还没消失。

难道是必须放到github.io域名根目录才行?那我可没权限

不过另外在google adsense中发现:

crifan.github.io

book.crifan.com

都可以有广告展示了。

甚至这几天,crifan.github.io中都有点击了。

很不错。

转载请注明:在路上 » 【已解决】Gitbook页面底部加google adsense广告

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
89 queries in 0.198 seconds, using 22.10MB memory