AMP自動広告 をSimplicity2に導入する方法

adsense
この記事は約20分で読めます。

AdsenseのLabsには、一般公開前の新機能が紹介されています。そして、 AMP自動広告 はその機能の一つです。今までに追加されてきた機能は、取得したコードを指定の場所に貼り付ければそれで終了です。しかし、AMP自動広告の場合、AMPページと非AMPページのセクションにタグを追加して、ペアとなるコンテンツを示す必要があります。さらに、このタグには、非AMPページにはAMPページのリンク、AMPページには非AMPページのリンクが含まれる必要があります。このリンクを各ページ毎に手動で追加するのは面倒なのですが、Simplicity2では既にこのリンクが追加されているので、このことと導入方法を自分の今後の備忘録として紹介します。

 

AMP自動広告

 

スポンサーリンク

はじめに

AMP自動広告は、Google AdsenseのLabsにある一般広告前の新機能です。

Labsには、「AMP 自動広告 – テキスト広告とディスプレイ広告」の他に「ページ単位の広告のフリークエンシーを向上」があります。

「AMP 自動広告 – テキスト広告とディスプレイ広告」は、AMPページを収益化するための便利な新機能だそうです。

そして、この機能を有効にすると、AMP 自動広告コードでタグ付けされた AMP ページにテキスト広告やディスプレイ広告が表示されます。

「ページ単位の広告のフリークエンシーを向上」を使用すると、選択したページ単位の広告の表示頻度が高まるそうです。

これにより、サイトを訪問したユーザーがその広告を見る可能性がいっそう高くなり、総収益の増加が見込めるとのことです。

これまでのGoogle Adsenseの機能をサイトに追加する場合、取得したコードを指定された位置に貼り付けるだけでした。

しかし、AMP自動広告の詳細で導入方法を調べてみると、以下の内容が書かれていました。

たとえば、ご所有のサイト example.com について、各ページの AMP バージョンを example.com/amp/ でホストしているとします。その場合は、AMP と非 AMP の各ページの <head> セクションに <link> タグを追加して、ペアとなるコンテンツを示すようにします。

非 AMP の example.com/news ページ:
<link rel="amphtml" href="http://example.com/amp/news">

AMP の example.com/amp/news ページ:
<link rel="canonical" href="http://example.com/news">

AMP自動広告の導入ガイド(ベータ版)」より抜粋

どうやら、非AMPの通常のページとAMPのページのそれぞれの<head>…</head>内に<link>タグを追加する必要があるようです。

そして、非AMPページにはAMPページのリンクを追加し、AMPページには非AMPページのリンクを追加することで、二つのコンテンツをペアにしなければならないようです。

ただ、一つの記事に対して非AMPページとAMPページが二つあるので、沢山ある記事でこのような作業を行うと相当な手間になります。

そこで、この作業を何とか自動でできないものかと試していたところ、Wordpressのテーマの一つであるSimplicity2では既に<link>タグが追加されていることを知りました。

そこで、今回は自分の備忘録も兼ねて、このこととコードの導入方法について紹介したいと思います。

 

 

AMP自動広告 について

AMP自動広告は、AdSenseが自動的にAMPページに表示する広告です。

現時点では、テキスト広告とディスプレイ広告のみがサポートされています。

AMP自動広告のテキスト広告とディスプレイ広告の特長として、以下の内容が紹介されています。

  • 設定が簡単です。
  • AMP ページを効果的に収益化できます。
  • ページ内の要素を分析して、すでに掲載されている AdSense 広告があれば、広告同士が近接しないように配置が行われます。
  • 広告は、良好なパフォーマンスと優れたユーザー エクスペリエンスが見込まれる最適な位置に挿入されます。

AMP自動広告では、ページのコンテンツの量に基づいて適切な数の広告が表示されます。

AMP自動広告は現在、モバイル端末を使用しているユーザーにのみ表示されます。

これらのことから分かるように、AMPサイトでかつモバイル端末に特化した機能です。

このため、AMPに対応していなかったり、モバイル端末による閲覧が少ないサイトは恩恵が受けられない機能かもしれません。

 

 

今回の作業を行うための予備知識

今回の作業では、テーマのphpファイルを編集する必要があります。

WordPressで初めてサイトを運営する方は、Adsenseのタグの挿入をプラグインを利用している可能性があります。

このため、phpファイルを編集したり、編集したphpファイルをアップロードしたりという経験がないかもしれません。

