(O+P)ut

アウトプット



(O+P)ut

エンジニアのアウトプット

【GoogleAnalytics】データを抜き出す仕組み

スポンサーリンク

はじめに

GoogleAnalyticsをブログやアプリに設置すれば無料でアクセス解析が可能です。

その仕組みを調査してみたので備忘録程度に残しておきます。

JavaScriptにてユーザ情報を抜いている

自前のWebサイトへのアクセスを見たければ一般的にWebサーバのアクセスログを確認します。

例えばApacheであれば以下のパスにログがあり、アクセスしたユーザの情報(ブラウザ情報含め)が時系列に格納されています。

/var/log/apache/access.log

一方でGoogleアナリティクスではJavaScriptのコードをサイトやモバイルアプリに埋め込むことでデータを取得します。
それによってアクセスログにアクセスできないサービス(はてなブログ等)でもアクセス情報を知ることが可能です。

具体的なステップとしては、計測用のJavaScriptコードをサイトのページに組み込んでいます。
利用している方はご存知のように以下のようなコードがGoogleより発行され、サイトに埋め込んだはずです。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'XX');
</script>

あとはユーザがこのスクリプトが埋め込まれたサイトをアクセスすることでコードが実行され、ユーザーのアクセス情報をクラウドに蓄積されるという算段です。

ちなみにJavaScriptを埋め込むこと自体はどんなサイトでも一般的で、動きのあるサイトであればJavaScriptをはじめとしたスクリプトは実行されています。

もちろん自前で用意したJavaScriptをブラウザで実行することも可能で以下のようなコードをブラウザのコンソールで叩けば画面が遷移して「HelloWorld」が表示されます。

document.write("HelloWorld");

JavaScriptコードを確認

埋め込むスクリプトの中にURLがあるのでそこをブラウザやwgetコマンドで確認すれば以下のように素のコードも確認可能です。

// Copyright 2012 Google Inc. All rights reserved.
(function(){
var data = {
"resource": {
  "version":"1",
  "macros":[],
  "tags":[],
  "predicates":[],
  "rules":[]
},
"runtime":[]
};
...
var aa,ba="function"==typeof Object.create?Object.create:function(a){var b=function(){};b.prototype=a;return new b},ca;if("function"==typeof 
...

終わりに

GoogleアナリティクスはJavaScriptのコードによって閲覧者の情報を抜いています。

以下のようにIP体系からプロバイダ情報までを整理してくれたりと、アクセスログだけでは分からない情報すら提供してくれるGoogleAnalytics。

仕組みとしてもデータ取得部分だけをJavaScriptで行い、そのデータ処理は非同期にてGoogleのクラウド上で処理するため、閲覧者にとってはページ閲覧のパフォーマンスに影響を与えない形となっていることもよくできています。

以上、Googleアナリティクスの仕組みでした。