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

AMP を使用すると静的コンテンツを高速で表示するウェブページを作成できます。AMP には AMP ページに対するユーザーインタラクションをトラッキングするための amp-analytics 要素が含まれています。この要素には Google アナリティクスをサポートする機能が組み込まれています。

AMP ページ向けアナリティクスの詳細については、amp-analytics リファレンスをご覧ください。AMP の基本情報については、AMP の概要（Accelerated Mobile Pages（AMP）Project のサイト）をご覧ください。

Google アナリティクスで AMP ページをサポートするための要件と各種機能については、Google アナリティクスヘルプセンターの Accelerated Mobile Page（AMP）をご覧ください。

Google アナリティクスでサポートされるユーザーインタラクション

amp-analytics は拡張コンポーネントなので、使用する場合はカスタム要素としてドキュメントに明示的に設定する必要があります。ページに AMP アナリティクス機能を追加するには、AMP JS ライブラリの前にある <head> に次のスクリプトを挿入します。

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

ページの本文に amp-analytics 要素を追加します。その後、Google アナリティクスの組み込みサポートを有効にするために、amp-analytics 要素の type 属性を googleanalytics に設定します。デバッグなどで簡単に識別できるように、各 amp-analytics 要素には id 属性を付けておくことをおすすめします。

<amp-analytics type="googleanalytics">
  ...
</amp-analytics>

Google アナリティクスの設定で利用できる、トリガーの request 値は以下のとおりです。

pageview: ページトラッキング用
event: イベントトラッキング用
social: ソーシャルトラッキング用

ページトラッキング

ページトラッキングを使用すると、ウェブサイトの特定のページで発生したビューの数を測定できます。

ページビューヒットを送信するには、トリガーの request 値を pageview に設定します。

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

トリガーの vars 属性では次のページビューフィールドに対して Key-Value ペアを設定できます。

値	型	必須	説明
`title`	`string`	いいえ	ページのタイトル（例: homepage）。デフォルト値は `title`。
`documentLocation`	`string`	いいえ	トラッキングするページの URL（例: https://www.ampproject.org/）。デフォルト値は `sourceUrl`。

次の例では、title と documentLocation のデフォルトのページビュー値がオーバーライドされます。

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageviewWithCustomUrl": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "My page",
        "documentLocation": "https://www.examplepetstore.com/pets.html"
      }
    }
  }
}
</script>
</amp-analytics>

イベントトラッキング

「イベント」は、ウェブページやアプリの画面の読み込みとは関係なくトラッキングできる、コンテンツに対するユーザーインタラクションです。Google アナリティクスのイベントについてご不明な点がある場合は、まずアナリティクスヘルプセンターのイベントについてをご覧ください。

イベントヒットを送信するには、トリガーの request 値を event に設定し、イベントカテゴリと操作に関する必須フィールドを設定します。

次の例では、トリガーの selector 属性を使用して、特定の要素がクリックされた際にイベントを送信します。

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackClickOnHeader" : {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "ui-components",
        "eventAction": "header-click"
      }
    }
  }
}
</script>
</amp-analytics>

トリガーの vars 属性では次のイベントフィールドに対して Key-Value ペアを設定できます。

値	型	必須	説明
`eventCategory`	`string`	はい	通常はインタラクション対象のオブジェクト（例: Video）。
`eventAction`	`string`	はい	インタラクションの種類（例: play）。
`eventLabel`	`string`	いいえ	イベントの分類に役立ちます（例: Fall Campaign）。
`eventValue`	`integer`	いいえ	イベントに関連付けられた数値（例: 42）。デフォルト値は 0。

非インタラクションイベント

イベントは、必要に応じて非インタラクションイベントとして送信することもできます。このようなイベントを送信するには、extraUrlParams セクションで ni パラメータを "1" に設定します。

"extraUrlParams": {
   "ni": "1"
}

詳細な例については、「googleanalytics を拡張する」をご覧ください。

ソーシャルインタラクション

ソーシャルインタラクションのアナリティクスでは、ユーザーがソーシャルネットワークを通じて行った操作の回数を測定できます。たとえば、ユーザーが Twitter の「ツイート」リンクをクリックした回数を測定できます。

Google アナリティクスのソーシャルインタラクションについてご不明な点がある場合や、ソーシャルネットワーク、操作、ターゲットに使用する値がわからない場合は、まずアナリティクスヘルプセンターのソーシャルプラグインと接点についてをご覧ください。

ソーシャルインタラクションヒットを送信するには、トリガーの request 値を social に設定し、ソーシャルネットワーク、操作、ターゲットに関する必須フィールドを設定します。

次の例では、トリガーの selector 属性を使用して、特定のソーシャルボタンがクリックされた際にイベントを送信します。

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackClickOnTwitterLink" : {
      "on": "click",
      "selector": "#tweet-link",
      "request": "social",
      "vars": {
          "socialNetwork": "twitter",
          "socialAction": "tweet",
          "socialTarget": "https://www.examplepetstore.com"
      }
    }
  }
}
</script>
</amp-analytics>

トリガーの vars 属性では次のイベントフィールドに対して Key-Value ペアを設定できます。

