[この記事は Philip Walton、デベロッパー プログラム エンジニアによる Google Developers Blog の記事 "Introducing Autotrack for analytics.js " を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。]


Google Analytics 公開当初の頃と比べ、ウェブは大きく変化しました。当時は、ほとんどのウェブサイトは個別ページから構成されており、あるページから別のページに移動するためには、リンクをクリックしてページ全体をリクエストする必要がありました。そのため、ほとんどのサイトでは、JavaScript のトラッキング スニペットが 1 つあれば、大多数のユーザーの操作を追跡できました。

しかし昨今のウェブは、当時に比べるとずっと複雑で変化に富んだものになっています。旧来の静的なウェブサイトだけでなく、機能満載のウェブ アプリケーションも存在します。ユーザーが実行する操作は、リンクのクリックやフォームの送信に限定されなくなり、「ページビュー」も、必ずしもページ全体を読み込むとは限らなくなっています。

ウェブがこのように変化を遂げる一方で、アナリティクスの実装はさほど変わっていません。Google Analytics ユーザーのほとんどは、デフォルトのトラッキング スニペットをコピーしてサイトのページに貼り付けるだけで満足しています。Google Analytics にはデフォルト以外の機能もたくさんあることは知っていながら、そういった機能を学ぶための時間はつい後回しになってしまうのです。

この問題への新たな解決策となるのが、analytics.js 向けの Autotrack です。Autotrack は、Google Analytics の機能を最大限に活用しますが、実装のための手作業は最小限で済みます。このツールは、今日のモダンなウェブのデータを追跡する基盤をデベロッパーに提供します。

機能

Autotrack ライブラリは、analytics.js プラグインの集合体であるため、ライブラリ全体をそのまま利用することも、必要なプラグインのみを選んで使用することも簡単にできます。以下のセクションでは、Autotrack が実現する機能をいくつか取り上げて説明します。

サイト外へのリンクとフォームの追跡

あるサイトで、ユーザーが別のページを指すリンクをクリックすると、通常はそのページが開いた際にページビューが送信されます。一連のページビュー情報が存在しているため、Google Analytics はユーザーが（どのページから）どのページに移動したのかをバックエンドで判断できます。ただし、ユーザーがクリックしたリンク先やフォームの送信先が外部ドメインだった場合、Google Analytics に対して個別に情報を提供しない限り、そのアクションは捕捉されません。

かつては、外部ドメインへのリンクやフォーム送信の追跡の実装は困難でした。ほとんどのブラウザでは、新しいページの読み込みを開始すると、現在のページ上の JavaScript の実行を停止するからです。Autotrack がこうした複雑な問題に対処するため、自由に外部ドメインへのリンクやフォーム送信の追跡が行えるようになります。

シングルページ アプリケーション上の URL の変更追跡

コンテンツを動的に読み込み、History API を使って URL を更新するシングルページ アプリケーションを構築している場合、デフォルトのトラッキング スニペットでは不十分です。デフォルトのトラッキング スニペットは、最初のページ読み込みだけしか追跡しません。たとえ、新しいコンテンツを問題なく読み込んだ際にページビューを送信するようにしても、まだ厄介な問題が発生する可能性があります。

Autotrack は History API を使用した URL の変更を自動的に検出し、それをページビューとして追跡します。トラッカーは更新された URL に同期されるため、それ以降のヒット（イベント、ソーシャル インタラクションなど）もすべて正しい URL に関連付けられます。

宣言型のイベント トラッキング

手作業で JavaScript のイベントリスナを書くよりも、明示的にイベントを HTML に追加する方が容易な場合があります。最も典型的な例は、単純なクリック イベントの追跡です。Autotrack では、マークアップにデータ属性を追加するだけでクリック イベントを追跡できます。 
 <button data-event-category="Video" data-event-action="play">Play</button>

ユーザーが上記のボタンをクリックすると、対応するカテゴリやアクションとともに、イベントが Google Analytics に送信されます（オプションでラベルや値も含めることができます）。

メディアクエリのトラッキング

最近は、ほとんどのサイトでレスポンシブ デザインが採用されており、ユーザーが使っているデバイスの画面サイズや機能に応じてページ レイアウトが更新されるようになっています。メディアクエリを使ってページの外観や機能を変更する場合、メディアクエリの情報を取得することが重要です。そうすることによって、有効になっているメディアクエリに応じて使用方法がどう変わるのかをより深く理解することができます。

Autotrack を使用すると、使用されるメディアクエリの値のセットを取得できます。この値のセットは、カスタム ディメンション経由で自動的に追跡されます。さらに、値が変化したことも追跡できます（メディアクエリを使ったトラッキングを実行する場合は、Google Analytics でカスタム ディメンションを設定しなければならないことに注意してください。設定のプロセスはほんの数分で済みます。また、設定の手順は mediaQueryTracker プラグインのドキュメントで説明されています）。

以上で説明した機能は、Autotrack で実現できる機能のほんの一部です。すべてのプラグインの一覧とその使い方の説明は、Github にある Autotrack のドキュメントをご覧ください。

Autotrack の利用効果が期待されるサイトとは

Autotrack は誰でも利用でき、どんなサイトにも効果がありますが、このライブラリは主に、現在のアナリティクスの実装をカスタマイズしておらず、ここまでで説明したような機能を利用したいサイトのために設計されています。

現在デフォルトのトラッキング スニペットだけを使用している場合、Autotrack の利用を検討してみる価値があるでしょう。Google Analytics の実装に既にカスタマイズを加えている場合は、まずドキュメントを参照し、その実装と Autotrack の機能が衝突しないかどうか、二重にカウントされるデータがないかどうかを確認してください。

次のステップ

Autotrack を利用する際は、ドキュメントの「使い方」のセクションを参照してください。Autotrack がどのようなデータを捕捉するのかについて関心のある方は、Google Analytics Demos & Tools サイトを参照してください。このサイトは Autotrack を利用しており、このサイト自身に対して Google Analytics を実行したデータをグラフで表示しているページがあります。

さらに理解を深めたい場合は、Autotrack ライブラリを直接参照してください。これはオープンソースで、学習に役立つ、優れたリソースです。プラグインのソースコードにひととおり目を通せば、そこで analytics.js の高度な機能が多用されていることが理解できるでしょう。

最後に、この機能に関するフィードバックや提案があれば、遠慮なくお知らせください。バグや問題点は、Github から報告できます。

Posted by Eiji Kitamura - Developer Relations Team