先日以下の
GTM(Google Tag Manager) で ユーザの
記事を
ただ、
[TOC]
前提
以下、
Google Analytics は
使っている ユーザの
属性は リアルタイムで 判定したい Server 側で
取得できる 情報は、 考慮しない1
参考
以下、
Google Analytics で ユーザ属性を 取得する
JavaScript で クライアント情報を 取得する
jackspirou/clientjs: Device information and digital fingerprinting written in pure JavaScript.
javascript - What information can we access from the client? - Stack Overflow
Detect my Browser :: Browser, Browser Plugin, HTML5 and CSS3 detection
JavaScript API でブラウザ情報を 取得し 表示してくれる オンラインツール。
fingerprint2
「FingerPrint2」に
見る ブラウザフィンガープリントの 最新事情 - その 1 - - TOKYO MARTECH BLOG 「FingerPrint2」に
見る フィンガープリンティングの 最新事情 - その 2 - - TOKYO MARTECH BLOG WebGL Browser Report - WebGL Fingerprinting - WebGL 2 Test - BrowserLeaks.com
Google Analytics で 取得できる 情報
参考リンクに広告レポート機能
をGoogle の<wbr> パブリックDMP
の
現状は、
事前に
JavaScript で 取得できる 情報
JavaScritpt で
jackspirou/clientjs: Device information and digital fingerprinting written in pure JavaScript. と
動作確認は、"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36"
で
clientjs で 取得できる 情報
ユーザ属性の
Browser の
Version 情報 - 取得コード
var client = new ClientJS(); client.getBrowser(); client.getBrowserMajorVersion();;
- OUTPUT
"Chrome" "62"
- 取得コード
OS 情報の
取得 取得コード
var client = new ClientJS(); client.getOS(); client.getOSVersion();
OUTPUT
"Mac OS" "10.12.6"
言語情報
取得コード
var client = new ClientJS(); client.getLanguage();
OUTPUT
"ja"
タイムゾーン と
時刻 取得コード
var client = new ClientJS(); client.getTimeZone(); new Date();
OUTPUT
"JST" Sat Dec 09 2017 13:14:41 GMT+0900 (JST)
Window サイズ等の
情報を 取得する 取得コード
client.getScreenPrint();
OUTPUT
"Current Resolution: 1440x900, Available Resolution: 1440x795, Color Depth: 24, Device XDPI: undefined, Device YDPI: undefined"
Font 情報を
取得する 取得コード
client.getFont();
OUTPUT
"Arial Black, Arial, Bauhaus 93, Chalkduster, Comic Sans MS, Courier New, Georgia, GungSeo, Hiragino Sans GB, Impact, Menlo, Microsoft Sans Serif, Papyrus, Plantagenet Cherokee, Symbol, Tahoma, Times New Roman, Trebuchet MS, Verdana, Webdings, Wingdings"
clientjs では 取得できないが、 JavaScript で 取得できる 情報
- 位置情報
Geolocation API
で経度、 緯度の 情報は 取得できます。 「 XXX
は次の 許可を 求めています。 ユーザーの 現在地の 認識」が 出てくるので、 気に する 人、 気にしない 人が いそうに 思います。
以下の記事が 参考に なりました。
fingerprint2
ブラウザ・フィンガープリントと
Valve/fingerprintjs2: Modern & flexible browser fingerprinting library と
CDN配信されているので、
<script src="https://cdnjs.cloudflare.com/ajax/libs/fingerprintjs2/2.1.0/fingerprint2.js" integrity="sha256-RBGR32F9JdIr/VzBmTp/iQ73Ibl6woprrQ4xj5Rr+mM=" crossorigin="anonymous"></script>
JavaScriptから
(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://cdnjs.cloudflare.com/ajax/libs/fingerprintjs2/2.1.0/fingerprint2.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
{excludes: {userAgent: true}}
でvar options = {excludes: {userAgent: true}}; Fingerprint2.get(options, function(result) { var jsonString = JSON.stringify(result) console.log(jsonString); });
Canvas の
{excludes: {userAgent: true}}
で[{ "key": "webdriver", "value": "not available" }, { "key": "language", "value": "ja" }, { "key": "colorDepth", "value": 24 }, { "key": "deviceMemory", "value": "not available" }, { "key": "pixelRatio", "value": 2 }, { "key": "hardwareConcurrency", "value": 12 }, { "key": "screenResolution", "value": [1680, 1050] }, { "key": "availableScreenResolution", "value": [947, 1680] }, { "key": "timezoneOffset", "value": -540 }, { "key": "timezone", "value": "Asia/Tokyo" }, { "key": "sessionStorage", "value": true }, { "key": "localStorage", "value": true }, { "key": "indexedDb", "value": true }, { "key": "addBehavior", "value": false }, { "key": "openDatabase", "value": true }, { "key": "cpuClass", "value": "not available" }, { "key": "platform", "value": "MacIntel" }, { "key": "doNotTrack", "value": "not available" }, { "key": "plugins", "value": [ ["Chrome PDF Plugin", "Portable Document Format", [ ["application/x-google-chrome-pdf", "pdf"] ]], ["Chrome PDF Viewer", "", [ ["application/pdf", "pdf"] ]], ["Native Client", "", [ ["application/x-nacl", ""], ["application/x-pnacl", ""] ]] ] }, { "key": "canvas", "value": ["canvas winding:yes", "canvas fp:data:image/png;base64,........."] }, { "key": "webgl", "value": ["data:image/png;base64,iVBORw0KGgoAA........", "extensions:ANGLE_instanced_arrays;EXT_blend_minmax;EXT_color_buffer_half_float;EXT_disjoint_timer_query;EXT_float_blend;EXT_frag_depth;EXT_shader_texture_lod;EXT_texture_filter_anisotropic;WEBKIT_EXT_texture_filter_anisotropic;EXT_sRGB;OES_element_index_uint;OES_standard_derivatives;OES_texture_float;OES_texture_float_linear;OES_texture_half_float;OES_texture_half_float_linear;OES_vertex_array_object;WEBGL_color_buffer_float;WEBGL_compressed_texture_s3tc;WEBKIT_WEBGL_compressed_texture_s3tc;WEBGL_compressed_texture_s3tc_srgb;WEBGL_debug_renderer_info;WEBGL_debug_shaders;WEBGL_depth_texture;WEBKIT_WEBGL_depth_texture;WEBGL_draw_buffers;WEBGL_lose_context;WEBKIT_WEBGL_lose_context;WEBGL_multi_draw;WEBGL_multi_draw_instanced;WEBGL_video_texture", "webgl aliased line width range:[1, 1]", "webgl aliased point size range:[1, 8191]", "webgl alpha bits:8", "webgl antialiasing:yes", "webgl blue bits:8", "webgl depth bits:24", "webgl green bits:8", "webgl max anisotropy:16", "webgl max combined texture image units:80", "webgl max cube map texture size:16384", "webgl max fragment uniform vectors:1024", "webgl max render buffer size:16384", "webgl max texture image units:16", "webgl max texture size:16384", "webgl max varying vectors:32", "webgl max vertex attribs:16", "webgl max vertex texture image units:16", "webgl max vertex uniform vectors:1024", "webgl max viewport dims:[16384, 16384]", "webgl red bits:8", "webgl renderer:WebKit WebGL", "webgl shading language version:WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)", "webgl stencil bits:0", "webgl vendor:WebKit", "webgl version:WebGL 1.0 (OpenGL ES 2.0 Chromium)", "webgl unmasked vendor:ATI Technologies Inc.", "webgl unmasked renderer:AMD Radeon Pro 555X OpenGL Engine", "webgl vertex shader high float precision:23", "webgl vertex shader high float precision rangeMin:127", "webgl vertex shader high float precision rangeMax:127", "webgl vertex shader medium float precision:23", "webgl vertex shader medium float precision rangeMin:127", "webgl vertex shader medium float precision rangeMax:127", "webgl vertex shader low float precision:23", "webgl vertex shader low float precision rangeMin:127", "webgl vertex shader low float precision rangeMax:127", "webgl fragment shader high float precision:23", "webgl fragment shader high float precision rangeMin:127", "webgl fragment shader high float precision rangeMax:127", "webgl fragment shader medium float precision:23", "webgl fragment shader medium float precision rangeMin:127", "webgl fragment shader medium float precision rangeMax:127", "webgl fragment shader low float precision:23", "webgl fragment shader low float precision rangeMin:127", "webgl fragment shader low float precision rangeMax:127", "webgl vertex shader high int precision:0", "webgl vertex shader high int precision rangeMin:31", "webgl vertex shader high int precision rangeMax:30", "webgl vertex shader medium int precision:0", "webgl vertex shader medium int precision rangeMin:31", "webgl vertex shader medium int precision rangeMax:30", "webgl vertex shader low int precision:0", "webgl vertex shader low int precision rangeMin:31", "webgl vertex shader low int precision rangeMax:30", "webgl fragment shader high int precision:0", "webgl fragment shader high int precision rangeMin:31", "webgl fragment shader high int precision rangeMax:30", "webgl fragment shader medium int precision:0", "webgl fragment shader medium int precision rangeMin:31", "webgl fragment shader medium int precision rangeMax:30", "webgl fragment shader low int precision:0", "webgl fragment shader low int precision rangeMin:31", "webgl fragment shader low int precision rangeMax:30"] }, { "key": "webglVendorAndRenderer", "value": "ATI Technologies Inc.~AMD Radeon Pro 555X OpenGL Engine" }, { "key": "adBlock", "value": false }, { "key": "hasLiedLanguages", "value": false }, { "key": "hasLiedResolution", "value": false }, { "key": "hasLiedOs", "value": false }, { "key": "hasLiedBrowser", "value": false }, { "key": "touchSupport", "value": [0, false, false] }, { "key": "fonts", "value": ["Andale Mono", "Arial", "Arial Black", "Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS", "Comic Sans MS", "Courier", "Courier New", "Geneva", "Georgia", "Helvetica", "Helvetica Neue", "Impact", "LUCIDA GRANDE", "Microsoft Sans Serif", "Monaco", "Palatino", "Tahoma", "Times", "Times New Roman", "Trebuchet MS", "Verdana", "Wingdings", "Wingdings 2", "Wingdings 3", "American Typewriter", "Apple Chancery", "Apple SD Gothic Neo", "AVENIR", "Ayuthaya", "Bangla Sangam MN", "Baskerville", "Big Caslon", "Bodoni 72", "Bodoni 72 Oldstyle", "Bodoni 72 Smallcaps", "Bradley Hand", "Brush Script MT", "Chalkboard", "Chalkboard SE", "Chalkduster", "Cochin", "Copperplate", "Didot", "Euphemia UCAS", "Futura", "Geeza Pro", "Gill Sans", "Gujarati Sangam MN", "Gurmukhi MN", "Heiti SC", "Heiti TC", "Hiragino Kaku Gothic ProN", "Hiragino Mincho ProN", "Hoefler Text", "Kailasa", "Kannada Sangam MN", "Krungthep", "Malayalam Sangam MN", "Marion", "Marker Felt", "Nadeem", "Noteworthy", "OPTIMA", "Oriya Sangam MN", "OSAKA", "Papyrus", "Plantagenet Cherokee", "Rockwell", "Savoye LET", "Sinhala Sangam MN", "Skia", "Snell Roundhand", "Tamil Sangam MN", "Telugu Sangam MN", "Thonburi", "Zapfino"] }, { "key": "fontsFlash", "value": "swf object not loaded" }, { "key": "audio", "value": "124.04345808873768" }, { "key": "enumerateDevices", "value": "not available" }]
murmur
のvar options = {excludes: {userAgent: true}}; Fingerprint2.get(options, function (components) { var values = components.map(function (component) { return component.value }); var murmur = Fingerprint2.x64hash128(values.join(''), 31); console.log(murmur); })
変数名のmurmur
の
MurmurHashとは
私が使用している
7aef723621360003b5065446fed3df90
JavaScript で 取得できる 情報で どんなことが わかるのか
IT への 興味
OS Version ブラウザの
アクセス時間帯が
端末が
必要な
OS 情報
Browser の
Version 情報 タイムゾーン と
時刻
多言語が 話せる 人か
多言語化対応されている
必要な
フォントに 拘る 職業か、 興味が あるか
インストールしている
必要な
位置情報
位置情報で
必要な
まとめ
JavaScript で
以下まとめます。
たいした
情報は 取得できない。 無理矢理考えると、
考えついたが、 何か 極端で 断片的な 情報な 気が する。 お金を
出せるなら、 パブリック DMP を 使った ほうが いい。 JavaScript のみに
拘らなければ、 時間差は あるが、 Google Analytics の データは 使えるのでもう 少し踏み込んだ 属性情報を 使えるかもしれない。 ブラウザ・フィンガープリント と
いう 技術が ある。 ブラウザ・フィンガープリント単体では 単なる 暗号キーなのだが、 ドメインを 超えて 同じ キーが 取得できるので 複数サイトを 横断した 行動ログを 蓄積できる。
以上です。
IP アドレス等です。 ↩
リアルタイム データ: get | アナリティクス Real Time Reporting API | Google Developers と
いう API が ありますが、 これは ユーザ属性が 取得できなそうです。 ↩
コメント