Googleタグマネージャに予め設定しておくと便利な変数12本

最近は、お客様に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; 
}

＞＞新JavaScript例文辞典

プロが教えるいちばん詳しいGoogle アナリティクス 4 | NRIネットコム株式会社, 神崎健太

・　・　・　・　・

＞＞安っ！アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る