amp-analyticsの基本からクリックイベント・スクロール量の計測を行うサンプルコードまで – AMP HTML入門

2021年04月06日05:03更新 2016年11月25日16:23公開

去年2015年10月のAMP発表当時はGoogle Analyticsでのトラッキングのためにamp-pixelを使う必要がありましたが、amp-analyticsコンポーネントの導入によって簡単にトラッキングコードを作成することができるようになりました。2016年10月にはGoogle Tag ManagerでもAMPがサポートされるようになり、ますますAMPの環境が整ってきたという印象です。ということでここではGoogle Analyticsの基本からamp-analyticsの説明、ページビューのトラッキング、クリックイベントのトラッキング、スクロール量の計測を行うためのコードを紹介します。

1 まずはGoogle Analyticsの基本の基本を押さえる
2 amp-analytics の基本
3 ページビューのトラッキング
4 クリックイベントのトラッキング
5 ページ内のスクロール量の計測
6 最後に
7 参考ページ

まずはGoogle Analyticsの基本の基本を押さえる

Google AnalyticsではMeasurement Protocolを使用してユーザーインタラクションデータを送信します。エンドポイント

https://www.google-analytics.com/collect

にGETリクエストかPOSTリクエストを送ることによってGoogleのサーバにデータが蓄積されていきます。このときのプロトコルはHTTPSでなければいけません。例えばページビューがあったということをGoogle Analyticsに伝えるためには、上記のエンドポイントに

https://www.google-analytics.com/collect?t=pageview&...

のようにパラメータを追加してリクエストを送信します。t=pageviewの部分でヒットの種類をpageviewに指定しています。ヒットの種類はpageview以外にもscreenview（スクリーンビュー）、 event（イベント）、 transaction（トランザクション）、 item（商品）、social（ソーシャル）、exception（例外）、timing（タイミング）があります。パラメータは他にもたくさんあって、AnalyticsのプロパティIDもそのうちの一つです。Google Tag Managerでタグやらトリガーやらを設定したりしますが、それはこのリクエストパラメータを指定していることに他なりません。最低限このことだけは知っておきましょう。

その他のパラメータについて詳しく知りたい場合はGoogle DevelopersのMeasurement Protocol のパラメータリファレンスを参照してください。

`amp-analytics` の基本

amp-analytics コンポーネントを使用するためには head 要素内で amp-analytics スクリプトを読み込みます;

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

その上で、body 要素内に amp-analytics 要素を入れます:

<body>
    ...
    <amp-analytics type="googleanalytics" id="amp_analytics">
    <script type="application/json">
      ...
    </script>
    </amp-analytics>
    ...

ここでは amp-analytics 要素の type 属性に "googleanalytics" を指定していますが、他のベンダーを利用する場合にはしかるべき値を指定します。Adobe Analytics の場合なら "adobeanalytics" です。サポートしているベンダーの一覧は AMP Project のamp-analytics ページを参照してください。この記事では Google Analytics に限定します。

script 要素内での…には JSON 形式でどのようなトラッキングを行うのかを書きます。JSONの基本的な形は以下のようになります:

{
    "vars": {
        var-name: var-value,
        ...
    },
    "requests": {
        request-name: request-value,
        ...
    },
    "triggers": {
        trigger-name: trigger-object,
        ...
    },
    "transport": {
        "beacon": *boolean*,
        "xhrpost": *boolean*,
        "image": *boolean*
    }
}

script 要素内に直接 JSON を書くこともできますが、amp-analytics コンポーネントの config 属性に URL を渡すことで、JSON を外部から読み込むことも可能です。Google Tag Manager で AMP ページのトラッキングを設定すると

<!-- Google Tag Manager -->
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-TLPGVLC&gtm.url=SOURCE_URL" data-credentials="include"></amp-analytics>

のようなコードを body タグの先頭に貼り付けることになりますが、これがまさにその場合です。

`vars` プロパティ

