※GAのトラッキングコードを見ながら、jsの構文を確認する。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!-- Google Analytics --> < script > (function (i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview'); < /script> <!-- End Google Analytics --> |
★上のコードで行われる主な処理は次の 4 つです。
1. analytics.js JavaScript ライブラリを https://www.google-analytics.com/analytics.js から非同期的にダウンロードする script要素を作成します。
2. グローバル ga 関数(ga() コマンドキュー)を初期化します。analytics.js ライブラリが読み込まれ、準備が完了した段階でコマンドが実行されるようスケジュール設定できます。
3. ‘GA_MEASUREMENT_ID’ パラメータで指定したプロパティに新しいトラッカー オブジェクトを作成するコマンドを ga() コマンドキューに追加します。
4. 現在のページのページビューを Google アナリティクスに送信する別のコマンドを ga() コマンドキューに追加します。
analytics.js による測定はほぼすべて、ga() コマンドキューを使って行えます。
https://webtan.impress.co.jp/e/2013/07/25/15703
●実装するga.js非同期トラッキングコード
下記がカスタマイズをしていない必要最小限の非同期トラッキングコードの内容だ。前回解説したとおり、UA-XXXXXXX-Yの部分が、各プロパティ(データ収集の単位)でユニーク(別々)になる文字列だが、それ以外はすべてのプロパティで共通だ。
●ga.jsトラッキングコードはページのどこに貼り付けるのか
ga.jsトラッキングコードには、同期バージョンと非同期バージョンの2つが存在している(特に何もしなければ非同期バージョンになる)。「同期」と「非同期」の違いは次のようなものだ。
・同期バージョン ―― HTMLファイルが読み込まれた順番にJavaScriptが実行される
・非同期バージョン ―― HTMLファイルの読み込み順とは関係ないタイミングでJavaScriptが実行される
●上級者向け:特定の条件発生時にデータを取得したい場合
特定の条件が発生した場合にだけデータを取得したいような場合もあるだろう。そういった目的の場合、データ取得の命令を基本のトラッキングコードの場所に書くわけにはいかない。そのため、データを取得したいタイミングで、データを単独で飛ばすことができる以下の5つの命令を実行するようにJavaScriptコードを記述する。
_trackEvent
_trackPageview
_trackSocial
_trackTiming
_trackTrans
“]
イベントトラッキングの設定を行うことによって、Webページ上で行われたユーザーのアクションを可視化できるようになります。
例えば資料などファイルのダウンロードや電話ボタンのタップなど、ページの遷移を伴わないユーザー行動も多くあります。これらもサイトにおいて行われる重要なユーザー行動であるため、ぜひ計測しておきたいところですよね。Google アナリティクスでは、イベントトラッキングと呼ばれる設定を行うことで、ページ閲覧以外のアクション計測するための仕組みが用意されています。
▽第5世代:gtag.js
▽第4世代:ユニバーサルアナリティクス
▽第3世代:非同期トラッキングコード
▽第2世代:ga.js
▽第1世代:urchin.js
この記事へのコメントはありません。