Adsense 広告をJSで見出しの前に自動挿入する方法

公開日:2018/04/21  最終更新日:2018/05/02  カテゴリー:HTML / CSS / JS

Adsense 広告をJSで見出しの前に自動挿入する方法をご紹介します。
手動で 挿入することもできますが 批評ににしたくなったり 広告のコード差し替えが大変なので 自動挿入はお勧めです。

やりたいこ と と実装方法

今回は 各段落の h3見出しの上に 2回に1回 表示させました。
jQuery を 読み込んで 以下のコードを設置するだけで 完了です!

<script>
	$(document).ready(function() {
		var adsCode = '/* adsense のコード */';
		$(".post h3").each(function (i) {
			if(i % 2 == 0){
				$(this).before(adsCode);
			}
		});
	});
</script>

軽いコードの解説

ほとんど 見ればわかると思いますが、躓きそうなところだけ解説しておきます。

3行目: アドセンスコードの代入

簡単そうに 見えて 意外とここでつまずきました!
まず 改行削除しないと SCRIPT1015: Unterminated string constant という エラーが出ました。
そして <script></script> のように / をバックスラッシュ\ でエスケープしないと そのまま表示されてしまいます。

4行目: .each

.each(function(index, Element)) のように 第一因数で 何個目かを取得しています。

さいごに

アドセンスをサイドバーのみに張り付けていましたが、設置場所を見直して増やしたことで 収益がかなり伸びた気がします。
昔は 1ページ 3か所までという制約がありましたが、今は撤廃され コンテンツよりも多くならなくなればいいみたいな感じだったと思うので 見出しに合わせてつけるのはいいと思います。

参考文献

本サイトでは URLに日本語を含んでいます。
メールなどで共有する場合は リンクとして認識されない場合がございますので、こちらをご利用ください。