WordPressにAMPプラグインを導入し、Googleアナリティクスで計測できるようにするまでの流れ

2016年2月24日、GoogleがAccelerated Mobile Pages (AMP)に対応したウェブページを検索結果に表示する事を開始しました。

AMPについての記事はこちら↓

AMP (Accelerated Mobile Pages) について

今回は、TipsnoteにWordPressのAMPプラグインを導入し、Googleアナリティクスで計測できるようにしてみました。

AMPプラグインの導入
AMP用のGoogleアナリティクスプロパティを作成
AMPプラグインのテーマにGAタグを埋め込む
デバッグとエラー対応

AMPプラグインの導入

AMPプラグインをインストールします。

「プラグイン」＞「新規追加」画面から、キーワードに「AMP」と入れて検索。
「今すぐインストール」をクリックしてプラグインを有効化します。

「設定」＞「パーマリンク設定」画面で、空更新（変更を保存ボタンをクリック）します。
これによりRewriteルールが更新され、AMPページが表示されるようになります。

これでAMP対応は完了です！！！

URL末尾に/amp/、または?amp=1を付けることでAMPページが確認できます。
この記事のAMPページはこちら↓

WordPressにAMPプラグインを導入し、Googleアナリティクスで計測できるようにするまでの流れ

AMP用のGoogleアナリティクスプロパティを作成

次にGoogleアナリティクスで計測できるよう、プロパティを作成します。
既存のプロパティではなく、AMP用のプロパティを新たに作成する事が推奨されているため、今回は新たにプロパティを作成しました。

【参考サイト】Google アナリティクスが AMP （Accelerated Mobile Pages）のサポートを開始

AMP はこれから時間をかけて完成していく新しい技術であるため、一般的な Web アナリティクスの実装と同じことが、AMP の計測ではすぐに実現できないこともあるかもしれません。AMP は、従来の Web ページの配信方法以外にも、様々な異なる配信形態があり、それらは異なるキャッシュを介して配信される場合があります。そのため、AMP 対応されたページを訪れたユーザーとと従来の HTML で作成されたページを訪れたユーザは、たとえ同じユーザーであっても、それぞれが異なる 2 人のユーザーとして識別される場合があります。混乱を避けるために、これらを踏まえて AMP 計測のための Google アナリティクスプロパティは、従来の計測用プロパティとは別に作成していただくことをおすすめしています。

AMPプラグインのテーマにGAタグを埋め込む

プラグイン内のテンプレート「amp/templates/single.php」にトラッキングコードを追記します。

head要素内に以下のコードを追加します。

<script src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" async=""></script>

AMP JS library よりも前に入れる必要があるため、以下のコードより前に記述します。

 <!--?php do_action( 'amp_post_template_head', $this ); ?-->

次に、body要素内に以下のコードを追加します。

<script type="application/json">// <![CDATA[
{
  "vars": {
    "account": "UA-XXXXXXXX-X"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
// ]]></script>

UA-XXXXXXXX-Xには作成したGoogleアナリティクスのプロパティIDを入れてください。

実際に計測できているかどうかは、Googleアナリティクスの画面「リアルタイム」＞「サマリー」より確認できます。

デバッグとエラー対応

Googleの『構造化データテストツール』でチェックします。

AMPページのURLを入力し、「検証」ボタンをクリックします。

エラーがある場合、このような画面になります。

今回は、記事内に全く画像がない場合、必須のimageプロパティが出力されずエラーが出ていました。
「class-amp-post-template.php」にimageプロパティの記述の設定がありましたので、記事内に全く画像がない場合、NO-IMAGE画像が表示させるよう追記しました。

構造化データに問題がないと、このような画面になります。

※注意※
プラグイン内のファイルを触ると、プラグインのバージョンアップの際、元に戻ってしまいます。
また、思わぬエラーが出るかもしれませんので、無理に修正する必要はないと思います。
AMPプラグイン自体まだ正式版ではありませんので、今後どのようにバージョンアップされるか注目したいと思います。

【参考サイト】AMPが広告とGoogleアナリティクスをサポート開始