AMP化した記事内にAdSenseを自動的に挟み込むSimplicityカスタマイズ

最近、本ブログをAMP対応しました。

通常のスマホ版と似たレイアウトにすべくいくつかカスタマイズを入れたので、何回かに分けてカスタマイズの方法をご紹介したいと思います。

今回はその第1回として、記事内にAMP対応のAdSenseを自動的に挟み込むカスタマイズの方法です。

何がどうなるのか

AMP対応した記事ページにおいて、記事内のH2見出し前にAMP用AdSense広告ユニットを配置します。

できあがりイメージは下記リンクからどうぞ。（AMP化した当ブログの記事ページです）

参考 WordPressのビジュアルエディタでHTMLを直挿入するプラグイン「Paste Raw HTML」を作った | NaeNote

カスタマイズの元ネタ

元ネタは、ぼくも使っているWordPressテーマSimplicityの作者わいひらさんのこちらの記事です。

参考 本文記事1、2、3番目のH2見出し手前にアドセンスを挿入するWordpressカスタマイズ方法

上記記事は非AMPの場合のカスタマイズ方法ですが、今回はこれをAMP対応させるべく、少しだけコピペコードに手を入れます。

コピペコードの変更箇所

具体的な変更箇所を赤太字で示しています。

function add_ad_before_h2_for_3times_amp($the_content) {
//広告（AdSense）タグを記入
$ad = <<< EOF
//////////////////////////
//ここにAMP用のアドセンスを挿入//
//////////////////////////
EOF;

  if ( is_single() && is_amp() ) {//AMP化済の投稿ページ
    $h2 = '/^<h2.*?>.+?</h2>$/im';//H2見出しのパターン
    if ( preg_match_all( $h2, $the_content, $h2s )) {//H2見出しが本文中にあるかどうか
      if ( $h2s[0] ) {//チェックは不要と思うけど一応
        if ( $h2s[0][0] ) {//1番目のH2見出し手前に広告を挿入
          $the_content  = str_replace($h2s[0][0], $ad.$h2s[0][0], $the_content);
        }
        if ( $h2s[0][1] ) {//2番目のH2見出し手前に広告を挿入
          $the_content  = str_replace($h2s[0][1], $ad.$h2s[0][1], $the_content);
        }
        if ( $h2s[0][2] ) {//3番目のH2見出し手前に広告を挿入
          $the_content  = str_replace($h2s[0][2], $ad.$h2s[0][2], $the_content);
        }
      }
    }
  }
  return $the_content;
}
add_filter('the_content','add_ad_before_h2_for_3times_amp');

変更するのは4箇所です。

関数名に”_amp”を入れる

function add_ad_before_h2_for_3times_amp($the_content) {

関数名に_ampを追加します。

既存の関数名とのバッティングによるPHPエラーを避けるためです。

AMP用の広告タグを入れる

$ad = <<< EOF
//////////////////////////
//ここにAMP用のアドセンスを挿入//
//////////////////////////
EOF;

元ネタでは通常のAdSenseの広告ユニットコードを挿入していました。

今回はAMP用のAdSense広告ユニットコード（<amp-ad>）を入れます。

広告ユニットの作り方はGoogleの公式サイトを参照ください。

AMP化しているページかで分岐を入れる

if ( is_single() && is_amp() ) {//AMP化済の投稿ページ

AMP化済の投稿ページにのみ、AMP広告ユニットを挟み込むように条件を入れます。

これがないと、通常のページにまでAMP広告が挟み込まれてしまいます。

関数名の変更にあわせてフィルタ名を変更する

add_filter('the_content','add_ad_before_h2_for_3times_amp');

最後に、フィルタに追加する関数名にも_ampを追加しておきます。

挿入箇所を変えたい場合

AdSenseの挿入箇所を変えたい場合、下記赤字部分の数字を変えると何番目のH2見出し前に入れるかを調整できます。

if ( $h2s[0][0] ) {//1番目のH2見出し手前に広告を挿入

当ブログの場合、記事のちょうど真ん中過ぎのH2見出し前と「まとめ」前の2箇所に入れるようにしています。

$index_mid_h2 = floor(count($h2s[0])*(2/3)); //記事の真ん中過ぎ
$index_last_h2 = count($h2s[0]) - 1; //「まとめ」前

カスタマイズの注意点

1. function.phpを編集しますので、事前にバックアップをお願いします
2. すでに同様のカスタマイズを入れている場合、AdSenseが連続表示されないかチェックをお願いします
3. カスタマイズ後はAMPエラーが出ないか必ずチェックをお願いします
   参考 AMP テスト – Google Search Console

まとめ：ブログ収益がアップする…かも？

以上、AMP化したSimplicityの記事ページで記事内見出し前にAdSense広告を挟み込むカスタマイズの方法でした。

記事内に広告を入れるのには賛否ありますが、収益が上がりやすいのは事実です。

収益重視なAMP派の方はぜひどうぞ。

※追記：2017年7月21日

Simplicity作者のわいひらさんから、Twitterにてコメントをいただきました。

僕のサイトの場合、テーマデフォルト状態で、通常のモバイルページの「レクタングル（中）」広告よりも、AMPページの同サイズ広告の方が、1.85倍パフォーマンス（RPM）が高い。なので、AMPページへのアクセスが多いサイトには、より効果的なカスタマイズかも。 https://t.co/qhILrOyRf7

— わいひら@寝ログ (@MrYhira) July 20, 2017

AMPページのアクセスが多い方はぜひお試しください。