amp-pixel または amp-analytics の使用
簡単なアナリティクス構成の作成
- 簡単な amp-pixel 構成
- 簡単な amp-analytics 構成
変数置換
ユーザーの識別

アナリティクス: 基本

このページで AMP アナリティクスの基本を学びましょう。

amp-pixel または amp-analytics の使用

AMP にはアナリティクスや測定に役立つ amp-pixel と amp-analytics という 2 つのコンポーネントがあります。どちらを使用してもアナリティクスのデータは指定したエンドポイントに送信されます。

単純なトラッキングピクセルのような動作を求めているのであれば、amp-pixel コンポーネントには、ページビューデータを定義された URL に送信する、基本的なページビュートラッキングが用意されています。統合するベンダーによっては、このコンポーネントが必要になることがあり、その場合はベンダーが正確なエンドポイント URL を指定します。

ほとんどのアナリティクスソリューションでは、 amp-analytics を使用します。ページビュートラッキングも amp-analytics で動作しますが、リンクやボタンのクリックなど、あらゆるページコンテンツに対するユーザーエンゲージメントもトラッキング可能です。ユーザーがページをどのくらいスクロールしたか、ソーシャルメディアを使用しているかなどもわかります。

詳しくは、AMP アナリティクスについて詳しく知るをご覧ください。

AMP プラットフォームを統合するにあたり、データの取得やトラッキングツールへの転送が簡単に行えるよう、プロバイダはあらかじめ定義した amp-analytics 設定を提示しています。ベンダーのドキュメントは、アナリティクスベンダーリストからアクセスできます。

ページには amp-pixel と amp-analytics を両方使うことも可能です。amp-pixel はシンプルなページビュートラッキング用で、amp-analytics はそれ以外の全機能に対応しています。各タグを複数追加することもできます。アナリティクスプロバイダを複数使っている場合は、ソリューションごとに 1 つのタグが必要です。ユーザーにとって AMP ページはシンプルであるほど良いので、余分なタグは使わないようにしましょう。

簡単なアナリティクス構成の作成

次に、簡単な amp-pixel と amp-analytics 構成の作成方法を説明します。

簡単な amp-pixel 構成

簡単な amp-pixel 構成を作成するには、以下のようなコードを AMP ページの body に挿入します。

<amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>

この例では、ページビューデータは乱数とともに指定の URL に送信されます。RANDOM 変数は、数ある AMP プラットフォームの変数置換の 1 つです。変数置換に関する詳細は、こちらをご覧ください。

amp-pixel は組み込みのコンポーネントであるため、amp-analytics などの AMP 拡張コンポーネントと違って、宣言を追加する必要はありません。ただし amp-pixel タグは、極力 <body> の先頭付近に配置してください。トラッキングピクセルはタグが表示されてからのみ呼び出されるため、amp-pixel がページの下の方に配置されている場合、トラッキングピクセルが呼び出されない可能性があります。

簡単な `amp-analytics` 構成

簡単な amp-analytics 構成を作成するには、まず custom-element 宣言を AMP ドキュメントの <head> 内に含める必要があります（コンポーネントの包含宣言もご覧ください）。

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

以下の例は amp-pixel と似ています。ページが表示されるたびにイベントの発行がトリガされ、ページビューデータがランダム ID とともに指定の URL に送信されます。

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "pageview": "https://foo.com/pixel?RANDOM"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        }
      }
    }
  </script>
</amp-analytics>

上の例では、pageview というリクエストを https://foo.com/pixel?RANDOM と定義しています。上記で説明したとおり、RANDOM は乱数に置換されるため、最終的なリクエストは https://foo.com/pixel?0.23479283687235653498734 のようになります。

（トリガーキーワード visible を使って指定したとおり）ページが表示されると、イベントが発生して pageview リクエストが送信されます。ページビューリクエストが送信されるタイミングは、トリガー属性で定義します。詳しくは、リクエストとトリガーをご覧ください。

変数置換

amp-pixel と amp-analytics の両方のコンポーネントでは、すべての標準的な URL 変数置換を利用できます（AMP HTML 変数の置換を参照してください）。以下の例では、ページビューリクエストは、現在の AMP ドキュメントの正規 URL、そのタイトル、およびクライアント ID とともに URL に送信されます。

<amp-pixel
  src="https://example.com/analytics?url=${canonicalUrl}&title=${title}&clientId=${clientId(site-user-id)}"
></amp-pixel>

その単純な構造により、amp-pixel タグは、プラットフォームによって定義される変数か、AMP ランタイムが AMP ページからパースできる変数のみしか含むことができません。上記の例では、プラットフォームが canonicalURL と clientId(site-user-id) の両方に対する値を入力しています。amp-analytics タグは、amp-pixel と同じ変数のほか、タグ構成内に一意に定義された変数も含めることができます。

ページまたはプラットフォーム定義の変数をリクエストする文字列には、${varName} 形式を使用します。amp-analytics タグは、アナリティクスリクエストの作成時に、テンプレートを実際の値に置換します（amp-analytics でサポートされている変数も参照してください）。

次の amp-analytics の例では、ページビューリクエストは、amp-analytics 構成内の、変数置換から抽出された追加データ、プラットフォームが提供するデータ、インラインで定義されるデータとともに URL に送信されます。

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(site-user-id)}"
      },
      "vars": {
        "account": "ABC123"
      },
      "triggers": {
        "someEvent": {
          "on": "visible",
          "request": "pageview",
          "vars": {
            "title": "My homepage"
          }
        }
      }
    }
  </script>
</amp-analytics>

上記の例では、変数、account および