head_20161018

自社内でもGoogleタグマネージャを使った開発ができるようになりましょう

この記事では、Googleタグマネージャ(以下GTM)とGoogleアナリティクス(以下GA)を使い、精読率と滞在時間を計測する方法を解説しています。

しかし単なる設定マニュアルではありません。

この2つの例を通じ、GTMでの開発を自社内で進められるようになることを目的としたエントリです。

タグ・トリガー・変数がそれぞれ、いつどのように作用しているのか?この値はどこから来ているのか?さらには動作確認・デバッグの方法などについても解説しています。

ですので「こういう値が計測できるようにしたい」というオリジナルの設定をする時に、この記事が参考になることを願っています。

イベントとしてGTMでオリジナルの値を計測したい場合の手順を簡単にまとめますと、以下のようになります。

  1. GA上で何の値を計測したいか決める。
  2. その値をJSからGTMに渡すための、DataLayer変数を設定する。
  3. その値を取得するJSを書き、タグとして設定する。
  4. トリガーを設定する。トリガー名は項目3のJS内でDataLayer.push();したときのevent名と揃える。
  5. GTMからGAに渡すタグを設定する。渡される変数名は項目2で決めたDayaLayer変数名にする。

それでは精読率と滞在時間について、ひとつずつ解説します。

Googleアナリティクスで精読率を測定するには?

精読率測定の設定方法

大前提としてGTMの設置が必要ですが、これについては説明しません。

今回はScroll Depthという、JSのライブラリを使用します。これはjQueryが別途必要ですのでご用意ください。

全体の流れ

まず全体の流れをざっくり説明します。

  1. Scroll Depthタグが、ページが25%ずつスクロールされるたびにScrollDistanceというトリガーを叩きます。
  2. この時、eventLabelというDataLayer変数にスクロール率%の値を入れて、GTMに投げます。
  3. GTMはGAに、ページのURLとスクロール率%をセットにしたイベントデータを投げます。
  4. GAは受け取ったスクロール率%の値を、イベントの種類やページURL別に集計します。

設定項目は以下のとおりです。

「GA-計測タグ」は、GAを計測するために必要なタグで、名前は違うでしょうがおそらく皆さんのサイトにはすでに入っていると思います。

ですので最低限必要なのはそれらを除いた5つです。

post_20161017c

  1. Scroll Depthタグが発火するページを制限するトリガーを作成(トリガー:LPのみ)
  2. Scroll Depthイベントを拾うトリガーを作成(トリガー:精読率測定_scrollDistance)
  3. Scroll Depthイベントが使用するDataLayer変数を作成(変数:精読率)
  4. 精読率を測定するScroll Depthタグを追加(タグ:JS-精読率測定)
  5. Scroll DepthイベントをGAに投げるタグを作成(タグ:GA-精読率測定)

の順に説明します。

1.Scroll Depthタグが発火するページを制限するトリガーを作成

そもそも縦長ではないページの精読率を計測しても意味がありません。

LPのような縦長のページにのみ設置するために、後に作成するScroll Depthタグの発火条件を設定します。

(minHeightというオプションを使っても良いのですが…)

以下は、 /lp1.html や /lp2.html などといった、 lp数字.html というファイルの時だけ発火するようにする正規表現の例です。

post_20161017h


/lp.?\.html

LPのファイル名をイチイチ個別に入力するのはスマートではありません。

ですからこれを見越して、LPは例えば /lp/ ディレクトリに集めておいたり、またはファイル名はlp_から始めるなど、正規表現で表せるようなディレクトリ構造・ファイル名の命名規則を設計するべきです。

このトリガーには「LPのみ」という名前をつけて保存します。

他の名前でも構いませんが、タグから参照する時にこの名前が出てきますので、変更する場合は適時読み替えてください。

2.Scroll Depthイベントを拾うトリガーを作成

Scroll Depthは、スクロール量が25%を超える度に、ScrollDistanceという名前のトリガーを叩こうとします。

ですのでGTM側に、同じ名前のトリガーを作っておく必要があるのです。

「トリガー」→「新規」→「カスタムイベント」と進み、以下のように設定してください。

post_20161017f

JavaScriptですので大文字小文字を間違えると動作しません。頭のSと途中のDは大文字です。

トリガー名に「精読率測定_scrollDistance」という名前をつけて保存します。

3.Scroll Depthイベントが使用するDataLayer変数を作成

次にeventLabelという名前のDataLayer変数を作成します。

前述の通りScroll Depthは常にスクロール率を監視しており、スクロール量が25%を超える度にイベントを発生させ、GTMに値を投げます。

