Bloggerの記事中にアドセンス広告を自動表示する[忙しい人向け]

Google Bloggerで、記事中の段落の合間に、アドセンス広告を自動挿入する方法を紹介します。

よく見かける、↓のイメージのようなヤツです。

Bloggerの標準機能で、それっぽい物が無かったので、記事中にアドセンス広告を自動挿入するスクリプトを自作しました。このスクリプトは、最初に１回設定すれば、後は自動で記事中に広告を表示する為、忙しい人に超最適です。

さらに、広告の表示位置や、表示数をオプションで指定可能で、広告の表示を好みに合わせてコントロールできます。

以降、使い方について紹介します。

スポンサーリンク

前書 (読み飛ばし可)

このスクリプトを作るに至った経緯です。

ある日の事でした… アドセンスに受かったので、さっそく広告を表示させる事にしました。せっかくなので、記事の段落の合間に、広告を自動挿入させるヤツをやりたいと思います。

しばらく、Bloggerの管理画面と睨めっこしましたが、段落の合間に「記事中広告」を自動挿入する機能はなさそうです (^^;)

今度は、アドセンスの「自動広告」というのを試してみました。

おぉー！ 記事の中に溶け込むように、広告が挿入されました！！
ただ、たまに変な位置に挿入されるのと、自分で挿入位置をコントロール出来ない為、私は使うのを断念しました。

ないなら作れっ！という事で、「記事内広告」を自動挿入するスクリプトを作った次第です。

記事内広告ユニットを作成する

まず、記事内に表示する広告ユニットを作成します。アドセンス管理画面にログインし、以下の手順で記事内広告を作成します。

1. 左メニューより[広告ユニット] をクリックします。
2. [+ 新しい広告ユニット] をクリックします。
3. [記事内広告] をクリックします。

4. ユニット名などの入力を済ませて、[保存してコードを取得] をクリックします。
5. 表示されたコードを後から使う為、メモしておきます。

テーマをバックアップ

ここから、Blogger側での作業です。

作業前に、念の為に現在のテーマをバックアップしましょう。バックアップの方法は以下の通りです。

1. Bloggerの管理画面から、[テーマ] -> [バックアップ/復元] をクリック
2. [テーマをダウンロード] をクリックすると、現在のテーマがダウンロードできます。

※ もし間違えてHTMLを壊してしまっても、ダウンロードしたテーマを復元すれば、元の状態に戻す事ができます。

ブログテーマに、広告自動挿入スクリプトを貼り付け

あなたのブログテーマのHTMLに、広告自動挿入スクリプトを貼り付けます。

1. Bloggerの管理画面から、[テーマ] を選択します。
2. テーマの画面の、[HTMLの編集] をクリックし、HTMLを表示します
3. </body>の直前に、以下のコードを追加します

<b:if cond='data:blog.pageType == "item"'>
<!--adsence記事中内広告自動挿入スクリプト-->
<script>
  ;(function() {
    
    //"xxxx"の所は、自分の情報に書き換えてください。
	//各オプションの説明は「https://www.sukerou.com/2019/03/blogger.html」を参照
    var options = {
      adClient: "ca-pub-xxxx",
      adSlot: "xxxx",
      adFormat: "fluid",
      adLayout: "in-article",
      targetNumbers: [2, 4],
      selector: ".widget.Blog h2",
      beforeText: "スポンサーリンク",
      marginTop: "10px",
      marginBottom: "10px"
    };
    
    function appendAd(c,b){var e=document.createElement(&quot;div&quot;);e.classList.add(&quot;adgoogle-wrapper&quot;);e.style.marginTop=options.marginTop;e.style.marginBottom=options.marginBottom;var a=document.createElement(&quot;small&quot;);a.textContent=options.beforeText;var d=document.createElement(&quot;ins&quot;);d.className=&quot;adsbygoogle&quot;;d.style.display=&quot;block&quot;;d.style.textAlign=&quot;center&quot;;d.dataset.adClient=options.adClient;d.dataset.adSlot=options.adSlot;d.dataset.adFormat=options.adFormat;d.dataset.adLayout=options.adLayout;var f=document.createElement(&quot;script&quot;);f.text=&quot;(adsbygoogle = window.adsbygoogle || []).push({});&quot;;e.appendChild(a);e.appendChild(d);e.appendChild(f);if(e!=null){before(c,e)}}function before(a,c){var b=a.parentNode;if(b!=null){b.insertBefore(c,a)}}var elements=document.querySelectorAll(options.selector);var cnt=1;for(var i=0;i&lt;elements.length;i++){if(options.targetNumbers.indexOf(i+1)&gt;=0){appendAd(elements[i],cnt)}};
  })(window);
