[js][GoogleAnalytics]GoogleAnalyticsのデフォルトのスクリプトについて調査
2017/06/05
googleAnalyticsで貼り付けるスクリプトの中身ってなにやっているの…という所の確認。
ユニバーサルアナリティクスのanalytics.jsについて。
公式ドキュメントはGAの下記参照
https://developers.google.com/analytics/devguides/collection/analyticsjs/how-analyticsjs-works?hl=ja
どんな動きをしているの?(タグそのものについて)
以下、ページに貼り付けるタグにコメントをつけたもの。
雰囲気だけですが。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
(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'); |
大枠として
1 |
(function(){})(); |
という記法でその場で無名関数を実行。
引数として、
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をつけると。
関連記事
-
-
【Googleトレンド】【Casperjs】急上昇中キーワードをスクレイピングで取得 – (2) Casperjsのインストール
ということで続き。下記を参考に。 【参考】http://thesportsbus …
-
-
[js]JSONPについて整理
JSONPについて整理。 Contents1 JSONPとは2 な …
-
-
【ギブアップ】CentOS+casper.jsでキャプチャを取ると日本語が化けて「□」になる。
=== 追記 === casperjs、phantomjsじゃないけど、wkht …
-
-
メモ_gushから_スクロールに応じてHTML部品の表示 右下前に固定表示
要は最初は要素は固定で右下に表示 固定は下記で実施。 position: fix …
-
-
【Javascript】グラフ・チャート描画用のjsライブラリまとめ
ちょっとWEBでグラフを描画しようと思いまして、jsのライブラリを物色。 色々サ …