最近は、お客様にGoogleタグマネージャを提案しまくっています。導入できれば、JSや同期確認などはありますが、計測の幅が格段に広がり改善の選択肢が増えるからです。
そんなGoogleタグマネージャで、わたしがよく、あらかじめ設定しておく変数をご紹介します。デフォルトで用意されているものもあるのですが、ご参考になれば幸いです。
なお、ご利用のさいは、変数名などがかぶらないように変更してご利用ください。
この記事の目次
Googleタグマネージャへの設定方法
Googleタグマネージャには、タグ、トリガー、変数とありますが、変数で何かしらのデータをキャッチして、それをトリガー内でつかったり、タグに受け渡したりと便利に使えます。
変数にはあらかじめ用意されているものもたくさんあって、それでも十分つかえますが、カスタムjavascriptという変数を使いますと、上図のように取得したいデータをごりごりコードで自作できます。
設定した変数の実際の使い方
変数に設定さえしておけば、いろいろな場面で引用できます。
用意されているタグの中に呼びこむこともできますし、コード内に直接書いて呼ぶことも可能です。{{ 変数名 }} とすれば、すぐに使えますので、とても便利です。
1.時刻(ゼロ桁合せ有)
生ログっぽく何か取るときに。ソートしやすいようにゼロ桁合わせも。
function(){ var now = new Date(); hh = ""+now.getHours(); if (hh.length === 1) { hh = "0" + hh; } mm = ""+now.getMinutes(); if (mm.length === 1) { mm = "0" + mm; } ss = ""+now.getSeconds(); if (ss.length === 1) { ss = "0" + ss; } return hh + ':' + mm + ':' + ss ; }
あと、日付も追加しました。
function(){ var now = new Date(); yy = ""+now.getFullYear(); mm = ""+(now.getMonth()+1); if (mm.length === 1) { mm = "0" + mm; } dd = ""+now.getDate(); if (dd.length === 1) { dd = "0" + dd; } return yy + '/' + mm + '/' + dd ; }
2.ページタイトル
URLが変わらないページ遷移などのときに。
function() { var title = document.title; return title; }
3.ページURL
デフォルトでも用意されていますが、いちおう。
function() { var url = location.href; //var url = location.pathname; return url; }
4.ユーザーエージェント
生ログ取得のさいにとりあえず入れておくk系。PHPとか使えるとアドレスなども入れると便利かも。
function() { var ua = navigator.userAgent; return ua; }
※参考 PHPでのIPアドレス取得
<?php echo $_SERVER["REMOTE_ADDR"]; ?>
5.クライアントID
Googleアナリティクスでユニバーサルアナリティクスになると、クッキーは_ga=1.xxxxx で管理されるのでそれを取得。Googleタグマネージャでも用意されていますが、いちおう。
function() { var a=document.cookie; var b=a.split("_ga="); var c=b[1].split(";"); return c[0]; }
6.スクロール位置
そのままでは運用できないですが、取得自体は簡単です。
function(){ var ddd = document; var bbb = ddd.body; var Ichi = ddd.documentElement.scrollTop || bbb.scrollTop; return Ichi ; }
7.ページ全体の高さ
こちらも何かの際に引用できると便利かと。
function(){ var taKasa = document.body.clientHeight; return taKasa ; }
8.縦持ちか横持ちか
タブレットなどで縦もち(ポートレイト)か横もち(ランドスケープ)のどちらが多いかなど。
function(){ var muKi = window.innerHeight > window.innerWidth ? 'TATE' : 'YOKO'; return muKi ; }
9.ローカルストレージ
クッキーでもいいのですが、スマホなどでも対応しているローカルストレージはほんと便利。
function() { var kkLocal = localStorage['date']; if ( kkLocal == null ) { kkLocal = "nodate"; } return kkLocal; }
※あらかじめローカルストレージ’date’に、何か書いておく前提。
10.デバイス判別
たまにスマホだけで発火させたいときもあるので。
function() { var ua = navigator.userAgent; var dev = 'desktop'; if ( ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) ) {dev = 'mobile'; } else if ( ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0 ){ dev = 'tablet'; } return dev; }
11.緯度経度
同期処理になるのと、ブラウザ側で位置情報取得のパーミションが必要なので、タグマネージャーでは要カスタマイズ。取得の仕方はいちおう以下。
if (navigator.geolocation){ navigator.geolocation.getCurrentPosition( function(position){ var ido = position.coords.latitude; //緯度 var kedo = position.coords.longitude; //経度 }); }
12.モバイル数カウント
単純にスマホOSの数をカウントするためだけのコード。
function() { var mo = 0; if( navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { mo = 1; } return mo; }
プロが教えるいちばん詳しいGoogle アナリティクス 4 | NRIネットコム株式会社, 神崎健太
・ ・ ・ ・ ・
>>安っ!アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る
↓↓↓無料のニュースレターを配信中です