IMUZA.com

<<WordPress(ConoHa)<<はてなブログ

ホーム / Google / AdSense 記事内広告が表示されないので自前で表示

AdSense 記事内広告が表示されないので自前で表示

2019/08/29 Google, javascript, はてなブログ

はてなブログに Google AdSense の自動広告を入れてみたのですが、記事内広告だけが表示されません。

いろいろググってみても解決策は見つからず、結局、本文の内容(文字数?)なのかなとあきらめ、自前で入れることにしました。

  • 記事内広告のコードを取得する
  • Javascript でコードを挿入する
    • 所得したコード
    • Javascript
  • なぜか問題が…

記事内広告のコードを取得する

AdSense > 広告ユニット > 記事内広告 へ行きます。

広告ユニット名を指定し、保存してコードを取得 をクリックします。

コードをコピーします。

Javascript でコードを挿入する

自動広告の場合は、 <head></head> に指定コードを入れておけば、自動で記事内にいくつか広告が入るんだろうと思います。しかし、広告ユニットの場合は自前で記事内にコードを入れるしかありませんので、記事を書くたびに挿入するのは面倒です。Javascript で記事内にコードを挿入しましょう。

所得したコード

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-****************"
     data-ad-slot="**********"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

一行目の <script></script> は <head></head> に入れておきます。

二行目からの <ins></ins> 以降は Javascript で処理します。

Javascript

記事内の20要素おきに挿入する場合の一例です。

※自由に使っていただいて構いませんが、転載はしないでください。

(function(){
    const ad = function(){
        const adsScript = document.createElement('script');
        adsScript.text = '(adsbygoogle = window.adsbygoogle || []).push({});';
        const adsDiv = document.createElement('div');
        // 見やすいように複数行にしてありますが、<ins></ins> を一行にしてもOK
        adsDiv.innerHTML = '<ins class="adsbygoogle" '
        + 'style="display:block; text-align:center;" '
        + 'data-ad-layout="in-article" '
        + 'data-ad-format="fluid" '
        + 'data-ad-client="ca-pub-****************" '
        + 'data-ad-slot="**********"></ins>';
        adsDiv.appendChild(adsScript);
        return adsDiv;
    }


    const page = document.body.classList;
    // 記事ページの場合
    if(page.contains('page-entry')){
        const adsDiv = ad();
        const article = document.getElementsByClassName('entry-content')[0];
        const pars = article.children;
        Array.prototype.forEach.call(pars, function(par, index){
        // 記事内の20要素おきに挿入
            if((index % 20) == 1){
                article.insertBefore(adsDiv.cloneNode(true), par);
            }
        });
    }
}());

<script></script> で括って デザイン > カスタマイズ > フッタ に入れます。

なぜか問題が…

他の記事は問題なく記事内広告が表示されるのに、なぜかこの記事だけ表示されません。それもPCだけでスマホは表示されます。

原因不明です。後日ですね。

(2019/8/30)あれ? 今朝になったら表示されてます…。ただ、なにか原因がありそうです。なお、このサイトは大見出し(H3タグ)の直前に入れるようにしています。

(improvement)はてなブログのカテゴリー階層化
はてなブログのサイドバーをウィンドウ下に粘着
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2022/07/29

WordPressでiframeが表示されない(解決)

2022/07/14

WordPressのデータベースを入れ替える

2022/07/7

WordPress:テーマをゼロから作ってみる(3)

2022/06/26

WordPress:Aレコード変更でウェブだけ他サーバへ移転

2022/06/13

WordPress Popular Posts 他のプラグインに変えたほうがいいかも

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ212
  • WebTips108
  • javascript95
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress37
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php19
  • Node.js18
  • SASS16
  • Ubuntu16
  • laravel415
  • Chrome10
  • cms-style10
  • iPhone9
  • genesis6
  • Git入門6
  • ConoHa WING5
  • Python4
  • Android4
  • SSD3
  • Docker3
  • スマートフォン3
  • Facebook3
  • Firefox3
  • 静的サイトジェネレーター3
  • Blankslate3
  • Mactype2
  • GitHub2
  • rails入門1
  • はてなブクマ1
  • Twitter1
  • 映画1
  • youtube1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Another Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2022 · IMUZA.com