この変数は、この時にGTMとの橋渡しをする役割を持ちます。

「ユーザー定義変数」→「新規」→「データレイヤーの変数」と進み、以下のように設定してください。

post_20161017e

同じくJavaScriptですので大文字小文字にご注意ください。頭のeは小文字、途中のLは大文字です。

「精読率」という名前をつけて保存してください。

ちなみにこのeventLabelや先ほどのScrollDistanceという文字列はどこから来ているのかといいますと、この後に出てくるScroll Depthタグの中で指定されている変数名やトリガー名です。

post_20161017z
ここらへんに出ているのですが、JSが難読化されていてメチャ読みづらいです…

4.精読率を測定するScroll Depthタグを設置

スクロール率を測定するScroll Depthというライブラリをタグに設置します。

ここからダウンロードしてください。なお無償で利用できますが、MITライセンスですので著作者表記の削除は認められません。

タイプは「カスタムHTML」で、必ず<script>と</script>を追加しその間に入れてください

post_20161017d

そして図のように、設定のコードを追加します。


jQuery.scrollDepth({
percentage:true, //25%ずつの計測をONにする
userTiming:false,
pixelDepth:false,
nonInteraction:true //直帰にしない
});

またタグは、「いつ発火するか?」を設定しなくてはいけません。

post_20161017i

手順1で設定した、「LPのみ」を指定し保存します。

ここで勘違いしやすいのは、Scroll Depthタグはページを開くと同時に発火するということです。

「25%ずつスクロールされるたび」に起こるのは、タグの発火ではなく、ScrollDistanceイベント(=手順1で設定したScrollDistanceトリガー)です。

5.Scroll DepthイベントをGAに投げるタグを作成

最後に、ScrollDistanceトリガーが叩かれた時に発火するGAタグを設定します。

post_20161017g

カテゴリの値は、GAの画面でここに出てきます。今回は「精読率」としています。

アクションは{{Page Path}}という変数を設定しており、これはScroll Depthタグが発火したページのパスが入ります。

{{Page Path}}とはGTMの組み込み変数で、URLのうちドメイン以下の値です。ここを{{Page URL}}にするとドメイン名から入ってきます。

ラベルにはドロップダウンから{{精読率}}を選んでください。これは手順2で説明したeventLabelの値で、スクロール率%が入ってきます。

「非インタラクションヒット」を「真」にすることにより、このタグが発火したセッションはたとえ直帰したとしても直帰として計測しないようになります。

25%読んでくれたらもう直帰扱いじゃなくても良いよねと、そういうことです。

そして発火条件として手順1で設定した、「精読率測定_scrollDistance」を指定します。

お疲れさまでした。これで精読率が計測できます。

精読率の動作確認

配信前に、GTMのプレビューモードを使ってテストをしましょう。

まずテストの準備を説明します。

テスト用ページを作成する

縦長のページを作ってください。

縦長であれば何pxでも構いませんが、縦3000pxのサンプルを用意しました。これは1500pxで色が変わっています。

test001.html(GTM-XXXXは書き換えてください)

<html>
	<head>
		<!-- Google Tag Manager -->
		<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
		new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
		j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
		'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
		})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
		<!-- End Google Tag Manager -->
		<link href="./styles.css" rel="stylesheet" type="text/css">
		<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
	</head>
	<body>
		<!-- Google Tag Manager (noscript) -->
		<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
		height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
		<!-- End Google Tag Manager (noscript) -->
		
		<div class="div1">
			div1
		</div>
		<div class="div2">
			div2
		</div>
	</body>
</html>
styles.css

.div1{
color: white;
height: 1500px;
width: 200px;
background-color: #c5c1c1;
margin: 10px;
}
.div2{
color: white;
height: 1500px;
width: 200px;
background-color: #884141;
margin: 10px;
}

GAの計測用(本番)ビューは使わない

テストの値がGAの計測用ビューに混ざるのは良くありませんので、オリジナルか、または自分のIPのみ計測するテスト用ビューを作って使ってください。

post_20161017l
GAのビューリスト

いずれにしてもテストをするしないに関係なく、GAは何も手を加えないオリジナル、通常使用する計測用の最低2つのビューが必要です。

計測用ビューの設定は曲がりひげでぶてて氏が公開しているGAフィルタ設定ツールのページを参照してください(いつも助かってます、ありがとうございます)。

ブラウザで別にGAの「リアルタイム→サマリー」を開いておいてください。

テストの手順と確認方法

まずページを開いた時点でGAの計測タグとScroll Depthタグが発火します。

post_20161017k

繰り返しますが、Scroll Depthタグが発火するのは25%スクロールした時点ではなく、ページを開いた時点です。