では各プロパティについて詳しく見ていきます。まずは vars プロパティです。amp-analyticsではリクエストのための変数を定義することができます。amp-analytics の type 属性で "googleanalytics" を指定している場合はデフォルトで

'vars': {
    'eventValue': '0',
    'documentLocation': 'SOURCE_URL',
    'clientId': 'CLIENT_ID(AMP_ECID_GOOGLE)',
    'dataSource': 'AMP',
},

が定義されています。これらに加えて変数を定義したい場合は <script type="application/json">...</script> の中に追加していきます。最低限定義しないといけないのは account です。account プロパティには Analytics のプロパティ ID を指定します:

"vars": {
    "account": "UA-XXXX-Y"
}

こうして vars プロパティ内で定義した変数は、以下で説明する requests プロパティ内の request-value で ${var-name} の形で使用することができます。account もデフォルトで定義されている basePrefix の reqeust-value 内で使用されています。

`requests` プロパティ

requests プロパティは通常のトラッキングでは特に指定することはないと思います。 amp-analytics の type 属性で "googleanalytics" を指定している場合はデフォルトで

'requests': {
  'host': 'https://www.google-analytics.com',
  'basePrefix': 'v=1&' +
        '_v=a1&' +
        'ds=${dataSource}&' +
        'aip=true&' +
        '_s=${requestCount}&' +
        'dt=${title}&' +
        'sr=${screenWidth}x${screenHeight}&' +
        '_utmht=${timestamp}&' +
        'cid=${clientId}&' +
        'tid=${account}&' +
        'dl=${documentLocation}&' +
        'dr=${documentReferrer}&' +
        'sd=${screenColorDepth}&' +
        'ul=${browserLanguage}&' +
        'de=${documentCharset}',
  'baseSuffix': '&a=${pageViewId}&' +
        'z=${random}',
  'pageview': '${host}/r/collect?${basePrefix}&' +
        't=pageview&' +
        'jid=${random}&' +
        '_r=1' +
        '${baseSuffix}',
  'event': '${host}/collect?${basePrefix}&' +
        't=event&' +
        'jid=&' +
        'ec=${eventCategory}&' +
        'ea=${eventAction}&' +
        'el=${eventLabel}&' +
        'ev=${eventValue}' +
        '${baseSuffix}',
  'social': '${host}/collect?${basePrefix}&' +
        't=social&' +
        'jid=&' +
        'sa=${socialAction}&' +
        'sn=${socialNetwork}&' +
        'st=${socialTarget}' +
        '${baseSuffix}',
  'timing': '${host}/collect?${basePrefix}&' +
        't=timing&' +
        'jid=&' +
        'plt=${pageLoadTime}&' +
        'dns=${domainLookupTime}&' +
        'tcp=${tcpConnectTime}&' +
        'rrt=${redirectTime}&' +
        'srt=${serverResponseTime}&' +
        'pdt=${pageDownloadTime}&' +
        'clt=${contentLoadTime}&' +
        'dit=${domInteractiveTime}' +
        '${baseSuffix}',
},

が設定されているからです。ここで先ほど定義した account が basePrefix 内で使用されているのが分かります。書式としては

"requests": {
    request-name: request-value,
    ...
}

になっており、 request-name には trigger プロパティで指定する際のリクエスト名を、request-value には HTTPS の URL を指定します。request-value は一番最初に説明した Measurement Protocol のエンドポイント＋パラメータになります。例えば pageview というリクエストの場合の request-value は

'${host}/r/collect?${basePrefix}&' + 't=pageview&' + ...

です。この中で ${host} には https://www.google-analytics.com という文字列が展開され、${basePrefix} には 'v=1&' + '_v=a1&' + 'ds=${dataSource}&' ... という文字列が展開され、その中の ${dataSource} には AMP という文字列が展開される（上記の vars のデフォルトとして設定されている）ため、最終的に pageview というリクエストは

