フロントのエンド

Web開発をがんばりたいブログ

WordPress

[WordPress] AMP プラグインで対応したサイトに アナリティクス を仕込む

by:
16/09/06

AMP対応はWordPressのプラグインでやっていることを前提として。

AMP — WordPress Plugins

Google アナリティクスで AMP ページを計測する準備

アナリティクスで AMP 用のプロパティーを用意する

トラッキングIDUA-XXXXXXXX-Xをメモっておく。

スポンサーリンク

Document

AMPのリポジトリのリードミー

Automattic/amp-wp: WordPress plugin for adding AMP support

真ん中くらいに「Analytics」の項目がある。

//functions.phpに
//AMP用アナリティクス
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',
                ),
            ),
        ),
    );

    // https://www.parsely.com/docs/integration/tracking/google-amp.html
    $analytics['xyz-parsely'] = array(
        'type' => 'parsely',
        'attributes' => array(),
        'config_data' => array(
            'vars' => array(
                'apikey' => 'YOUR APIKEY GOES HERE',
            )
        ),
    );

    return $analytics;
}

Googleアナリティクスだけを使う場合は、下の「www.parsely.com」のコードはいらない。

Adding Analytics to your AMP pages  |  Analytics for AMP Pages  |  Google Developers

いちおうGoogle公式のDocumentも目を通しておく。

AMPプラグインじゃなくて、AMP用のテーマを自作する場合は

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

とりあえずコレで動く。

 <body>

  <amp-analytics type="googleanalytics" id="analytics1">
  <script type="application/json">
  {
    "vars": {
      "account": "UA-XXXXX-Y"
    },
    "triggers": {
      "trackPageview": {
        "on": "visible",
        "request": "pageview"
      },
      "trackEvent": {
        "selector": "#event-test",
        "on": "click",
        "request": "event",
        "vars": {
          "eventCategory": "ui-components",
          "eventAction": "click"
        }
      }
    }
  }
  </script>
  </amp-analytics>

  <h1 id="header">AMP Page</h1>

位置的にはbodyの開始タグ直後的な位置みたい。

まとめ

とりあえずAMPプラグインで対応しておけば、テーマのfunctions.phpにいろいろ追記するだけで機能拡張出来るので、捗る。

コメントを残す