Luxeritas で『アドセンス』を本文の好きな位置に入れる方法【AMP対応】

2017年12月3日2018年3月6日Luxeritas

Luxeritas は Adsense を自動で AMP用のものに変換してくれます。

しかし AMP用のコードに変換されるのはウィジェットに入れたものだけ。
通常コードを本文に挿入してもAMPエラーになります。

だけど長い記事には本文の途中にコンテンツ広告を挿入したい！

というわけで、AMPに対応させた広告挿入できるようにしました。
プラグイン一つあればできるので簡単です。

用意するもの

用意するものは2つ。

• コンテンツ用アドセンスコード
• PHPコードを挿入できるプラグイン

Adsenseコードはサイズさえ合えばコンテンツ用でなくてもOK。ただ、スポンサーリンクが不要であったりレスポンシブより賢く利便性が高いのでコンテンツ用が使いやすいです。

PHPコードを挿入するのは PHPCode Snippets か Post Snippets がおすすめ。

AMP用広告表示簡単編

かんたんコピペバージョンです。

ショートコードに使う名前は adsense-amp みたいに分かりやすい名前を付けておくと後で楽です。

global $luxe;

/*通常ページでのコンテンツ広告*/
$adsense_m='Adsense サイトのから取得したコンテンツ広告のコード<script async ではじまるのをそのまま貼り付け';

/* AMP用コード */
$adsense_m_amp='LuxeritasのAMPページの広告コードをまるっと貼り付け';

/* AMPならAMPコードに入れ替え */
if( isset( $luxe['amp'] ) ) {
 $adsense_m =$adsense_m_amp;
}
echo $adsense_m;

AMPページ用のアドセンスコードは、ルクセリタスのAMPページのソースから取得します。

AMP ページのHTMLを開いて

<div class="ps-wrap"><p itemprop="headline name" class="ps-label al-c">
から
</amp-ad></div></div>

までをコピペ。

AMPページはURLの最後に “/amp" か “?amp" をつければ見えます。

なにをやっているかというと、通常ページでは通常のコードを表示させ、AMPページではAMP用のものに入れ替えているだけ。

広告の挿入とAMPページへの出力

広告の挿入はPHP挿入プラグインでつけた名前のショートコードを本文にはりつけるだけ。通常ページのプレビューで広告が表示されていたらとりあえずOK。

忘れてはいけないAMPの出力設定

プラグインはLuxeritasカスタマイザーのAMP設定で出力させないと、ショートコードがそのまま表示されてしまいます。

というわけで、LuxeritasのAMP設定で、PHPコードを挿入するのに使ったプラグインを出力させます。

AMPページで広告が表示されたらおしまい。

これで好きなところにAdsenseを挿入できるようになりました。

うまくできたのを確認したら、通常ページ用のコードを div ではさんで、上下のマージンを30pxくらい取っておくと誤クリックを防げます。

Google の AMP キャッシュの確認法はこちら。

関連リンクAMPキャッシュダイレクトジャンプ

data-ad-clientなどを変数に入れる通常バージョンも書こうかと思ったけど、Adsenseの特性上使いまわすこともそうそうないだろうから、必要ないですね。

関連Luxeritasまとめ