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/06/26

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

2022/06/13

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

2022/06/06

WordPress Popular Posts 表示されないを解決する

2022/06/03

WordPress Popular Posts 表示されない(解決だが…)

2022/05/29

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

最新記事を一覧で見る

よく読まれている記事

カテゴリー

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