https://www.google-analytics.com/collect?v=1&_v=a1&ds=AMP&...&t=pageview&...

にリクエストを送信しますよ、という内容になっています。リクエスト名とリクエスト先の URL を key-value ペアにしたものが requests プロパティです。

デフォルトの設定を見てわかる通り、amp-analytics でのリクエストは今のところ

ページトラッキング用のリクエスト pageview
イベントトラッキング用のリクエスト event
ソーシャルトラッキング用のリクエスト social
タイミングトラッキング用のリクエスト timing

があらかじめ用意されています。あとはこれらに対してトリガーを設定してやるとトリガーイベント発生時にリクエストを送信することができます。

デフォルトに無いプロパティを設定したい場合は <script type="application/json">...</script> の中に追加していきます。通常のトラッキングであれば pageview, event, social, timing で足りるのかなと思います。

`triggers` プロパティ

triggers プロパティでは いつリクエストを送信するのか を指定します。デフォルトでは

'triggers': {
  'performanceTiming': {
    'on': 'visible',
    'request': 'timing',
    'sampleSpec': {
      'sampleOn': '${clientId}',
      'threshold': 1,
    },
  },
}

が設定されています。書式としては

"triggers": {
  trigger-name: trigger-object,
  ...
}

になっており、トリガー名とその設定をkey-valueペアとして並べていきます。もっとも簡単なページビューでは

"triggers": {
    "trackPageview": {
        "on": "visible",
        "request": "pageview"
    }
}

となります。visible イベントが発生する（ページが読み込まれる）と pageview リクエストを送信する、つまり先ほど書いた

https://www.google-analytics.com/collect?v=1&_v=a1&ds=AMP&...&t=pageview&...

に対してリクエストを飛ばすことになります。

trigger-object で指定する key-value ペアは以下の通りです:

key	value
`on`	必須。どのイベントに対して発火させるかを指定します。可能な値は `click`、`scroll`、`timer`、`visible`、`hidden` です。
`request`	必須。イベント発火時にどのリクエストを送信するかを `request-name` で指定します。reqeusts内で定義されている必要があります。
`vars`	トップレベルのvarsを上書きする場合、もしくはトリガー固有の変数を指定する場合にkey-valueペアで指定します。
`selector`	`"on":"click"` で必須。CSSセレクターを指定することで、特定の要素がクリックされたときのみリクエストを送信することができます。複数のセレクターは","で繋げることができます。
`scrollSpec`	`"on": "scroll"` で必須。`scroll` トリガーの条件を指定することができます。詳しくはスクロール量の計測で説明します。
`timerSpec`	`"on": "timer"` で必須。`timer` トリガーの条件を指定することができます。
`sampleSpec`	リクエストを送信する前にサンプルを選別することができます。例えばすべてのサンプルのうち半数だけカウントする、といったことをする場合に指定します。

`transport` プロパティ

書式は

"transport": {
    "beacon": *boolean*,
    "xhrpost": *boolean*,
    "image": *boolean*
}

です。beacon は navigator.sendBeacon で空ボディの POST リクエストをクレデンシャル付きで送る場合、xhrpost は XMLHttpRequest で空ボディの POST リクエストをクレデンシャル付きで送る場合、image は Image タグを生成して GET リクエストを送信する場合にtrueにします。true が2つ以上指定された場合は beacon > xhrpost > image の順で適用されます。デフォルトではすべて true となっています。

Google Analytics の場合ではこのプロパティはデフォルトでは未指定なので、beacon でリクエストが送られます。

amp-analytics で type=googleconversion を指定すると、transport プロパティは

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

となります。つまり Adwards のコンバージョン測定を AMP で行う場合には beacon や xhrpost ではなく、image でリクエストが送信されることになります。

ページビューのトラッキング

長々と説明してきましたが、ようやく実践的なトラッキングコードを見ていきます。まずはページビューです。

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