値	型	必須	説明
`socialNetwork`	`string`	はい	操作が発生するネットワーク（Facebook や Twitter など）。
`socialAction`	`string`	はい	発生した操作の種類（いいね！、送信、ツイートなど）。
`socialTarget`	`string`	はい	ソーシャルインタラクションのターゲットを指定します。通常この値は URL となりますが、それ以外のテキストを入力することも可能です（例: http://mycoolpage.com）。

`googleanalytics` を拡張する

googleanalytics の設定の基本となるリクエストエンドポイントは Measurement Protocol なので、追加の Measurement Protocol パラメータをヒットと一緒に送信できます。この機能はカスタムディメンションやカスタム指標などのパラメータ値をヒットと一緒に送信する場合に便利です。

たとえば、ページビューと一緒にカスタムディメンションを送信するには、カスタムディメンションパラメータ（またはヒットに含めたい他のパラメータ）を extraUrlParams セクションに追加します。このセクションはリクエストが 1 つの場合はトリガーレベルで設定し、すべてのリクエストでデータを送信する場合はグローバルに設定できます。

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "extraUrlParams": {
    "cd3": "AMP"
  },
  "triggers": {
    "trackPageviewWithCustomData": {
      "on": "visible",
      "request": "pageview"
    },
    "trackEvent" : {
      "on": "visible",
      "request": "event",
      "vars": {
        "eventCategory": "ui-components",
        "eventAction": "header-click"
      },
      "extraUrlParams": {
        "ni": "1"
      }
    }
  }
}
</script>
</amp-analytics>

サンプリング

AMP アナリティクスでは、非 AMP ページの場合と同じように AMP ページにサンプリング機能を追加できます。たとえば、AMP ページから送信されたリクエストが対象の場合は、次の設定を使って 1% のレートでサンプリングを実施できます。

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageviewWithCustom" : {
      "on": "visible",
      "request": "pageview",
      "sampleSpec": {
        "sampleOn": "${clientId}",
        "threshold": 1
      }
    }
  }
}
</script>
</amp-analytics>

アウトバウンドリンクトラッキング

AMP ページの各種リンクにアウトバウンドリンクトラッキングを設定するには、目的のリンクにマークを付け、リンクのクリックに反応するようトリガーを設定します。この設定は次の 2 段階の手順で行うことができます。

リンクのクリックをトラッキングするトリガーを設定します。

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "outboundLinks": {
        "on": "click",
        "selector": "a",
        "request": "event",
        "vars": {
          "eventCategory": "outbound",
          "eventAction": "click",
          "eventLabel": "${outboundLink}"
        }
      }
  }
}
</script>
</amp-analytics>

適切なデータを使ってリンクにマークを付けます。

<a href="http://example.com/page" data-vars-outbound-link="http://example.com/page">Some link</a>

AMP と非 AMP のトラフィック

各種の技術的な制約により、AMP トラフィックではウェブトラフィックとは異なるクライアント ID がデフォルトで使用されます。また、AMP ページの方が短時間で読み込み可能で、トラフィックのパターンも異なるため、結果として指標も異なることになります。別のプロパティを使用して AMP トラフィックを測定すると、それぞれの指標を的確に分析して、トラフィックをより高い精度で把握できます。AMP と非 AMP で同じプロパティを使ってトラフィックを測定する場合は、データソースディメンションかカスタムディメンションを使用してそれらを区別します。デフォルトでは、Google アナリティクスはデータソースディメンションで値「AMP」を送信します。この値はデータの分割やフィルタに使用するか、1 つのビューで AMP と非 AMP のコンテンツを分析するために使用できます。カスタムディメンションを設定する場合は、「googleanalytics を拡張する」をご覧ください。また、AMP と非 AMP のトラフィックで同一のクライアント ID を使用してユーザーを識別するには、AMP クライアント ID の統合を参考にしてください。

AMP ページの例

Google アナリティクスでページビューとイベントをトラッキングする AMP ページの例を次に示します。

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMP Analytics</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script async custom-element="amp-analytics"
        src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>

  <amp-analytics type="googleanalytics">
  <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>

  <span id="event-test" class="box">
    Click here to generate an event
  </span>

  </body>
</html>

デバッグ

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

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

カスタマイズ

amp-analytics 拡張に組み込まれている Google アナリティクスサポート機能を利用すると、AMP ページでユーザーインタラクションを簡単に測定できます。ただし、より高度な使い方をするには、Measurement Protocol でサポートされているタイプのヒットと追加フィールドを送信するように独自の設定を作成してください。

カスタマイズの際には次の資料をご覧ください。

amp-analytics 拡張: AMP ドキュメントからアナリティクスデータを収集する方法についての概要。
amp-analytics 変数: amp-analytics でサポートされる変数の一覧。
vendor.js: このファイルには、googleanalytics テンプレートなど、ベンダー様向けの request テンプレートが含まれています。googleanalytics テンプレートは独自の設定を作成する際の参考として役立ちます。
Measurement Protocol の操作とパラメータリファレンス: Measurement Protocol の操作方法についての概要と、Measurement Protocol のパラメータの一覧。

Google アナリティクスでサポートされるユーザー インタラクション

ページ トラッキング

イベント トラッキング

非インタラクション イベント

ソーシャル インタラクション

googleanalytics を拡張する