25%ずつスクロールした時に起こるのは、ScrollDistanceイベントです。

ですので図のようにページを開いた時点で「JS-精読率測定(つまりScroll Depthタグ)」が発火しているのは正しいです。

この時点で、GAのリアルタイム画面にページビューが計測されます。

もしGAにページビューが計測されない場合は、もともと設定されているGA計測タグに問題があります。

タグの設定の他に、GoogleChromeのGAを動作させないプラグインが動いていたりするかもしれません。

post_20161017n

25%スクロールすると、ScrollDistanceのイベントが発生し、同時にGAにイベントを投げるタグが発火します。

post_20161017m
画面左側にScrollDistanceイベントが記録されている。Variablesをクリックすると、そのイベントで受け渡しされた値が参照できる。

OKでしたらGAの「リアルタイム」→「イベント」に「精読率」というイベントが計測されます。

GAのイベント画面にある「イベントカテゴリ」「イベントアクション」「イベントラベル」は、GTMで設定したこの値が反映されています。

post_20161017p

タグの発火からGA計測までタイムラグがありますがせいぜい15秒です。

それ以上待ってもイベントが記録されない場合は、手順4で設定したGAタグを見直してください。

ここまで問題なければスクロールを進め、50%、75%、100%とそれぞれ同じように動作することを確認してください。

post_20161017q

4回目のScrollDistanceイベント(精読率100%)のが記録され、GAにイベントが届いていればOKです。

post_20161017o

精読率測定についての解説は以上です。

Googleアナリティクスで滞在時間を計測するには?

GAの平均滞在時間はアテにならない

GAはその仕様上、次のページに行かないと滞在時間が計測できません。

ですので直帰したセッションの滞在時間を計測するには、以下に説明するような仕組みを作る必要があります。

ただ、全セッションについてそれぞれが何秒だったかを取るのは意味がありません。

もちろん取れなくはありませんが、バラバラの数値をどうせ集計することになるのですから、最初から範囲別の集計を取るようにした方が良いでしょう。

今回の例では、10秒以上、45秒以上、300秒以上の滞在がそれぞれ何回あったかを計測します。

滞在時間測定の設定方法

全体の流れを説明します。

  1. 指定された時間を経過すると、滞在時間測定タグがstayTimeというトリガーを叩きます。
  2. この時、strTimeというDataLayer変数に滞在時間の値を入れて、GTMに投げます。
  3. GTMはGAに、ページのURLと滞在時間の値をセットにしたイベントデータを投げます。
  4. GAは受け取った滞在時間の値を、イベントの種類やページURL別に集計します。

これ以下は、ここまでの内容を読んで理解していることを前提に進みますので、一部の説明を省略します。

post_20161017r

  1. stayTimeイベントを拾うトリガーを作成(トリガー:滞在時間測定_stayTime)
  2. stayTimeイベントが使用するDataLayer変数を作成(変数:滞在時間)
  3. 滞在時間を測定するstayTimeタグを追加(タグ:JS-滞在時間測定)
  4. stayTimeイベントをGAに投げるタグを作成(タグ:GA-滞在時間測定)

の順に説明します。

1.stayTimeイベントを拾うトリガーを作成

post_20161017s

GTMではdataLayer.push()する時、eventの値と同じ名前のトリガーを叩きます。

後に出てきますが、滞在時間を計測するタグの中の

dataLayer.push({
 'event': 'stayTime',
 'strTime': timerVal
});

という箇所は、stayTimeという名前のトリガーを探し叩きます。

ですのでここで、stayTimeという名前のトリガーを設定したわけです。

これは、オリジナルのタグを書く時に大切ですので必ず覚えてください。

「滞在時間測定_stayTime」という名前をつけて保存してください。

2.stayTimeイベントが使用するDataLayer変数を作成

post_20161017t

stayTimeというトリガーが叩かれる時、一緒に滞在時間の値をpush()します。

その受け渡しのために必要な変数strTimeを設定します。

「滞在時間」という名前をつけて保存します。

3.滞在時間を測定するstayTimeタグを追加

「タグ」→「新規」→「カスタムHTML」と進み、以下のコードを追加してください。

※このサンプルコードは利用・改変・再配布など一切自由です。

