Bloggerに限らず、個別の記事にAdSenseコードを挿入している場合、投稿記事が多いほどAdSenseコードを変更する時に手間がかかります。
[このブログ]
- 個別の記事にコメントタグを挿入 (<!-- more -->)
- JavaScriptで<!-- more -->の前にAdSenseコードを挿入
[問題点]
- 置換スクリプトは「同期コード」しか使えない
- Googleはレスポンシブコード（非同期コード）を推奨している
- 同期コードが使えなくなった時のオプションが必要（この記事）
AdSenseコードをmoreタグの位置に挿入する方法｜Blogger
BloggerはGoogleが提供する無料ブログサービスです。 Bloggerで提供されているAwesome Inc.テンプレートをカスタマイズして、本文中に自動的にAdSenseコードを挿入することに成功したので、私が実行した手順を共有させて頂きます。 ...
kzstock.blogspot.comAdSenseの広告タイプ
- テキスト広告とディスプレイ広告（同期、レスポンシブ）
- 関連コンテンツ（同期、レスポンシブ）
- インフィード広告（レスポンシブのみ）
- 記事内広告（レスポンシブのみ）
- 自動広告（レスポンシブのみ）
過去記事の [moreタグ方式] は同期コード限定なので、インフィード広告、記事内広告、自動広告では動作しません。
Googleは、「非同期」＋「ネイティブ広告」推しなので、同期コードの将来は危ういです。
Bloggers Live Online スクリプト
Bloggers Live Onlineブログに記載されたスクリプトは、記事内広告（レスポンシブかつ非同期コード）が利用できます。記事の中で <!-- adsense --> と記述した部分の直前に AdSense コードが挿入されます。
スクリプト実例（オリジナルのまま）
出典：Bloggers Live Online
<div expr:id='"adsmiddle1" + data:post.id'></div>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div style="clear:both; margin:10px 0"><center>
<!-- Add here the code of your ad --></center>
</div>
</b:if>
</b:if>
<div expr:id='"adsmiddle2" + data:post.id'>
<data:post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementById("adsmiddle1<data:post.id/>");
var obj1=document.getElementById("adsmiddle2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>
<div expr:id='"adsmiddle1" + data:post.id'></div>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div style="clear:both; margin:10px 0"><center>
<!-- Add here the code of your ad --></center>
</div>
</b:if>
</b:if>
<div expr:id='"adsmiddle2" + data:post.id'>
<data:post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementById("adsmiddle1<data:post.id/>");
var obj1=document.getElementById("adsmiddle2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>
スクリプトの説明
Blogger テンプレートの <data:post.body/> を前項のスクリプトと置換して、<!-- Add here the code of your ad --> 以下に AdSense コードを追記すると、ブログ本文の <!-- adsense --> と記述した部分の直前に AdSense コードが挿入されます。<!-- adsense --> の記述がない投稿は、タイトルの下に追記した AdSense コードが表示されます。
この動作はスタイルシートの「display:none;」で回避することができます。
<b:if cond='data:blog.pageType == "item"'>
これは表示しているページが投稿ページか否かを判定しています。
表示しているのが投稿ページなら、次行の処理を実行します。
これは表示しているページが投稿ページか否かを判定しています。
表示しているのが投稿ページなら、次行の処理を実行します。
<b:if cond='data:blog.pageType != "static_page"'>
これは表示しているページが固定ページか否かを判定しています。
固定ページでなければ次行の処理を実行します。
" は 「"」をエスケープした文字です。
現在のテンプレートはエスケープしなくても動作します。また、この判定は不要だと判断したので、私のブログでは削除しています。
これは表示しているページが固定ページか否かを判定しています。
固定ページでなければ次行の処理を実行します。
" は 「"」をエスケープした文字です。
現在のテンプレートはエスケープしなくても動作します。また、この判定は不要だと判断したので、私のブログでは削除しています。
var r=s.search(/\x3C!-- adsense --\x3E/igm);
ここが一番重要な部分です。
記事中で <!-- adsense --> の記述があるか否かを正規表現で検索するスクリプトです。ヒットしたら AdSense コードに置換します。ヒットしない時はタイトル下に AdSense コードを表示します。複数の <!-- adsense --> を記述している時は2つ目以降は無視されます。
ここが一番重要な部分です。
記事中で <!-- adsense --> の記述があるか否かを正規表現で検索するスクリプトです。ヒットしたら AdSense コードに置換します。ヒットしない時はタイトル下に AdSense コードを表示します。複数の <!-- adsense --> を記述している時は2つ目以降は無視されます。
使い方
Bloggers Live Online スクリプトの使い方は次の通りです。- 前項の Bloggers Live Online スクリプトを現在使用している Blogger テンプレートに適用します。
- <!-- Add here the code of your ad --> の次に AdSense コードを転記します。
- 記事を書く時に HTML モードに変更して、<!-- adsense --> を挿入します。
- おわり
<!-- adsense --> はコメントタグで囲まれているので、Bloggers Live Online スクリプトが動作しない時は無視されるのでレイアウトに影響はありません。
出典サイトではAdSense コードをエスケープするように書いてありますが、この手順は不要です。AdSense コードをコピー＆ペーストするだけで動作します。
<data:post.body/> は複数の場所（２～３か所）で見つかりますが、行番号の若い方は mobile テンプレートです。
私が利用している Awesome Inc. テンプレートは 2か所でヒットします。
モバイルテンプレートにも適用したいときは、両方の <data:post.body/> を変更します。
あとがき
AdSenseの「記事内ネイティブ広告」は新サービスです。自動広告にも対応しています。
検証したところでは、自動広告に「記事内ネイティブ広告」を設定すると不自然な場所に広告がインサートされてしまい、それに引きずられてAdSense全体のクリック数が激減しました。
サイドバーでの利用は非推奨です。
<!-- more --> に応用
今回メモした Bloggers Live Online コードのコメント部分（/\x3C!-- adsense --\x3E/igm）は別の文字列に変更することができます。冒頭で触れた [moreタグ方式] の代わりに利用することができます。
<!-- more --> を使用する時は、以下の javascript の赤文字部分を変更します。
<script type="text/javascript">
var obj0=document.getElementById("adsmiddle1<data:post.id/>");
var obj1=document.getElementById("adsmiddle2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!--more--\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+11);}
</script>
var obj0=document.getElementById("adsmiddle1<data:post.id/>");
var obj1=document.getElementById("adsmiddle2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!--more--\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+11);}
</script>
記事内広告は Google が自動的に最適化する新しい広告フォーマットで、ページ内の段落と段落の間にネイティブ広告を表示するものです。
記事内広告は、掲載先のページで優れたパフォーマンスを発揮できるよう、Google によって最適化されます。これには広告のレイアウト、使用する広告要素、CTA（行動喚起）ボタンなどが含まれます。また、広告の配色やフォントなど、定義済み要素も Google による最適化の対象となります。
記事内ネイティブ広告 - AdSense ヘルプ
External link
検証：Awesome Inc. テンプレート
：SC2
このサイトを検索 | Search this site
ブロトピ：今日のブログ更新
0 コメント