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

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

<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 のパラメータの一覧。