BloggerはGoogleが提供する無料ブログサービスです。
Bloggerで提供されているAwesome Inc.テンプレートをカスタマイズして、本文中に自動的にアドセンスコードを挿入することに成功したので、私が実行した手順を共有させて頂きます。
<!--more--> タグの位置にアドセンスコードを挿入します。
汎用性があります。
この記事でメモするスクリプトは、利用できる アドセンス コードタイプが「同期」に限定されますが、それ以外にもレスポンシブタイプが使えないという制限があり、そのことに気がつくまでにかなりの時間を浪費しました。
私と同じようなことを考えている方の参考になれば幸いです。
広告ユニット作成～スクリプト設置
※今回の手順はリンク広告を設置しますアドセンスの広告ユニットを作成する時のポイントは2つです。
- レスポンシブを選択しない
- コードタイプを同期に変更してコードをコピーする
新規広告ユニットの作成
アドセンス > ＋新しい広告ユニット > テキスト広告とディスプレイ広告
表示中の右のドロップダウンリストから [リンク広告] を選択して表示されるサイズ一覧から、自動サイズ（レスポンシブ リンク）以外のサイズを選択します。レスポンシブリンクを選択すると置換スクリプトは動作しません。
広告タイプは以下のカスタム項目があるので、必要に応じて調整します。
このページに表示されているリンク広告はデフォルトのままです。
- テキスト広告のスタイル
- カスタム チャネル
- 表示可能な広告がない場合
[保存してコードを取得] をクリックすると広告コードが表示されるので、非同期→同期に変更してコードをコピーします。
”非同期” コードがデフォルト表示されるので、そのままコピーするとスクリプトは動作しません。
468×15 サイズのアドセンス同期コードの例
<script type="text/javascript">
google_ad_client = "ca-pub-xxxxxxxxxxxx";
google_ad_slot = "xxxxxxxx";
google_ad_width = 468;
google_ad_height = 15;
</script>
<!-- AdSense_468_15 -->
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
google_ad_client = "ca-pub-xxxxxxxxxxxx";
google_ad_slot = "xxxxxxxx";
google_ad_width = 468;
google_ad_height = 15;
</script>
<!-- AdSense_468_15 -->
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
スクリプトを挿入する
Blogger テンプレートを開いて </head>、<data:post.body/> を探し、スクリプトを挿入します。</head> 直前にスクリプトを挿入する
Blogger > テーマ > HTMLの編集 と進んでテンプレート修正画面を開き </head> タグを探し、直前に以下のスクリプトを挿入します。jquery.min.js スクリプトはGoogleが公開しているスクリプトです。
文末にリンクをメモしています。
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' />
<script type='text/javascript'>
$(document).ready(function(){ $('a[name="more"]').before($('#MBT-google-ad').html());
$('#MBT-google-ad').html(''); });
</script> </head>
<script type='text/javascript'>
$(document).ready(function(){ $('a[name="more"]').before($('#MBT-google-ad').html());
$('#MBT-google-ad').html(''); });
</script> </head>
<data:post.body/> 直下にスクリプトを挿入
<data:post.body/> タグを検索して、以下のコードを追記します。私のテンプレートは2か所でヒットしました。
行番号の若い方はモバイル用テンプレートだったので、小さいサイズのリンク広告を新規作成して設置しています。
<data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div style="display:none;">
<div id='MBT-google-ad'>
<div style='font-size:11px;'>スポンサーリンク</div>
同期モードのアドセンスコードを転記する
</div>
</div></b:if>
<b:if cond='data:blog.pageType == "item"'>
<div style="display:none;">
<div id='MBT-google-ad'>
<div style='font-size:11px;'>スポンサーリンク</div>
同期モードのアドセンスコードを転記する
</div>
</div></b:if>
あとがき
広告はすぐに表示されません。私の場合、新規広告ユニットを作成してから表示されるまで5分かかりました。
広告が表示されなくてもあせらずに5分以上待ちましょう。
それでもダメなら転記したスクリプトを見直しましょう。
私の環境では前述したコードを転記したあとに特殊文字が自動的にエスケープされていましたが、そうでない環境もあるかもしれません。
External link
：SC2
このサイトを検索 | Search this site
ブロトピ：今日のブログ更新