[js][GoogleAnalytics]GoogleAnalyticsのデフォルトのスクリプトについて調査

2017/05/02 2017/06/05

googleAnalyticsで貼り付けるスクリプトの中身ってなにやっているの…という所の確認。

ユニバーサルアナリティクスのanalytics.jsについて。

公式ドキュメントはGAの下記参照

https://developers.google.com/analytics/devguides/collection/analyticsjs/how-analyticsjs-works?hl=ja

どんな動きをしているの?(タグそのものについて)

以下、ページに貼り付けるタグにコメントをつけたもの。

雰囲気だけですが。

      (function(i,s,o,g,r,a,m)
          {    
             window['GoogleAnalyticsObject']='ga';
             
             window['ga']= window['ga']  ||  function(){
                 (window['ga'].q = window['ga'].q   || []).push(arguments) //引数を全部セット
             },
             
             window['ga'].l = 1 * new Date(); //日付値の取得
             
             a = document.createElement('script'),//スクリプトタグの生成
             m = document.getElementsByTagName('script')[0];//先頭のスクリプト要素を取得
             
             a.async=1;  //スクリプトタグの読み込みを非同期に設定 
             a.src='//www.google-analytics.com/analytics.js';    //外部ソースを読み込むタグを生成
             m.parentNode.insertBefore(a,m) //スクリプト要素に生成したスクリプトタグを作成
          }
      )(window,document,'script','//www.google-analytics.com/analytics.js','ga');

(function(i,s,o,g,r,a,m)

{

window['GoogleAnalyticsObject']='ga';

window['ga']= window['ga'] || function(){

(window['ga'].q = window['ga'].q || []).push(arguments) //引数を全部セット

window['ga'].l = 1 * new Date(); //日付値の取得

a = document.createElement('script'),//スクリプトタグの生成

m = document.getElementsByTagName('script')[0];//先頭のスクリプト要素を取得

a.async=1; //スクリプトタグの読み込みを非同期に設定

a.src='//www.google-analytics.com/analytics.js'; //外部ソースを読み込むタグを生成

m.parentNode.insertBefore(a,m) //スクリプト要素に生成したスクリプトタグを作成

}

)(window,document,'script','//www.google-analytics.com/analytics.js','ga');

大枠として

(function(){})();

1	(function(){})();

という記法でその場で無名関数を実行。

引数として、

(window,document,'script','//www.google-analytics.com/analytics.js','ga');

1	(window,document,'script','//www.google-analytics.com/analytics.js','ga');

を渡していると。

内部でちょくちょくでる「||」は三項演算子的な挙動の様子。

やっていることはシンプルにみると

引数のデータを保存して、「//www.google-analytics.com/analytics.js」を読み込んでいる

ということ。

jsを読み込むと ga()(コマンドキュー)が生成されるので、以後それを操作して

・ga(‘create’)で、トラッカーを生成し

・ga(‘send’)でトラッカーを送信する

と。

最終的にどうやってデータをgoogle側に渡しているの?

で個人的に気になっていたのはここ。

ga.jsのときはutmXXというパラーメータをつけた透過gifへのリクエストとして送信されていたはずだが..

ヒットは、クエリ文字列としてエンコードされたフィールドと値のペアからなる HTTP リクエストで、Measurement Protocol に送信されます。

analytics.js が使用されているページを読み込む際に、ブラウザのデベロッパーツールを開いておくと、送信されるヒットを [Network] タブで確認できます。google-analytics.com/collect に送信されたリクエストを探してください。

“://google-analytics.com/collect “へのパラメータとして送信されると。

で、これもgifファイルということで大きく仕組みは変わっていない様子。

また、リマーケティング機能を追加した場合には送信先は

“//stats.g.doubleclick.net/collect “に変更になる様子。

でこのリクエストは

img要素のsrc属性にこのURLをつけると。

- javascript | js