AMP

AMP アナリティクスの詳細

Important: this documentation is not applicable to your currently selected format stories!

このガイドでは、 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 AnalyticsChartbeatGoogle アナリティクスなどのベンダーソリューションと相互運用する場合)

アナリティクスデータをアナリティクスプロバイダに送信するには、 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}"
}

重要 – AMP では、同じ変数が複数使用されていないかどうかの検証は行われません。値は、変数置換の優先順位に基づいて設定され、リモート URL の値が最優先されます(「変数置換の順序」をご覧ください)。

requests、triggers、transport

requests 属性では、送信するデータの種類(pageviewsevents など)とデータの送信先(データ転送に使用する 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 ページについてのみ推奨され、AMPHTML 広告には推奨されません。アナリティクスの優先度はページのコンテンツよりも低いため、クリックのトラッキングには、クリックのロスを回避できるブラウザリダイレクトを使用することをお勧めします。

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

トリガー設定 説明
on(必須) リスンするイベントです。指定できる値は、clickscrolltimervisible です。
request(必須) 送信するリクエストの名前です(requests で指定した名前)。
vars キーと値のペアを含むオブジェクトで、最上位の設定で指定された vars をオーバーライドするため、またはこのトリガーに固有の vars を指定するために使用します(変数置換の順序についての説明もご覧ください)。
selectoronclick に設定されている場合は必須) トラッキングする要素を絞り込む CSS セレクタです。すべての要素をトラッキングする場合は、値を * に設定します。この設定は、click トリガーと組み合わせて使用します。セレクタを使用してページクリックをトラッキングする方法ソーシャル インタラクションをトラッキングする方法についてご確認ください。
scrollSpeconscroll に設定されている場合は必須) どのような状況でページがスクロールされた場合に scroll イベントを発生させるかを管理します。このオブジェクトには、verticalBoundarieshorizontalBoundaries を含めることができます。scroll イベントを発生させるには、この 2 つのプロパティのうち少なくとも 1 つが必要です。両プロパティの値は、スクロールイベントが発生する境界を囲む数値の配列にする必要があります。スクロールをトラッキングする方法の例をご確認ください。
timerSpecontimer に設定されている場合は必須) timer イベントを発生させるタイミングを管理します。タイマーは、イベント発生時と、それ以降の指定の間隔でトリガーされます。この設定は、timer トリガーと組み合わせて使用します。

重要 – 同じ名前のトリガーがある場合、優先順位の高い設定のトリガーが優先順位の低いトリガーより優先されるため、低い方がオーバーライドされます(「変数置換の順序」をご覧ください)。

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

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

転送方法 説明
beacon リクエストの送信に navigator.sendBeacon が使用できることを示します。この方法では、POST リクエストが認証情報および空のボディとともに送信されます。
xhrpost リクエストの送信に XMLHttpRequest が使用できることを示します。この方法では、POST リクエストが認証情報および空のボディとともに送信されます。
image Image タグを生成することでリクエストを送信できることを示します。この方法では、GET リクエストが送信されます。

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

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

次の例では、beaconxhrpost が 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 と定義されている場合、 各変数の値は次のようになります。

var 定義場所
canonicalUrl http://example.com/path/to/the/page プラットフォーム
title My homepage トリガー
account UA-XXXXX-Y リモート設定
clientId my user トリガー