AMP アナリティクスの詳細

このガイドでは、 amp-analytics コンポーネントについて、amp-analytics の設定例を次に示す主な構成ブロックに分けて詳しく説明します。

以降では、以下の設定例を使用します。この例は、ページビューとリンクのユーザークリックをトラッキングして、サードパーティプロバイダである Google アナリティクスにアナリティクスデータを送信します。

<amp-analytics
  type="googleanalytics"
  config="https://example.com/analytics.account.config.json"
>
  <script type="application/json">
    {
      "requests": {
        "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
        "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
      },
      "vars": {
        "account": "ABC123"
      },
      "extraUrlParams": {
        "cd1": "AMP"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        },
        "trackAnchorClicks": {
          "on": "click",
          "selector": "a",
          "request": "event",
          "vars": {
            "eventId": "42",
            "eventLabel": "clicked on a link"
          }
        }
      },
      "transport": {
        "beacon": false,
        "xhrpost": false,
        "image": true
      }
    }
  </script>
</amp-analytics>

上記のコードは学習用のサンプルであり、そのまま実際の環境で使用することはできません。特に、上記のアナリティクスプロバイダの設定を簡略化している点は、プロバイダを利用しているユーザーにとって問題になるかもしれません。特定の設定例については、ご利用のアナリティクスプロバイダのドキュメントをご確認ください。

アナリティクスデータの送信先: type 属性

AMP は、一般的なデータ収集方法として次の 2 つをサポートするように設計されています。

• サイト運営者所有のエンドポイントによる収集（アナリティクスシステムを社内で運用している場合）
• ベンダー所有のエンドポイントによる収集（Adobe Analytics、Chartbeat、Google アナリティクスなどのベンダーソリューションと相互運用する場合）

アナリティクスデータをアナリティクスプロバイダに送信するには、 amp-analytics タグに type 属性を指定します。 値は、アナリティクスベンダーの一覧に記載されている各ベンダーの値を指定します。

たとえば <amp-analytics type="googleanalytics"> とした場合、アナリティクスデータはサードパーティアナリティクスプロバイダである Google アナリティクスに送信されます。一方、サイト運営者所有のエンドポイントにデータを送信する場合は、type 属性を指定しません。各リクエストのアナリティクスデータは、定義されたエンドポイントに送信されるようになります。

アナリティクスベンダーの設定を行うと、手早く amp-analytics を使い始めることができます。詳細については、ご利用のベンダーのドキュメントやヘルプリソースをご覧ください。AMP を統合済みのベンダーの一覧と、 各ベンダーのドキュメントへのリンクは、 前述のアナリティクスベンダーの一覧をご覧ください。

アナリティクスベンダーの 方は、 自社のアナリティクス設定を AMP HTML に統合する方法についての説明をご覧ください。

リモート設定を読み込む: config 属性

AMP ページに amp-analytics のすべての設定を追加する必要はありません。代わりに、設定のすべてまたは一部を記述したリモート URL を呼び出すことができます。

リモート URL を使用すると、特定のリクエストに応じて設定を変更するといった処理もできるようになります。サイト運営者としてリモートファイルを管理している場合は、設定データの較正に必要なすべてのサーバー側処理を実施できます。

リモート設定を読み込むには、まず amp-analytics タグに config 属性を追加します。

<amp-analytics
  config="https://example.com/analytics.account.config.json"
></amp-analytics>

次に、リモート URL に設置する JSON コンテンツを作成します。この例は簡略化されているため、JSON オブジェクトにはアナリティクスアカウントの変数値しか含まれていません。

サンプルで使用している https://example.com/analytics.account.config.json では、次のようになっています。

{
  "vars": {
    "account": "UA-XXXXX-Y"  // Replace with your property ID.
  }
}

最後に、リモートファイルの内容が amp-analytics 設定の適切な場所に読み込まれるようにします。以下では、pageview リクエストと event リクエストの account 変数の値が、自動駅にリモート URL のアカウント値（"account": "UA-XXXXX-Y"）に設定されます。

"requests": {
  "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
  "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
}

requests、triggers、transport

requests 属性では、送信するデータの種類（pageviews、events など）とデータの送信先（データ転送に使用する URL) を指定します。