今まで説明してきた中で出てきたように、vars の account は必須です。ここで Google Analytics のプロパティ ID を指定します。triggers では trackPageview という名前のトリガーを設定しています。この名前は自由につけれます。トリガーの種類は visible で request は pageview です。これでページビューがあったときに Google Analytics にデータが送信されます。

Analytics で見たときに「タイトル」として表示されるのは、デフォルトでは title 要素で指定した文字列ですが、これを vars を使って変更することができます。例えば

{
    "vars": {
        "account": "UA-50210815-10"
    },
    "triggers": {
        "trackPageview": {
            "on": "visible",
            "request": "pageview",
            "vars": {
                "title": "My page",
                "ampdocUrl": "https://example.com/amp.html"
            }
        }
    }
}

のようにすると、Google Analyticsで見たときに「My Page」がタイトルとして表示されるようになります。

クリックイベントのトラッキング

ついでクリックイベントのトラッキングです。

<amp-analytics type=googleanalytics id=google_analytics>
<script type=application/json>
{
    "vars": {
        "account": "UA-50210815-10"
    },
    "triggers": {
        "trackPageview": {
            "on": "visible",
            "request": "pageview"
        },
        "elementClicks": {
            "on": "click",
            "selector": ".tracking-click",
            "request": "event",
            "vars": {
                "eventCategory": "elementClick",
                "eventAction": "${clickId}-click",
                "eventLabel": "${title}",
                "eventValue": "${totalEngagedTime}"
            }
        }
    }
}
</script>
</amp-analytics>

ここでは elementClicksという名前のトリガーを追加しました。トリガーとなるイベントには "on": "click" でクリックイベントを指定します。selector の値を .tracking-click にしているので、tracking-click というクラスをもった要素すべてがクリックイベントのトラッキング対象となります。イベントトラッキングなので request は event です。

あらかじめ定義されている event リクエストの内容を見ると

{
    'event': '${host}/collect?${basePrefix}&' +
          't=event&' +
          'jid=&' +
          'ec=${eventCategory}&' +
          'ea=${eventAction}&' +
          'el=${eventLabel}&' +
          'ev=${eventValue}' +
          '${baseSuffix}',
}

となっている通り、eventCategory、eventAction、eventLabel、eventValue 変数を設定する必要があります。それぞれ

値	説明
`eventCategory`	文字列で必須。通常は "Video" や "ui-components" のようにインタラクション対象のオブジェクト名にしますが、ここでは `elementClick` にしています。
`eventAction`	文字列で必須。"play" や "header-click" のようなインタラクションの種類。ここでは `${clickId}-click` としています。`clickId` については後ほど説明します。
`eventLabel`	文字列。"Fall Campaign" のように、イベントの分類のために指定します。ここでは`${title}`にして要素がクリックされたページのタイトルを入れています。
`eventValue`	文字列。イベントに関連づけられた数値でデフォルト値は `0` です。ここでは `${totalEngagedTime}` にしています。これも後ほど説明します。

のように設定します。

ここで出てきた ${title} や ${totalEngagedTime} ですが、これらは AMP であらかじめ定義されている変数で、amp-pixel、amp-list、amp-analytics で ${variable-name} として使用することができます。${title} にはその名の通り、ページのタイトルが代入されます。${totalEngagedTime} は、ファーストビューが表示されてからユーザーがエンゲージするまでの時間が秒を単位とした数字として代入されます。AMP ではこの他にも多数の変数が定義されていて、amp-analytics で ${var-name} として使用することができます。変数の一覧は AMP HTML URL Variable Substitutions にあるので目を通しておくと色々できて便利です。

また eventAction で指定した ${clickId}-click ですが、これは amp-analytics特有の変数代入を使っています。visible イベントと click イベントに関しては、HTML 内の data 属性から変数を渡してやることができるというものです。例えば上記の ${clickId} という変数の場合、

<a href="..." class="tracking-click" data-vars-click-id="hoge">トラッキングリンク</a>