このため、phpファイルの編集に必要な予備知識としては以下のいずれかが必要です。

  1. WordPressの「外観」→「テーマの編集」でphpファイルを編集する。
  2. レンタルサーバーのファイルマネージャーでphpファイルを編集する。
  3. PHP開発環境でphpファイルを編集し、FTPクライアントソフトウェアで編集したファイルをアップロードする。

1か2でphpファイルを編集する場合、サーバー上にあるファイルを直接操作します。

このため、FTPクライアントソフトウェアが必要なく、初心者でも簡単にphpファイルを編集できます。

ただし、1の場合は、Wordpressの機能に依存するため、編集を間違えると場合によってはWordpressのアカウントにログインできなくなり、間違いを修正できなくなる可能性があります。

2の場合、レンタルサーバーのファイルマネージャの機能に依存するため、Wordpressのアカウントにログインできなくてもphpファイルの編集が可能です。

ただし、どこまで編集できるかはレンタルサーバー次第なので、この点に関しては利用しているレンタルサーバーのヘルプを調べる必要があります。

3の場合は、編集が必要なphpファイルをローカル環境で編集するので、レンタルサーバー上のファイルに影響を与えません。

PHP開発環境にも依りますが、ローカル環境で事前に動作確認をすることも可能です。

ただし、最終的にはFTPクライアントによる編集ファイルのアップロードが必要になります。

このため、どのようなPHP開発環境を利用しても、FTPクライアントを設定する知識が必要なので、初心者には若干ハードルが高いかもしれません。

もし、手動でAMP自動広告のタグをphpファイルに追加するのであれば、自分がどの程度のことができるかを把握したうえで、作業を行ってください。

phpファイルを編集した際に生じた問題は自己責任でお願いします。

 

スポンサーリンク

 

<link>タグについて

AMP自動広告を導入する前の準備として、非AMPページとAMPページの<head>…</head>内に<link>を追加する必要があります。

当初はSimplicity2にこの<link>が追加されていることを知らず、自分でコードを追加したところ、<link>が複数あるという以下のエラーが表示されました。

タグ「link rel=canonical」がドキュメントで複数回使用されています。

なので、Simplicity2では<link>を追加する作業は必要ありません。

非AMPページの<link>は、”header.php”に以下のコードとして追加されています。

<?php //AMPの案内タグを出力
if ( has_amp_page() ): ?>
<link rel="amphtml" href="<?php echo get_amp_permalink(); ?>">
<?php endif ?>

AMPページがある場合、<link>が追加されるようになっています。

ちなみに、get_amp_permalink()は、Simplicity2の独自の関数で、”amp.php”にあります。

以前、当サイトのトップページの通常リンクは”https://www.tnrsca.jp”に設定していました。

そして、Simplicity2では、AMPページのリンクが”https://www.tnrsca.jp/?amp=1#development=1″に変換されます。

ところが、このAMPのリンクだとGoogleのSearch ConsoleのAccelerated Mobile Pagesでエラーメッセージが送られてきました。

そこで、トップページの通常リンクを”https://www.tnrsca.jp/home”に再設定し、AMPページのリンクを”https://www.tnrsca.jp/home/?amp=1#development=1″に変換し直すようにget_amp_permalink関数を以下のように若干変更しました。

//AMP用のURLを取得する
if ( !function_exists( 'get_amp_permalink' ) ):
function get_amp_permalink(){
  $permalink = get_permalink();
  // URLの中に?が存在しているか
  if (strpos($permalink,'?') !== false) {
    $amp_permalink = $permalink.'&amp;amp=1';
  } else {
    $amp_permalink = $permalink.'?amp=1';
  }
  // 以下の内容を追加
  if (strpos($amp_permalink,'.jp/?amp=1') !== false) {
  	$amp_permalink = $permalink.'home/?amp=1';
  }
  return $amp_permalink;
}
endif;

取得したamp_permalinkの末尾が”.jp/?amp=1″である場合、通常リンクに”/?amp=1″がそのまま追加されたと判断し、変換前のpermalinkに”home/?amp=1″を追加して出力します。

次にAMPページの<link>は、”amp-header.php”に以下のコードとして追加されています。

<link rel="canonical" href="<?php the_permalink() ?>" />

このように、Simplicity2では非AMPページとAMPページとの関連付けが行われているので、<link>タグの設定を行う必要はありません。

AMPページに対応しているテーマなら、恐らく、<link>タグが設置されていると思います。

もし気になるようであれば、自分のサイトのソースで”amphtml”と”canonical”があるかどうかを調べてみると良いでしょう。

 

 

