使用Google Adsense投放广告的说明及提高加载速度

 杂谈   2019-12-10 18:02 

前言:

    本站在文章详情页的右侧加了Google Adsense广告,但不影响网页加载和内容呈现!

说明:

    上周末突然又想到了Google Adsense的事情,之前只是听说,闲来无事,我也试试能不能加个广告。

    这个博客新程序大概是2017年中间时候跑的,之前是wordpress、github pages等,但由于本人三天打鱼两天晒网,更新文章比较随性,所以数量也不多(也不深入),再加上google adsense加载了不少额外的js影响加载速度,所以本站基本算是无广告,除了右侧栏推广位的一个阿里云大使的链接。

    不过参考网上代码,搞定了adsense加载,不影响基本内容的呈现速度,而且广告与内容匹配度不错,不是乱七八糟的广告。

    一、注册

        前提是你有一个google账号,然后在AdSense官网注册(支持中文),这有一个对网站内容的审核,不过很简单,我的内容基本都是原创,而且数量不算少,域名也“悠久”,所以一次也就过审了。

    二、投放

        过审后在AdSense控制台就能添加广告了,支持按网站自动投放、按广告单元手动投放,一般还是手动来吧,当然可以都试试。

        按广告单元投放有3种类型,展示、信息流、文章内嵌,这个看网站设计和个人需求,本站目前仅在文章详情页右下角的推广位设置了一个展示广告,AdSense会提供代码,大概是这样:

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

        上述代码放到body中,ins部分用来展现广告图文,正常这么设置的话,那么页面加载是挺慢的,会引用很多额外的js,所以我参照google改了下,

# 放到需要展现广告的地方
<div id="ad"></div>

# body底部引用js
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
    //ad
    function load_google_ad(){
        $("#ad").append("<ins class='adsbygoogle' style='display:block' data-ad-client='ca-pub-{{ ad_client }}' data-ad-slot='{{ ad_slot }}' data-ad-format='auto' data-full-width-responsive='true'></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>");
    }
    $(document).ready(function(){
        setTimeout("load_google_ad()", 3000);
    });
</script>

        个人测试,能实现在页面加载完成后再过3秒才请求AdSense加载广告,而且根据我的理解这个修改并不违反“广告实施合作规范“,需要注意的是,上述代码{{ ad_client }}和{{ ad_slot }}请自行替换。

    三、生效

        刷新页面应该可以看到广告,当然并不一定百分百展示,在AdSense控制台可以看到数据统计。

        还有就是提现的问题,抱歉,不知道,没指望会真的提现,好像是$100才可以。

后话:

    1. 遵守Adsense合作规范,不要自己点击自己的广告,不要刷点击等!

    2. 当然是希望大家不要屏蔽本站广告了,展示一下也好嘛,AdSense的广告与内容匹配度挺高的,不是一些乱七八糟的。

    3. 屏蔽广告的浏览器插件可以使用adblock plus、uBlock Origin等。