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

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

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

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 要素を簡単に識別できるように（debugging などの）id 属性を付けておくことをおすすめします。

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

Google アナリティクスの設定でサポートされるトリガーの request 値は以下のとおりです。

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

ページトラッキング

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

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

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

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

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

次の例では、ページビューの title と ampdocUrl のデフォルト値が上書きされます。

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

イベントトラッキング

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

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

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

<amp-analytics type="googleanalytics" id="analytics3">
<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`	`文字列`	はい	通常はインタラクション対象のオブジェクト（例: Video）。
`eventAction`	`文字列`	はい	インタラクションの種類（例: play）。
`eventLabel`	`文字列`	いいえ	イベントの分類に役立ちます（例: Fall Campaign）。
`eventValue`	`文字列`	いいえ	イベントに関連付けられた数値（例: 42）。デフォルト値は 0。

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

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

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

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

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

<amp-analytics type="googleanalytics" id="analytics4">
<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`	`文字列`	はい	操作が発生するネットワーク（Facebook や Twitter など）。
`socialAction`	`文字列`	はい	発生した操作の種類（いいね！、送信、ツイートなど）。
`socialTarget`	`文字列`	はい	ソーシャルインタラクションのターゲットを指定します。通常この値は URL となりますが、それ以外のテキストを入力することも可能です（例: http://mycoolpage.com）。

`googleanalytics` を拡張する

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

たとえば、ページビューと一緒にカスタムディメンションを送信するには、カスタムディメンションパラメータ（またはヒットと一緒に送信したいその他のパラメータ）を使用してページビューの request を拡張します。この変更はアナリティクスプラットフォームへのデータの送信に使用する URL を指定する requests 属性で行えます。

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "requests": {
    "pageviewWithCd1Cd3": "${pageview}&cd1=${cd1}&cd3=${cd3}"
  },
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageviewWithCustom" : {
      "on": "visible",
      "request": "pageviewWithCd1Cd3",
      "vars": {
        "title": "Classic Cars",
        "cd1": "registeredUser",
        "cd3": "automotive"
      }
    }
  }
}
</script>
</amp-analytics>

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 type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>

    <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" 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>

  <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 を拡張する