フックが使える！WordPressのAMPプラグインを使ってAMPページをGoogleアナリティクスで計測する方法

AMP このページをあとで読む

少し前からこのブログをAMP対応させているのですが、有効化するとすぐにAMP対応できるWordPressプラグイン(以下、AMPプラグイン)が最近のバージョンアップ（0.3.2）でより便利になったことを知りました。

いい機会なので、さきほどテストを兼ねてAMPプラグインを使って実装する方法に変更しました。

便利なフックを使ってみよう

ところで、AMPプラグインの何が便利かというと「フックがいくつか用意されていること」です。フックを使うと以下のようなことができます。

フックを使えばこんなことができる（一部だけ紹介）

などなど。今回はいくつかあるフックの中から「Googleアナリティクスの計測コードを入れるフック」について書きました。通常は、以下のページに書かれている方法でコードを入れると思うんですが、フックを使う方法も知っておきたかった感じですね。

AMPページをGoogleアナリティクスで計測する方法このページをみる

最近WordPressを触り始めた方などは「フック」と聞くと「ちょっと難しそうだな・・・」と思う方もいるかもしれません（私もそうでした）。ですが、別に大したことはないです。大丈夫です。やってみましょう！

AMPプラグインのフックを使ってGoogleアナリティクスの計測コードを入れる方法

ドキュメントにあるサンプルを参考にして、以下のコードをテーマフォルダ内にあるfunctions.phpに追記します。

add_filter( 'amp_post_template_analytics', 'xyz_amp_add_custom_analytics' );
function xyz_amp_add_custom_analytics( $analytics ) {
    if ( ! is_array( $analytics ) ) {
        $analytics = array();
    }

    // https://developers.google.com/analytics/devguides/collection/amp-analytics/
    $analytics['xyz-googleanalytics'] = array(
        'type' => 'googleanalytics',
        'attributes' => array(
            // 'data-credentials' => 'include',
        ),
        'config_data' => array(
            'vars' => array(
                'account' => "UA-XXXXX-Y"
            ),
            'triggers' => array(
                'trackPageview' => array(
                    'on' => 'visible',
                    'request' => 'pageview',
                ),
            ),
        ),
    );

    return $analytics;
}

コードがやっていること

「amp_post_template_analytics」のフックを使うと、ヘッダー付近に「amp-analytics-0.1.js」が読み込まれ、Googleアナリティクスの計測コードが「</body>」付近に自動で入ります。

AMPページをオリジナルのデザインにされている方は、以下のコードがテンプレート内に書かれているかどうか確認しましょう。この記述がないと自動で入りません。

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

トラッキングIDを設定しよう

コード中にある以下の記述に注目します。

'account' => "UA-XXXXX-Y"

「UA-XXXXX-Y」には、計測したいサイトのトラッキングIDを入れます。トラッキングIDの値がわからない方は、以下のページを参考にして調べましょう。

GoogleアナリティクスのトラッキングIDを確認する方法いろいろこのページをみる

まとめ

というわけで、Googleアナリティクスの計測コードを入れるフックについて書きました。冒頭にも書きましたが、他にも使える便利なフックがありますので、詳細はドキュメントをご参考ください。

著者:bouya Imamura