AMP ページにアナリティクスを追加する

Accelerated Mobile Pages(AMP)プラットフォームを使用すると、静的コンテンツを高速で表示するウェブページを作成できます。AMP には、ユーザー インタラクションの測定を可能にする <amp-analytics> 要素が含まれています。この要素には、Google アナリティクスをサポートする機能が組み込まれています。

ページビューを測定するための基本設定

AMP ページに Google アナリティクスの基本インストールを設定するには、次のコード スニペットをコピーし、<GA_MEASUREMENT_ID> をプロパティ ID に置き換えます(Google アナリティクス ID を確認する)。

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

仕組み

<amp-analytics> 要素は AMP の拡張コンポーネントであり、スクリプトタグ内で custom-element として明示的に有効化されています。

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

<amp-analytics> 要素ブロックでは、Google の測定サービスに対するサポートを有効化するため、<amp-analytics>type 属性が「gtag」に(gtag.js のサポートを有効にする)、data-credentials 属性が「include」に(Cookie を有効にする)設定されています。

<amp-analytics type="gtag" data-credentials="include">
  ...
</amp-analytics>

AMP では、JavaScript の使用が制限(専用のライブラリに限定)されているため、設定は JSON を使って行われます。有効な <GA_MEASUREMENT_ID> を持つ gtag_id プロパティが vars ブロックに追加され、その下に <GA_MEASUREMENT_ID>: {} を持つ config プロパティが値として追加されています。

イベントの測定

triggers を指定して値を定義し、AMP ページのイベントを測定します。トリガーの設定では、次のようなプロパティが使用されます。

  • selector: ターゲット要素を指定する CSS セレクタです。
  • on: イベントのタイプを指定します。
  • vars: event_name でイベントのタイプを指定し、必要に応じて他のパラメータを追加します。

この例では、Google アナリティクスの基本的なイベントを設定する方法を示します。「button」というトリガーを作成し、ID 値「the-button」を持つ要素がクリックされると発動するようにします。このトリガーは、event_name の値「login」と method の値「Google」を Google アナリティクスに送信します。

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
         "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#the-button",
          "on": "click",
          "vars": {
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

Google アナリティクス イベントは、Google アナリティクスで使用されるイベントのカテゴリで、主にキャンペーンのレポートを作成する際に使用されます。イベントの値は、vars ブロックで event_category パラメータ、event_label パラメータ、value パラメータを使用して指定できます。

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
          "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#login",
          "on": "click",
          "vars": { 
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

トリガーの設定について詳しくは、amp-analytics ドキュメントをご覧ください。

パラメータの変更

デフォルトの Google アナリティクス パラメータをオーバーライドするか、新しいパラメータを追加するには、config ブロックの parameter セクションに必要な値を追加します。この例では、デフォルトのページビューおよびイベントの値をオーバーライドして、page_titlepage_location を設定しています。

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "page_title": "Beethoven symphonies",
        "page_location": "https://www.example.com/beethoven.html"
      }
    }
  }
}
</script>
</amp-analytics>

ドメイン リンカーを利用すると、別々のドメイン上にある複数の関連サイトを 1 つにまとめて測定できます。リンクするドメインを指定するには、"linker": { "domains": [...] } プロパティを使用します。

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": { "domains": ["example.com", "example2.com"] }
      }
    }
  }
}
</script>
</amp-analytics>

Google アナリティクスが設定されている AMP ページでは、AMP キャッシュから正規ドメインにリンクする機能がデフォルトで有効になっています。ドメイン トラフィックをリンクする Google アナリティクスの機能を無効にするには、config パラメータに "linker": "false" を追加します。

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

サイトの速度

Google アナリティクスは、サイトのトラフィックのごく一部のサイト速度データを自動的に収集するように構成されています。サンプルレートを変更して、収集するデータを増減できます。たとえば、レートを 100% に設定する場合、ハイライト表示された部分のコードを設定に追加します。

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "site_speed_sample_rate": 100
      }
    }
  }
}
</script>
</amp-analytics>

サイトの速度データの収集を停止するには、ハイライト表示された部分のコードを追加します。

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "site_speed_sample_rate": 0
      }
    }
  }
}
</script>
</amp-analytics>

AMP と非 AMP のトラフィック

デフォルトで、AMP トラフィックではウェブ トラフィックとは異なるクライアント ID が使用されます。標準のウェブページと比較すると AMP ページは高速で読み込まれ、異なるトラフィック パターンを示します。そのため AMP と非 AMP のトラフィックでは、多くの場合に指標も異なります。

AMP トラフィックを測定する際に別のプロパティを使用すると、指標を的確に分析し、より正確にトラフィックを把握できます。AMP と非 AMP のトラフィックを同じプロパティを使って測定しなければならない場合は、データソース ディメンションまたはカスタム ディメンションを使用してデータを区別してください。

デフォルトでは、Google アナリティクスはデータソース ディメンションを介して値「AMP」を送信します。この値を使用してデータを分割またはフィルタリングしたり、AMP と非 AMP のコンテンツを 1 つのビュー内で分析したりすることができます。

設定のデバッグ

AMP 検証ツールを使用すると、ウェブページが AMP HTML の仕様に適合しているかどうかを確認できます。検証ツールを有効にするには、ページの URL に #development=1 を追加します。

amp-analytics 拡張を使用すると、設定のデバッグやトラブルシューティングに役立つ警告やエラー メッセージが出力されます。ウェブブラウザのコンソールで記録されたエラー メッセージを表示するには、ページの URL に #log=1 を追加してください。

サンプルコードの全文

この例は、ページ上に 1 つのボタンがある完全な AMP ページを示しています。この設定では、標準のページビュー データと「button-click」イベントが Google アナリティクスに送信されます。

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="self.html" />
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

    <!-- Load AMP -->
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    <!-- Load amp-analytics -->
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  </head>
  <body>
    <!-- Configure analytics to use gtag -->
    <amp-analytics type="gtag" data-credentials="include">
      <script type="application/json">
        {
          "vars": {
            "gtag_id": "<GA_MEASUREMENT_ID>",
            "config": {
              "<GA_MEASUREMENT_ID>": { "groups": "default" }
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Make it so.</h1>
    <div>
      <button type="button" id="the-button">Engage!</button>
    </div>
  </body>
</html>