Google Analyticsがさらに使いやすくなる！ユーザーのさまざまなインタラクションを自動的にトラッキングするスクリプト -Autotrack

Post on:2016年3月8日

Autotrackの使い方

サイトにAutotrackを加えるには、2つのことをします。

ページに「autotrack.js」をロードさせる。
Autotrackのプラグインを必要とするトラッキングのスニペットをアップデートする。
参考: トラッキングのスニペット、プラグインの使用

既にデフォルトのJavaScriptのスニペットを使用しているなら、下記のコードに置き換えることができます。

<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('require', 'autotrack');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<script async src='path/to/autotrack.js'></script>

window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;

ga('create', 'UA-XXXXX-Y', 'auto');

ga('require', 'autotrack');

ga('send', 'pageview');

</script>

パラメータが必要であれば、下記のように指定します。

ga('require', 'autotrack', {
  attributePrefix: 'data-ga-'
});

ga('require', 'autotrack', {

attributePrefix: 'data-ga-'

});

Autotrackのプラグイン

プラグインはデフォルトで6種類すべてが含まれていますが、単体で使用することもできます。

eventTracker: イベントのトラッキング
mediaQueryTracker: メディアクエリとブレイクポイントのトラッキング
outboundFormTracker: 外部に向かうフォームのトラッキング（自動）
outboundLinkTracker: 外部に向かうリンクのトラッキング（自動）
socialTracker: ソーシャルメディアのトラッキング（自動）
urlChangeTracker: 1ページのアプリケーションでURL変更のトラッキング（自動）

eventTracker

「data-event-label」「data-event-value」の属性をもったあらゆる要素のクリックイベントをトラッキングします。属性はカスタマイズ可能です。

下記のコードはユーザーがボタンをクリックすると、「category: video」「action: play」でイベントをGoogle Analyticsに送ります。

<button data-event-category="video" data-event-action="play">Play</button>

1	<button data-event-category="video" data-event-action="play">Play</button>

mediaQueryTracker

メディアクエリやブレイクポイントが期待通りに機能しているかトラッキングします。

このプラグインは他の自動型のと異なり、Google Analyticsで設定をする必要があります。

Google Analyticsにログインして、データを送るアカウントとプロパティを選択。トラッキングするメディアクエリ（ブレイクポイント・解像度・デバイスの方向など）の項目を作成。
設定した項目に名前を与え、ヒットのスコープを選択し、activeのチェックボックスがチェックされていることを確認。
「mediaQueryDefinitions」に名前と値を設定。

ga('require', 'autotrack', {
  mediaQueryDefinitions: [
    {
      name: 'Breakpoint',
      dimensionIndex: 1,
      items: [
        {name: 'sm', media: 'all'},
        {name: 'md', media: '(min-width: 30em)'},
        {name: 'lg', media: '(min-width: 48em)'}
      ]
    },
    {
      name: 'Resolution',
      dimensionIndex: 2,
      items: [
        {name: '1x',   media: 'all'},
        {name: '1.5x', media: '(min-resolution: 144dpi)'},
        {name: '2x',   media: '(min-resolution: 192dpi)'}
      ]
    },
    {
      name: 'Orientation',
      dimensionIndex: 3,
      items: [
        {name: 'landscape', media: '(orientation: landscape)'},
        {name: 'portrait',  media: '(orientation: portrait)'}
      ]
    }
  ]
});

ga('require', 'autotrack', {

mediaQueryDefinitions: [

{

dimensionIndex: 1,

items: [

{name: 'sm', media: 'all'},

{name: 'md', media: '(min-width: 30em)'},

{name: 'lg', media: '(min-width: 48em)'}

]

{

dimensionIndex: 2,

items: [

{name: '1x', media: 'all'},

{name: '1.5x', media: '(min-resolution: 144dpi)'},

{name: '2x', media: '(min-resolution: 192dpi)'}

]

{

dimensionIndex: 3,

items: [

{name: 'landscape', media: '(orientation: landscape)'},

{name: 'portrait', media: '(orientation: portrait)'}

]

}

]

});

outboundFormTracker

異なるドメインでフォームがいつサブミットされるか自動的に検出し、イベントヒットを送ります。イベントのカテゴリは「Outbound Form」、アクションは「submit」で、イベントのラベルはフォームのアクションの属性の値です。

outboundLinkTracker

異なるドメインを指定したhref属性がいつクリックされるかを自動的に検出し、イベントヒットを送ります。イベントのカテゴリは「Outbound Link」、アクションは「click」で、イベントのラベルはリンクのhref属性の値です。
もしそのホスト名が「location.hostname」と等しくないなら、リンクが外向きであるとデフォルトで判断します。

socialTracker

eventTrackingのプラグインと似ていて、「data-social-network」「data-social-action」「data-social-target」の属性をもったあらゆる要素のクリックイベントをトラッキングします。これらの属性は、TwitterやFacebookの公式ボタンの後に自動的に加えられます。言い換えると、公式ボタンを使用している場合、それらのボタンとユーザインタラクションが自動的にトラッキングされます。

Likeボタン: SocialNetwork(Facebook), Action(like or unlike), Target(そのページのURL）
Tweetボタン: SocialNetwork(Twitter), Action(tweet), Target(ウィジェットのdata-url or そのページのURL）
Followボタン: SocialNetwork(Twitter), Action(follow), Target(ウィジェットのdata-screen-name）

urlChangeTracker

履歴APIにてURLに対する変更を発見し、自動的にトラッカーを更新して、追加のページビューを送ります。これは1ページのアプリケーションが追加の設定無しでも、今までのサイトのようにトラッキングさせることを可能にします。
※このプラグインはURLのハッシュ部分は取得しないため、ハッシュの変更はサポートしません。