のように data-vars-* という形で data 属性値を指定しておくことで、amp-analytics 側で hoge という値を ${clickId} で拾うことができます。amp-analytics 側ではキャメルケース（ハイフンをなくしてハイフンの次の文字を大文字にする）に従うことに注意してください。この要素がクリックされると、Google Analytics のイベントで eventAction が "hoge-click" として集計されることになります。要素毎に異なる data-vars-click-id 属性を指定しておくことで、ページ内の tracking-click クラスをもった要素の中でどれがクリックされたのかを eventAction の値から知ることができるようになります。ただし data-vars-* で指定する値は URL エンコードされて送信されるため、日本語だと読めなくなって不便なので注意が必要です。

ページ内のスクロール量の計測

最後にページ内のスクロール量の計測です。ランディングページなどではユーザーがどこまでスクロールしてどの辺りで離脱しているのかを知ることができるので有用だと思います。

<amp-analytics type=googleanalytics id=google_analytics>
<script type=application/json>
{
    "vars": {
        "account": "UA-50210815-10"
    },
    "triggers": {
        "trackPageview": {
            "on": "visible",
            "request": "pageview"
        },
        "elementClicks": {
            "on": "click",
            "selector": ".tracking-click",
            "request": "event",
            "vars": {
                "eventCategory": "elementClick",
                "eventAction": "${clickId}-click",
                "eventLabel": "${title}",
                "eventValue": "${totalEngagedTime}"
            }
        },
        "scrollPings": {
            "on": "scroll",
            "scrollSpec": {
                "verticalBoundaries": [0,10,20,30,40,50,60,70,80,90,100]
            },
            "request": "event",
            "vars": {
                "eventCategory": "Scroll Depth",
                "eventAction": "scroll",
                "eventLabel": "${verticalScrollBoundary}%",
                "eventValue": "${verticalScrollBoundary}"
            }
        }
    }
}
</script>
</amp-analytics>

scrollPings という名前でトリガーを定義しています。今回はスクロールされたらリクエストを送信したいので、"on": "scroll" を指定します。scrollSpec は triggers プロパティの説明で少し触れましたが、リクエストを送る際に条件を指定するためのもので "on": "scroll" では必須プロパティです。scrollSpec では verticalBoundaries と horizontalBoundaries を指定することができます。2つのうち最低1つは指定しておかないとスクロールイベントが発火しません。値は配列で、イベントが発火する境界をカンマ区切りの数値で指定します。

"scrollSpec": {
    "verticalBoundaries": [0,10,20,30,40,50,60,70,80,90,100]
}

の場合だと、ページが縦に 0%, 10%, …, 100% スクロールされた段階でリクエストが送信されます。配列内の数字は0から100までを指定できますが、パフォーンス低下を防ぐために5の倍数で丸められます。

request では event を指定してイベントタイプのリクエストを送信します。vars ではクリックイベントのトラッキングと同様、eventCategory 等を設定します。eventLabel とeventValueで使われている verticalScrollBoundary 変数ですが、これも AMP であらかじめ定義されている変数です。これで eventLabel に "10%" や "20%" といったスクロール量のラベルをつけることができます。

最後に

amp-analytics の自体は JSON で指定するプロパティの意味が分かってしまえば大したことありません。Google Tag Manager で AMP ページの設定をする場合でも、あれこれ設定した結果吐き出されるのはここで説明した JSON です。その JSON ファイルを amp-analytics の config 属性で指定することになります。ということで Google Tag Manager で AMP ページのトラッキング設定をするための予備知識としても、amp-analytics に慣れ親しんでおくといいと思います。

amp-analyticsの基本からクリックイベント・スクロール量の計測を行うサンプルコードまで – AMP HTML入門

まずはGoogle Analyticsの基本の基本を押さえる

amp-analytics の基本

vars プロパティ

requests プロパティ

triggers プロパティ

transport プロパティ