</script>
<!--adsence記事中内広告自動挿入スクリプト-->
</b:if>

コードの挿入位置は、以下のイメージを参考にして下さい。

4. クライアントID、スロット番号を、自分の情報に書き換え

貼り付けたコードの中に、adClient: "ca-pub-xxxx"とadSlot: "xxxx"となってい部分があると思います。このxxxxの部分を、自分の情報に書き換えます。

アドセンスの管理画面で、「記事内広告」を作成した時に表示された広告コードから、赤枠で囲った部分の内容を、xxxxの所に入れて下さい。

↑ アドセンス管理画面で、記事内広告ユニットを作成した時に表示されるコード

5. 編集が終わったら、画面上の [テーマを保存] をクリックして、内容を保存します。

これで設定は完了です。お疲れさまでした。

試す

上のスクリプトを組み込んだら、自分のブログにアクセスしましょう。きっと記事の段落の合間に、広告が表示されていると思います。また、広告は記事のページのみ表示されるように制御しています。そのため確認はトップページではなく記事のページで確認してください。

広告ユニット作成した直後は、広告が表示されない事がある為、表示されない場合はしばらく待ってからもう一度試してください。

CSSで装飾する

広告を表示するだけなので、あまり見た目を装飾する事はないと思いますが、このスクリプトによって生成されるHTMLは以下の通りです。

<div class="adgoogle-wrapper" style="margin-top:10px; margin-bottom:10px;">
  <small>スポンサーリンク</small>
  <ins class="adsbygoogle" 
       data-ad-client="ca-pub-xxxxxxxxx" 
       data-ad-slot="xxxxxxxxx" 
       data-ad-format="fluid" 
       data-ad-layout="in-article" 
       style="display: block; text-align: center;"></ins>
   <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>

CSS等で装飾しやすいように、広告ユニットを囲うdivタグに、adgoogle-wrapperというクラス属性をつけています。

スポンサーリンク

オプションの設定

貼り付けたスクリプトに、以下のようなオプションを記述する欄があります。このオプションを変更すると、表示する広告数や、余白などを変更出来るようなっています。

var options = {
  adClient: "ca-pub-xxxx",
  adSlot: "xxxx",
  adFormat: "fluid",
  adLayout: "in-article",
  targetNumbers: [2, 4],
  selector: ".widget.Blog h2",
  beforeText: "スポンサーリンク",
  marginTop: "10px",
  marginBottom: "10px"
};

各オプションの詳細な説明です。

• adClient / adSlot / adFormat / adLayout

アドセンスの広告ユニット作成時に表示されたコードの内容を、それぞれ指定して下さい。

• targetNumbers

記事内広告を挿入する段落番号を指定します。
指定番号の段落の直前に、広告を挿入します。
例: [2, 4]を指定した場合、2段落目と、4段落目の直前に、広告を挿入します。

• selector

記事の中の段落を抽出するためのCSSを指定します。
通常、この設定については変更する必要はありません。

• beforeText

広告上のラベルに表示するテキストを指定します。
アドセンスの規約上、ラベルには「広告」と「スポンサーリンク」のみが許可されています。
その為、空欄""にするか、上の2つの内のどちらかを指定して下さい。

• marginTop

広告上部の余白を指定します。
アドセンスの規約上、コンテンツと広告の区別のつかない紛らわしい配置は規約違反となる可能性がある為、適切な余白を設けましょう。

• marginBottom

広告下部の余白を指定します。
marginTopと合わせて、こちらも適切な余白を設けましょう。

注意事項

使用するにあたっては、自己責任でお願いします。このスクリプトによってポリシー違反等になったとしても、一切責任を負いません。

さいごに

うまく表示されねーぞ！って場合は、ブログのURLと共にお知らせ下さい。
時間があれば対処します。。。（たぶん）