triggers 属性では、アナリティクスデータを送信するタイミングを指定します。たとえば、ユーザーがページを表示したときやリンクをクリックしたときなどです。

transport 属性では、リクエストの送信方法、 つまり使用するプロトコルを指定します。

これらの設定の詳細については後述します（あわせて、「amp-analytics リファレンス」の該当する項目をご確認ください）。

送信するデータ: requests 属性

トリガー設定では、request-name を使用して、 特定のイベントの発生時に送信するリクエストを指定します。request-value には、https の URL を指定します。これらの値には、他のリクエストや変数を参照するプレースホルダトークンを含めることができます。

"requests": {
  "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
  "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
}

Google アナリティクスなど一部のアナリティクス プロバイダは 設定を提供しており、type 属性を介してその設定を使用できます。またアナリティクス プロバイダを利用している場合は、requests 情報の設定が不要な場合があります。requests の設定が必要かどうかや、その方法については、ベンダーのドキュメントをご覧ください。

リクエスト URL への追記: extraUrlParams

extraUrlParams 属性では、リクエスト URL のクエリ文字列に追記する追加のパラメータを指定できます。指定したパラメータは、一般的な「&foo=baz」の表記規則に基づいて追記されます。

この amp-analytics の例では、追加パラメータ cd1 を リクエストに追記し、値を「AMP」に設定しています。

  "extraUrlParams": {
    "cd1": "AMP"
  }

データを送信するタイミング: triggers 属性

triggers 属性では、アナリティクス リクエストを送信するタイミングを指定します。この属性は、トリガー名とトリガー設定というキーと値のペアで構成されます。トリガー名には、英数字（a-zA-Z0-9）からなる 任意の文字列を使用できます。

たとえば、 次の amp-analytics 要素では、ドキュメントが最初に読み込まれたときと、 a タグがクリックされるたびに、リクエストを https://example.com/analytics に 送信するよう設定しています。

"triggers": {
  "trackPageview": {
    "on": "visible",
    "request": "pageview"
  },
  "trackAnchorClicks": {
    "on": "click",
    "selector": "a",
    "request": "event",
    "vars": {
      "eventId": "42",
      "eventLabel": "clicked on a link"
    }
  }
}

AMP では次のトリガー設定をサポートしています。

データの送信方法: transport 属性

transport では、リクエストの送信方法を指定します。デフォルトでは、次の 3 つのメソッドが有効化されています。

使用される transport メソッドは 1 つのみで、有効化されている利用可能な許可された、優先順位の最も高いメソッドです。優先順位は beacon > xhrpost > image です。クライアントのユーザーエージェントがあるメソッドをサポートしていない場合、その次に有効化されている優先順位の高いメソッドが使用されます。

転送オプションを制限する場合にのみ、transport 属性を追加します。リクエストを中止することも可能です。

次の例では、beacon と xhrpost が false に設定されているため、これらの優先順位は image よりも高いにもかかわらず、使用されることはありません。クライアントのユーザーエージェントが image メソッドをサポートしている場合はそれが使用されますが、サポートされていない場合はリクエストは送信されません。

'transport': {
  'beacon': false,
  'xhrpost': false,
  'image': true
}

変数置換の順序

AMP は優先順位に従って、変数に値を代入します。

1. リモート設定（config で指定）
2. triggers のトリガー内にネストされた vars
3. amp-analytics の最上位にネストされた vars
4. プラットフォームが提供する値

この例では、最上位に定義された変数、トリガー内、およびプラットフォームレベルに、リモート設定があります。

<amp-analytics config="http://example.com/config.json">
  <script type="application/json">
    {
      "requests": {
        "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(cid-scope)}",
      },
      "vars": {
        "account": "ABC123",
        "title": "Homepage"
      },
      "triggers": {
        "some-event": {
          "on": "visible",
          "request": "pageview",
          "vars": {
            "title": "My homepage",
            "clientId": "my user"
          }
      }
    }
  </script>
</amp-analytics>

同じ var が複数の場所で定義されている場合、その変数の値は、変数の優先順位に沿って一度だけ設定されます。 そのため、上記の例のように、リモート設定で account が UA-XXXXX-Y と定義されている場合、 各変数の値は次のようになります。