AMPにトラッキングイベントを仕込んでみた
2017年 02月 27日
こんにちは。
ニュースチームの加藤です。
本日は、AMPのGA設定でイベントトラッキングの取得方法を紹介します。ざっくりと様々なAMP対応媒体を見たのですが、ビューは取得しているけど、イベントまでは取得していないなという印象がありました。(※個人の主観です。)
イベントまで取得できれば、UIの選定やユーザーの動向調査など様々なことに生かせると思います。
web面とは違い、AMPでは少し変わった記述でAMPのGAの設定を行います。
参考となる公式のドキュメントは、こちらです。
①amp-analyticsの基本について
基本形式は、以下の通りです。◆head内
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
◆body内
...(省略)...
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
...
</script>
</amp-analytics>
...(省略)...
amp-analytics要素を識別できるように、id属性をつけたほうが良いです。ここでいう
id="analytics1"の部分です。
script要素内に以下のようなJSON形式で、トラッキング内容を記述します。
<script type="application/json">
{
"vars": {
var-name: var-value,
...
},
"triggers": {
trigger-name: trigger-object,
...
}
}
<script>
ここで、script要素内にあるタグの説明をしていきます。
◆varsプロパティ
varsプロパティは、amp-analyticsのtype属性で”googleanalytics”を指定している場合は、デフォルトで以下が定義されてます。'vars': {
'eventValue': '0',
'documentLocation': 'SOURCE_URL',
'clientId': 'CLIENT_ID(AMP_ECID_GOOGLE)',
'dataSource': 'AMP',
},
追加で変数定義する場合は、このscript要素内のvarsプロパティ内に書いていきます。だいたい以下の様に、AnalyticsのプロパティIDが指定されていればOKです。
"vars": {
"account": "UA-XXXXXXXX-YY"
}
◆triggersプロパティ
いつリクエストを送信するのかを指定するプロパティになります。他媒体でも以下の様な設定まではしてあるという印象でした。
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
◆reqestsプロパティ
基本的に意識する必要はなさそうです。amp-analyticsのtype属性でgoogleanalyticsを指定している場合は、以下の様な感じでデフォルト設定されています。
'requests': {
'host': 'https://www.google-analytics.com',
'basePrefix': 'v=1&' +
'_v=a1&' +
'ds=${dataSource}&' +
'aip=true&' +
...(省略)...
'baseSuffix': '&a=${pageViewId}&' +
'z=${random}',
'pageview': '${host}/r/collect?${basePrefix}&' +
't=pageview&' +
'jid=${random}&' +
...(省略)...
'event': '${host}/collect?${basePrefix}&' +
't=event&' +
...(省略)...
'social': '${host}/collect?${basePrefix}&' +
't=social&' +
...(省略)...
'timing': '${host}/collect?${basePrefix}&' +
't=timing&' +
...(省略)...
},
②ページビューのトラッキングについて
多くの媒体でも対応しているページビューのトラッキングの設定についてです。<script type="application/json">
{
"vars": {
"account": "UA-XXXXXXXX-YY"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}</script>
varsのaccountの指定は必須項目になります。trackPageviewの名称は、自由に設定しても大丈夫です。
これでページビューがある場合、GoogleAnalyticsに送信されるようになります。
"trackPageview": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "My Page Title”, //ページのタイトル
"ampdocUrl": "http://hogehoge.com/id=????” //ページのURL
}
}
varsの下に、titleとampdocUrlを付与します。
titleはページのタイトル(デフォルトではtitle)、ampdocUrlはトラッキングページのURL(デフォルトはampdocUrl)を指定しています。こちらの指定は、任意になります。なにも指定していない場合は、デフォルトの値になります。
③イベントのトラッキング
いよいよイベントのトラッキングです。以下が、トラッキング付与時のベースとなります。
"triggers": {
"elementClicks": {
"on": "click",
"selector": ".clickevent",
"request": "event",
"vars": {
"eventCategory": "elementClick",
"eventAction": "${clickId}-click",
"eventLabel": "${title}",
"eventValue": "${totalEngagedTime}"
}
}
}
イベントを送信するためには、イベントに、”on”:”click”を指定してクリックイベントを設定します。また、selectorの値を”.clickevent"にしているので、clickeventというクラスをもった要素すべてがクリックイベントのトラッキング対象になります。
requestの値をeventに設定すると送信できます。
varsの項目は、eventCategory、eventAction、eventLabelやeventValueなどがあります。こちらvarsの設定に関してまとめた図は、以下になります。
値 | 型 | 必須 | 説明 |
---|---|---|---|
eventCategory | 文字列 | はい | 通常は、インタラクション対象のオブジェクト(例:Video/ui-components) |
eventAction | 文字列 | はい | インタラクションの種類(例:play/head-click) |
eventLabel | 文字列 | いいえ | イベントの分類のため(例:Fall Campaign) |
eventValue | 文字列 | いいえ | イベントに関連付けられた数値(例:42)デフォルトは0 |
上記にある${title}や${totalEngagedTime}などは、あらかじめAMPで定義されている変数です。変数の一覧はこちらになります。 また、amp-analytics特有の変数代入もあります。これに関した変数の一覧はこちらです。
eventActionで指定した${clickId}-clickに注目すると、この${clickId}はHTML属性のdata属性から変数を渡せるというものになっている。HTML側で以下のように設定してあげる感じになります。
<a href=“http://hogehoge.com” class=“clickevent” data-vars-click-id=“hoge”>トラッキング</a>
data-vars-*という形でdata属性を指定しておくことで、amp-analytics側でhogeという値を${clickId}で拾うことができます。キャメルケースなので、ハイフンなくして大文字にすることに注意してください。また、classにselectorで指定した値をいれないとイベントが取得できない可能性がありますので、合わせて注意してください。
この要素がクリックされると、hoge-clickがイベントとして送信されるようになります。
④ページ内にスクロールの設定について
ページ内スクロール量の計測も可能です。"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}"
}
}
scrollPingsという名前でトリガーに定義しておきます。これは任意の名前です。“on”:”scroll”を指定します。“scrollSpec”では、verticalBoundariesとhorizontalBoundariesのどちらかを指定しないといけないです。今回は、verticalBoundariesを設定し、イベントが発火する境界をカンマ区切りの数値で指定する。 上記の場合だと、ページの0%/10%…100%スクロールされた時点でリクエストが送信されるようになります。
ここで注意ですが、単純にページ内スクロールの設定を入れてしまうと、GAの設定の直帰率などがおかしくなってしまうことがあります。
それを防ぐためには、以下の設定が必要です。
"extraUrlParams": {
"ni": 1
},
また、クリックイベントと同様のid内にスクロールイベントを仕込むのもおすすめできません。こちらも注意してください。amp-analyticsタグの中でこれを1度定義すると、全てのイベントに「nonInteraction: 1」が設定されることになるみたいです。なので、ページスクロールイベントだけ、amp-analyticsタグをもう1つ設定して「nonInteraction: 1」がつかないトリガーを登録する必要がありそうです。
上記①〜④の設定を踏まえたサンプルは、以下になりました。<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXXXXX-YY"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
},
"trackEvent": {
"on": "click",
"selector": ".click_event",
"request": "event",
"vars": {
"eventCategory": "eventClick",
"eventAction": "${clickId}-click",
"eventLabel": "${title}",
"eventValue": "${totalEngagedTime}"
}
}
}
}
</script>
</amp-analytics>
<amp-analytics type="googleanalytics" id="analytics2">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXXXXX-YY"
},
"extraUrlParams": {
"ni": 1
},
"triggers": {
"scrollPings": {
"on": "scroll",
"scrollSpec": {
"verticalBoundaries": [0,10,20,30,40,50,60,70,80,90,100]
},
"request": "event",
"vars": {
"eventCategory": "ScrollDepth",
"eventAction": "scroll",
"eventLabel": "${verticalScrollBoundary}%",
"eventValue": "${verticalScrollBoundary}"
}
}
}
}
</script>
</amp-analytics>
ページビュー数や普通のイベントでは、「nonInteraction: 1」がつかないように設定し、スクロールイベントだけ、「nonInteraction: 1」がつくようにしました。
これで正常に数値が取得できるかと思います。以上、AMPのイベントトラッキングについてでした。