2019-05-02T06:03:15Z kzstock Bloggerカスタム:moreタグをAdSenseコードに置換するスクリプトの設置方法|Awesome Inc. テンプレート
Scrap 2nd.
3

Bloggerカスタム:moreタグをAdSenseコードに置換するスクリプトの設置方法|Awesome Inc. テンプレート

1st:
2:2019-04-16


この記事は、Google が提供する無料ブログサービス Blogger のテンプレートをカスタマイズする方法について書いています。

私が利用しているテンプレート Awesome Inc. に加えた変更手順をメモしていますが、汎用性はあると思います。

more タグを利用して本文中に自動的にAdSenseを表示するためのコードをメモに残していましたが、スクリプトの設置に成功したので私が実行した手順をメモに残します。

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

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


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

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

AdSenseの広告ユニットを作成する時のポイントは2つです。
  1. レスポンシブを選択しない
  2. コードタイプを同期に変更してコードをコピーする
コードタイプ:同期

新規広告ユニットの作成
AdSense > +新しい広告ユニット > テキスト広告とディスプレイ広告

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

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

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

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

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

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

468×15 サイズのAdSense同期コードの例

<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分以上待ちましょう。
それでもダメなら転記したスクリプトを見直しましょう。

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


おわり
次の投稿 前の投稿 ホーム

0 件のコメント:

コメントを投稿

にゃんつくばっと