<script>
 	var arrIdx = 0; //配列のインデックス
  	var timerArr = [10000, 45000, 120000]; //計測時間の配列をミリ秒単位で与える。この例は10秒、45秒、300秒で計測。
	var startTime = new Date(); //ページ表示開始時刻
	console.log("startTime->"+ startTime); //計測開始時間をログに表示
  
  //1秒おきにこのtimerFuncという関数がコールされる
	var timerFunc = function(){
      var nowTime = new Date();
      var gapTime = nowTime - startTime; //現在時刻からページ表示開始時刻を引くことにより、ページを表示してからの経過時間を取得する
      console.log("gapTime->" + gapTime); //経過時間をログに表示
      if ( gapTime >= timerArr[arrIdx] ){ //経過時間が計測時間配列のインデックス番目要素の値を超えたら
        var timerVal = parseInt(timerArr[arrIdx] / 1000) + "秒"; //ミリ秒を秒に
        //stayTimeという名前のトリガーを叩く
        //その際、strTimeというDataLayer変数にtimerValの値をセットして渡す
        dataLayer.push({
          'event': 'stayTime',
          'strTime': timerVal
        });
        arrIdx++; //インデックスをひとつ進める
      }
      delete nowTime;
      console.log("arrIdx"+ arrIdx + "/" + "length" + timerArr.length);
        clearInterval(mainTimer);
      }
    }
    var mainTimer = setInterval(timerFunc, 1000);
</script>

そしてこのタグには、精読率のところで作成した「LPのみ」のトリガーを設定します。

4.stayTimeイベントをGAに投げるタグを作成

post_20161017u

カテゴリは「滞在時間」にしていますので、GAのイベントページでは「滞在時間」というカテゴリの中に表示されます。

ラベルの欄には、手順2で設定した{{滞在時間}}が入ります。

非インタラクションヒットはこの場合、どちらでも良いでしょう。

最後にトリガーとして、stayTimeイベントを指定し準備完了です。

滞在時間の動作確認

動作確認をします(精読率関連の発火は無視してください)。

まずページを開いた時点でこの3つのタグが発火します。

精読率のケースと同じく、ページを開くと同時に滞在時間計測のタグが発火していますが、これは正しいです。

post_20161017v

配列の最初の値(この例では10秒)を過ぎるまでは動きがありません。

10秒経つと、stayTimeトリガーが叩かれ、stayTimeイベントが発動します。

post_20161017w

GTMはURLパスと滞在時間の値をセットにしてGAに投げ、GAは受け取った値をイベントとして記録します。

post_20161017x

この例では記録時間を3つにしていますので、その時間が来るたびに同じ動作を繰り返します。

滞在時間測定についての解説は以上です。

JavaScriptコードのデバッグ方法

カスタムHTMLにオリジナルのJSコードを使う時はデバッグや変数のトレースをしながら開発を進める必要があります。

変数をalert();してもよいのですが、いちいちウィンドウを閉じるのが面倒です。

そこで私は、console.log(); をオススメします。

post_20161017y

この関数を使うと、Google Chromeの開発者ウィンドウ(Macですとoption+command+i/Windowsですとctrl+shift+i)のconsoleタブの中に、指定した値がリアルタイムで表示されていきます。

滞在時間測定のタグの中にデバッグ用の行を残してありますので、各変数がどんな感じで動いているのか、参考になればと思います。

今回の滞在時間の例では、ウィンドウを開いた時の時間を記録。経過時間と配列の何番目まで進んでいるかが1秒おきに表示され、また、配列の最後まで行くとタイマーイベントが停止する様子が分かります。

まとめ

大変な長丁場、お疲れさまでした。

本エントリではこの流れについて、精読率と滞在時間の例を上げて説明しました。

タグマネの記事は多くあり、確かに書かれている通りに設定すれば書かれてある通りのものが計測できます。

しかし実際にこういう事をしたいと思った時に、どうすればよいか分からず手が止まってしまいます。

それは各タグや変数、トリガーが、お互いにどのように関連しいつ何がなぜ動いているのか。それが分かりづらいからだと思い、このエントリを書きました。

なお私は清水誠さんのGTMセミナーに参加し、それまでより一段高いレベルでのGTMの面白さを知りました。

その時の体験は、この記事を書く大きな原動力となっています。

この記事が、みなさんのGTM開発の助けになることを願います。

デジタル神無月でも各種計測ツールを配布します

ちょうど明日と明後日(2016年10月19,20日)に、デジタル神無月というイベントがあります。

これは西日本最大級のデジタルマーケティングイベントです。

このイベントでは参加者特典として、さまざまなツールを公開します。その中にはアンダス平野さん謹製の滞在時間や精読率測定のツールも含まれています。

自分で作る必要はないという方は、こちらのツールを使われると手間が省けて良いでしょう。

チケット、残り少なくなっております。ぜひご参加ください。

banner_digital_kannaduki

また、筆者も運営側として参加しています。このエントリについてのご質問などもしあれば会場で捕まえてください。