アドセンスコードをmoreタグの位置に挿入する方法（同期コード）

Atom | RSS

このサイトを検索 | Search this site

はじめに

BloggerはGoogleが提供する無料ブログサービスです。

Bloggerで提供されているAwesome Inc.テンプレートをカスタマイズして、本文中に自動的にアドセンスコードを挿入することに成功したので、筆者が実行した手順を共有させて頂きます。

タグの位置にアドセンスコードを挿入します。汎用性があります。

この記事でメモするスクリプトは、利用できるアドセンスコードタイプが「同期」に限定されますが、それ以外にもレスポンシブタイプが使えないという制限があり、そのことに気がつくまでにかなりの時間を浪費しました。

筆者と同じようなことを考えている方の参考になれば幸いです。

「非同期」コードを挿入するスクリプトの検証は、別の記事でまとめたので、併せてお読みください。

広告ユニット作成～スクリプト設置

※リンク広告を設置する場合

アドセンスの広告ユニットを作成する時のポイントは2つです。

レスポンシブを選択しない
コードタイプを同期に変更してコードをコピーする

新規広告ユニットの作成

アドセンス > ＋新しい広告ユニット > テキスト広告とディスプレイ広告

表示中の右のドロップダウンリストから [リンク広告] を選択して表示されるサイズ一覧から、自動サイズ（レスポンシブリンク）以外のサイズを選択します。

レスポンシブリンクを選択すると置換スクリプトは動作しません。

広告タイプは以下のカスタム項目があるので、必要に応じて調整します。
このページに表示されているリンク広告はデフォルトのままです。

テキスト広告のスタイル
カスタムチャネル
表示可能な広告がない場合

[保存してコードを取得] をクリックすると広告コードが表示されるので、非同期→同期に変更してコードをコピーします。

”非同期” コードがデフォルト表示されるので、そのままコピーするとスクリプトは動作しません。

468×15 サイズのアドセンス同期コードの例

スクリプトを挿入する

Blogger テンプレートを開いて </head>、<data:post.body/> を探し、スクリプトを挿入します。

</head> 直前にスクリプトを挿入する

Blogger > テーマ > HTMLの編集と進んでテンプレート修正画面を開き </head> タグを探し、直前に以下のスクリプトを挿入します。

jquery.min.js スクリプトはGoogleが公開しているスクリプトです。

文末にリンクをメモしています。

<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>