AMPコードの導入

AMP自動広告の導入方法は公式サイトでも紹介されています。

ただし、Wordpressのテーマによってはコードを挿入する場所がphpファイルに分割されているので注意が必要です。

スクリプト

まず、以下のようなamp-auto-adsスクリプトを<head>…</head>タグ内に挿入します。

<script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>

Simplicity2の場合、非AMPページの<head>…</head>タグは”header.php”ファイルにあります。

Simplicity2には子テーマと呼ばれる独自編集用のテーマがあります。

この子テーマを編集することで、親テーマの内容を操作することなく、Simplicity2をカスタマイズすることが可能となります。

このため、もし子テーマを編集した結果、Simplicity2に問題が生じても、親テーマには手は加えられていないので、子テーマさえ削除してしまえば問題はありません。

また、”header-insert.php”を利用すれば”header.php”を編集しすることなく、<head>タグ内に独自のタグを追加することが可能です。

<?php
//ヘッダー部分にタグを挿入したいときは、このテンプレート挿入(ヘッダーに挿入する解析タグなど)
//子テーマのカスタマイズ部分を最小限に抑えたい場合に有効なテンプレートとなります。
//例:<script type="text/javascript">解析コード</script>
?>
<?php if (!is_user_logged_in()) :
//ログインユーザーをカウントしたくない場合は
//↓ここに挿入?>
// AMP自動広告はログインユーザーには表示したくないと思うので、ここにamp-auto-adsスクリプトを追加します。

<?php endif; ?>
<?php //ログインユーザーも含めてカウントする場合は以下に挿入 ?>

子テーマには”header.php”はありませんが、親テーマのフォルダから”header.php”コピーして子テーマのフォルダに配置した場合、子テーマの”header.php”が優先的に読み込まれます。

このため、”header.php”を編集したい場合は、子テーマに複製を作成し、それを編集すると良いでしょう。

ただし、”header.php”を編集した場合、Simplicity2が更新されて”header.php”の内容が変更されると、動作に問題が生じる場合があるので、注意が必要です。

Simplicty2の”header.php”の<head>タグは以下の通りです。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<?php
//////////////////////////////////
//ウェブマスターツール用のID表示
//////////////////////////////////
if ( get_webmaster_tool_id() ): ?>
<meta name="google-site-verification" content="<?php echo get_webmaster_tool_id() ?>" />
<?php endif;//ウェブマスターツールID終了 ?>
<meta charset="<?php bloginfo('charset'); ?>">
<?php //ビューポート
//モバイルもしくはページキャシュモードの時
if ( is_mobile() || is_responsive_enable() || is_page_cache_enable() ): ?>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
<?php else: ?>
  <meta name="viewport" content="width=1280, maximum-scale=1, user-scalable=yes">
<?php endif ?>
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php //AMPの案内タグを出力
if ( has_amp_page() ): ?>
<link rel="amphtml" href="<?php echo get_amp_permalink(); ?>">
<?php endif ?>
<?php //Wordpressのバージョンが4.1以下のとき
if ( get_wordpress_version() < 4.1 ):
  get_template_part('header-title-tag');
endif; ?>
<?php get_template_part('header-seo');//SEOの設定テンプレート?>
<?php //wp_enqueue_script('jquery');//jQueryの読み込み?>
<?php the_apple_touch_icon_tag();//Appleタッチアイコンの呼び出し ?>
<?php if ( is_facebook_ogp_enable() ) //Facebook OGPタグ挿入がオンのとき
  get_template_part('header-ogp');//Facebook OGP用のタグテンプレート?>
<?php if ( is_twitter_cards_enable() ) //Twitterカードタグ挿入がオンのとき
  get_template_part('header-twitter-card');//Twitterカード用のタグテンプレート?>
<?php get_template_part('header-insert');//ユーザーが子テーマからヘッダーに何か記述したい時に利用するテンプレート?>
<?php get_template_part('head-custom-field');//カスタムフィールドの挿入(カスタムフィールド名:head_custom)?>
<?php wp_head(); ?>

// もし"head.php"を編集したい場合は、ここにamp-auto-adsスクリプトを追加します。 

</head>

広告コード

次に、以下のようなamp-auto-ads広告コードを<body>の開始タグ直下に挿入します。

<amp-auto-ads type="adsense" data-ad-client="ca-pub-****************"></amp-auto-ads>

*はそれぞれの数字に変更してください。

