*

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

公開日: : 最終更新日:2016/03/30 タグマネージャー


LINE facebook twitter URLコピー
B! pocket Evernote 楽天


chihuahua-624073_1280

こんにちは。Googleタグマネージャ大好きカグア!です。

最近は、お客様にGoogleタグマネージャを提案しまくっています。導入できれば、JSや同期確認などはありますが、計測の幅が格段に広がり改善の選択肢が増えるからです。

そんなGoogleタグマネージャで、わたしがよく、あらかじめ設定しておく変数をご紹介します。デフォルトで用意されているものもあるのですが、ご参考になれば幸いです。

なお、ご利用のさいは、変数名などがかぶらないように変更してご利用ください。

追記:2015年12月27日 デバイス判別、追加しました。

Googleタグマネージャへの設定方法

タグマネージャーでの使い方

Googleタグマネージャには、タグ、トリガー、変数とありますが、変数で何かしらのデータをキャッチして、それをトリガー内でつかったり、タグに受け渡したりと便利に使えます。

変数にはあらかじめ用意されているものもたくさんあって、それでも十分つかえますが、カスタムjavascriptという変数を使いますと、上図のように取得したいデータをごりごりコードで自作できます。

設定した変数の実際の使い方

タグマネージャーでの使い方2

変数に設定さえしておけば、いろいろな場面で引用できます。

用意されているタグの中に呼びこむこともできますし、コード内に直接書いて呼ぶことも可能です。{{ 変数名 }} とすれば、すぐに使えますので、とても便利です。

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タグマネージャ入門 増補版 電子書籍: 畑岡大作: Kindleストア


Effective JavaScript JavaScriptを使うときに知っておきたい68の冴えたやり方 電子書籍: Devid Herman, 吉川邦夫: Kindleストア

「javascriptってほんと便利。」

関連するほかの記事を見てみよう!
このサイトのトップページへ行く

  • このエントリーをはてなブックマークに追加
  • Pocket

Profile



Yoshihiko Yoshida
メディア運営業界23年目。Googleアナリティクス公式コミュニティ・アンサリスト最高ランク「レジェンド」国内初獲得。「マツコの知らない世界」Googleマップ案内人TV出演。Googleストリートビュー認定フォトグラファー。教育システム情報学会会員。元立教大学非常勤講師。主な著書「Googleアナリティクス基礎講座」(技術評論社)。趣味はデジカメとゲームとパン作り。>>もっと読む

Instagram

◆代表者略歴 ◆受賞歴
◆おもな著書 ◆TV出演歴
◆新聞掲載歴 ◆雑誌/連載歴
 <<お問い合わせはこちら>>

Facebook

このブログをRSS購読しよう!(無料)

follow us in feedly

よろしければ「いいね」して下さい!

 
PAGE TOP ↑