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

Atom | RSS

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

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

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

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

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

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

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

※今回の手順はリンク広告を設置します

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

1. レスポンシブを選択しない
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>

スクリプトを挿入する

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=&quot;more&quot;]').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 == &quot;item&quot;'>
<div style="display:none;">
<div id='MBT-google-ad'>
<div style='font-size:11px;'>スポンサーリンク</div>

同期モードのアドセンスコードを転記する

</div>
</div></b:if>

あとがき

広告はすぐに表示されません。

私の場合、新規広告ユニットを作成してから表示されるまで5分かかりました。

広告が表示されなくてもあせらずに5分以上待ちましょう。
それでもダメなら転記したスクリプトを見直しましょう。

私の環境では前述したコードを転記したあとに特殊文字が自動的にエスケープされていましたが、そうでない環境もあるかもしれません。

 External link

• Hosted Libraries  |  Hosted Libraries  |  Google Developers
• HTML-特殊文字
• HTML実体参照変換 : akiyan.com

：SC2

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