Simplicity2の場合、<head>の開始タグも”header.php”にあります。

  <body <?php body_class(); ?> itemscope itemtype="http://schema.org/WebPage">
    // ここにamp-auto-ads広告コードを追加します。
    <div id="container">

      <!-- header -->
      <header itemscope itemtype="http://schema.org/WPHeader">
        <div id="header" class="clearfix">
          <div id="header-in">

            <?php //カスタムヘッダーがある場合
            // $h_top_style = '';
            // if (get_header_image()){
            //   $h_top_style = ' style="background-image:url('.get_header_image().')"';
            // } ?>
            <div id="h-top"<?php //echo $h_top_style; ?>>
              <?php get_template_part('button-menu'); //モバイルメニューボタンの呼び出し?>

              <div class="alignleft top-title-catchphrase">
                <?php get_template_part('header-logo');?>
              </div>

              <div class="alignright top-sns-follows">
                <?php  if ( is_top_follows_visible() ): //トップのフォローボタンを表示するか?>
                <?php get_template_part('sns-pages'); //SNSフォローボタンの呼び出し?>
                <?php endif; ?>
              </div>

            </div><!-- /#h-top -->
          </div><!-- /#header-in -->
        </div><!-- /#header -->
      </header>

      <?php if (is_navi_visible())://ナビゲーションが表示のとき
        get_template_part('navi');//グローバルナビのためのテンプレート
      endif; ?>

      <!-- 本体部分 -->
      <div id="body">
        <div id="body-in" class="cf">

          <?php get_template_part('before-main'); //メインカラムの手前に挿入するテンプレート(3カラム作成カスタマイズ時などに) ?>

          <!-- main -->
          <main itemscope itemprop="mainContentOfPage">
            <div id="main" itemscope itemtype="http://schema.org/Blog">

 

 

AMP自動広告のパフォーマンスの確認

AMP自動広告の導入が完了したら、AMP自動広告が表示されるまでにしばらく時間が掛かります。

AMP自動広告は、AdSenseの「パフォーマンスレポート」の「広告の動作」に「AMP自動広告バナー」という指標で表示されます。

表示する手順としては、Adsenseの左メニューにある「パフォーマンス」(図1の青枠)をクリックします。

すると、「レポート」・「一般的なレポート」・「詳細レポート」・「イベント」の4つの項目が表示されます。

その中で、「詳細レポート」をクリックすると、メニューが展開されるので、その中の「動作の確認」(図1の赤枠)をクリックします。

「動作の確認」では、グラフといくつかの指標が表示されます。

その指標の中の「AMP自動広告バナー」(図2の赤枠)で、AMP自動広告のパフォーマンスを確認することが出来ます。

 

図1 図2

 

「広告の動作」を表示すると、ページ上部に以下のメッセージが表示されます。

「広告の動作」レポートは「広告のフォーマット」レポートに置き換えられました。

しかし、「広告のフォーマット」では「広告の動作」のようにAMP自動広告の指標が表示されません。

このため、AMP自動広告の指標を確認するには「広告の動作」で確認するしかありません。

 

 

最後に

AMP自動広告は、まだLabsの新機能の段階なので、Wordpressのプラグインがありません。

このため、導入にはサイトのphpファイルを自分で編集する必要があります。

これまでにも、Adsenseの広告コードを自身のサイトに埋め込むことは行ってきました。

しかし、大抵は<head>タグや<body>タグに追加すればよいだけなので、特に戸惑うことはないでしょう。

しかし、今回のAMP自動広告の場合、<link>タグを追加する必要があります。

この<link>タグは、非AMPページとAMPページとを関連付けるもので、AMPに対応したテーマであれば既に追加されていると思います。

ただ、私の場合、Simplicity2でこの<link>タグによる関連付けがされていることを知らなかったため、自分でさらに<link>タグを追加してしまいました。

この結果、タグ「link rel=canonical」がドキュメントで複数回使用される状態となり、Search Consoleからエラーを指摘される結果となりました。

もし、AMP自動広告を導入するのであれば、利用しているテーマが<link>タグを追加しているかどうかを調べておいた方が良いかもしれません。

調べ方としては、サイトのソースで、”amphtml”か”canonical”を検索すれば良いと思います。

とりあえず、Simplicity2では既にこれら二つの<link>タグが追加されているので、新たに追加する必要はありません。

私のようにこのことに気付かずに余計なもの追加しないよう、この記事が参考になれば幸いです。

コメント

タイトルとURLをコピーしました