去年2015年10月のAMP発表当時はGoogle Analyticsでのトラッキングのために
amp-pixel
を使う必要がありましたが、
amp-analytics
コンポーネントの導入によって簡単にトラッキングコードを作成することができるようになりました。2016年10月にはGoogle Tag ManagerでもAMPがサポートされるようになり、ますますAMPの環境が整ってきたという印象です。ということでここではGoogle Analyticsの基本から
amp-analytics
の説明、ページビューのトラッキング、クリックイベントのトラッキング、スクロール量の計測を行うためのコードを紹介します。
Table of Contents
まずは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スクリプトを読み込みます;
その上で、body要素内にamp-analytics要素を入れます;
ここでは
amp-analytics
要素のtype属性に”googleanalytics”を指定していますが、他のベンダーを利用する場合にはしかるべき値を指定します。Adobe Analyticsの場合なら”adobeanalytics”です。サポートしているベンダーの一覧は
AMP Projectのamp-analyticsページ を参照してください。この記事ではGoogle Analyticsに限定します。
script要素内での…にはJSON形式でどのようなトラッキングを行うのかを書きます。JSONの基本的な形は以下のようになります;
script要素内に直接JSONを書くこともできますが、
amp-analytics
コンポーネントのconfig属性にURLを渡すことで、JSONを外部から読み込むことも可能です。Google Tag ManagerでAMPページのトラッキングを設定すると
のようなコードをbodyタグの先頭に貼り付けることになりますが、これがまさにその場合です。
varsプロパティ
では各プロパティについて詳しく見ていきます。まずはvarsプロパティです。
amp-analytics
ではリクエストのための変数を定義することができます。
amp-analytics
のtype属性で”googleanalytics”を指定している場合は
デフォルト で
が定義されています。これらに加えて変数を定義したい場合は
<script type="application/json">...</script>
の中に追加していきます。
最低限定義しないといけないのはaccount
です 。
account
プロパティにはAnalyticsのプロパティIDを指定します;
こうしてvarsプロパティ内で定義した変数は、以下で説明するrequests
プロパティ内のrequest-value
で${var-name}
の形で使用することができます 。
account
もデフォルトで定義されている
basePrefix
の
reqeust-value
内で使用されています。
requestsプロパティ
requests
プロパティは通常のトラッキングでは特に指定することはないと思います。
amp-analytics
のtype属性で”googleanalytics”を指定している場合はデフォルトで
が設定されているからです。ここで先ほど定義した
account
が
basePrefix
内で使用されているのが分かります。書式としては
になっており、
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
プロパティでは
いつリクエストを送信するのか を指定します。デフォルトでは
が設定されています。書式としては
になっており、トリガー名とその設定をkey-valueペアとして並べていきます。もっとも簡単なページビューでは
となります。
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プロパティ
書式は
です。
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プロパティは
となります。つまりAdwardsのコンバージョン測定をAMPで行う場合には
beacon
や
xhrpost
ではなく、
image
でリクエストが送信されることになります。
ページビューのトラッキング
長々と説明してきましたが、ようやく実践的なトラッキングコードを見ていきます。まずはページビューです。
今まで説明してきた中で出てきたように、
vars
の
account
は必須です。ここでGoogle AnalyticsのプロパティIDを指定します。
triggers
では
trackPageview
という名前のトリガーを設定しています。この名前は自由につけれます。トリガーの種類は
visible
で
request
は
pageview
です。これでページビューがあったときにGoogle Analyticsにデータが送信されます。
Analyticsで見たときに「タイトル」として表示されるのは、デフォルトではtitle要素で指定した文字列ですが、これを
vars
を使って変更することができます。例えば
のようにすると、Google Analyticsで見たときに「My Page」がタイトルとして表示されるようになります。
クリックイベントのトラッキング
ついでクリックイベントのトラッキングです。
ここでは
elementClicks
という名前のトリガーを追加しました。トリガーとなるイベントには
"on": "click"
でクリックイベントを指定します。
selector
の値を
.tracking-click
にしているので、
tracking-click
というクラスをもった要素すべてがクリックイベントのトラッキング対象となります。イベントトラッキングなので
request
は
event
です。
あらかじめ定義されている
event
リクエストの内容を見ると
となっている通り、
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}
という変数の場合、
のように
data-vars-*
という形でdata属性値を指定しておくことで、
amp-analytics
側で
hoge
という値を
${clickId}
で拾うことができます。
amp-analytics
側ではキャメルケース(ハイフンをなくしてハイフンの次の文字を大文字にする)に従うことに注意してください。この要素がクリックされると、Google AnalyticsのイベントでeventActionが”hoge-click”として集計されることになります。要素毎に異なる
data-vars-click-id
属性を指定しておくことで、ページ内の
tracking-click
クラスをもった要素の中でどれがクリックされたのかをeventActionの値から知ることができるようになります。ただし
data-vars-*
で指定する値はURLエンコードされて送信されるため、日本語だと読めなくなって不便なので注意が必要です。
ページ内のスクロール量の計測
最後にページ内のスクロール量の計測です。ランディングページなどではユーザーがどこまでスクロールしてどの辺りで離脱しているのかを知ることができるので有用だと思います。
scrollPings
という名前でトリガーを定義しています。今回はスクロールされたらリクエストを送信したいので、
"on": "scroll"
を指定します。
scrollSpec
はtriggersプロパティの説明で少し触れましたが、リクエストを送る際に条件を指定するためのもので
"on": "scroll"
では必須プロパティです。
scrollSpec
では
verticalBoundaries
と
horizontalBoundaries
を指定することができます。2つのうち最低1つは指定しておかないとスクロールイベントが発火しません。値は配列で、イベントが発火する境界をカンマ区切りの数値で指定します。
の場合だと、ページが縦に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
に慣れ親しんでおくといいと思います。
参考ページ