Google広告の動的リマーケティング(GDR)を、GTM(Googleタグマネージャ)で実装する方法

リターゲティング施策の中でも効果が高い動的リターゲティング(ダイナミックリターゲティング)。

この記事では、Google広告の動的リマーケティング(GDR)を、Googleタグマネージャー(GTM)で実装する方法について解説します。

しかしこれは他のメニューと比較して、かなり技術的な難易度が高い施策です。

なぜならGTMでGDRを実装するには、「この画面でこのボタンを押してこう入力すればOK」というわけにはいかず、サイトの構造やページの作りによって、やらないといけない事が大きく変わってくるからです。

マーケティング担当とエンジニアと制作担当が、力を合わせて進める必要があります。

前提

この記事では、

https://shop.sherlocks.co.jp/

というURLのECサイトを例とし、

  • トップページ → https://shop.sherlocks.co.jp/
  • カテゴリページ → https://shop.sherlocks.co.jp/category/hoge(カテゴリ名やカテゴリコード)/
  • 商品ページ → https://shop.sherlocks.co.jp/products/12345(商品コード)/
  • カート → https://shop.sherlocks.co.jp/cart/
  • サンクスページ → https://shop.sherlocks.co.jp/thanks/

というサイト構造になっているとして話を進めます。

Google広告の設定

オーディエンスソース→オーディエンスソース→Google広告タグの右上三点→ソースの編集を開きます。

この画面で通常のリマーケティングでは「このデータソースから~」の方を選んでいると思いますが、動的リマケではもう片方の「広告のパーソナライズに~」の方を選択します。

リマーケティング→広告のパーソナライズに~を選択→業種「小売」にチェックを入れてください。


そして画面下に出てくる、

  • ecomm_pagetype
  • ecomm_prodid
  • ecomm_totalvalue

の3つの変数にチェックを入れてから、「保存して次へ」を押してください。

なお「保存して次へ」を押したあとの画面に出てくる情報は、不要なので、「次へ」「終了」を押して閉じてください。

データフィード(Google Merchant Center)の設定

先ほどGoogle広告の画面で選んだ業種によって、使用するデータフィードが違います。

この記事はECサイト(小売)を例にしていますので、Google Merchant Centerにデータフィードを登録し、Google広告とリンクしてください。

場所が分かりにくいんですが、画面右上の三点→アカウントのリンク からリンクできます。

ホテル・求人など、小売以外の場合は、Google広告のビジネスデータフィード(場所は設定→ビジネスデータ)に登録してください(この記事では扱いません)。

Google Tag Managerの設定

DataLayer変数を作成する

以下4つのユーザー定義変数を作成してください。 なおecomm_から始まる3つはGoogle広告の予約語のため、変数名を変更してはいけません。

  • ecomm_pagetype
  • ecomm_prodid
  • ecomm_totalvalue
  • google_tag_params

ダイナミックリタゲのトリガーを作成する

カスタムイベントを作成し、 dynamic_remarketing という名前をつけてください。
イベント名に dynamic_remarketing と入力し、発生場所を「全てのカスタムイベント」にしてください。

ダイナミックリタゲ用のリマケタグを作成する

コンバージョンIDを入力し、データレイヤーを使用→データレイヤー変数に {{google_tag_params}} を入力してください。 入力時に候補が出てこなかったら、前項で google_tag_params 変数を設定し忘れていますので、確認してください。

ページから変数を取得しGTMへ渡すタグを作成する

カスタムHTMLにて、以下のようなタグを作成してください。
※GDRをGTMで実装する場合はこの辺が最大の難関になるかと思います。
サイトごとに適したコードを書く必要があるため、このコードをコピペしただけでは動きません。

<script>
var root = window.location.pathname;
var pathVal = window.location.href;
var pid = '';
var ptype = '';
var tot = 0.0;
if (root == "/") {
ptype = 'home';
}
else if(root.match('/products/')){
// URLの中に/products/という文字列があれば、それは商品詳細ページであると判定し、URLから商品コードを取得 pid = window.location .pathname.split('/products/')[1]; ptype = 'product';
//ページタイプを商品詳細ページに設定 tot = jQuery('p.price').text().replace(/[^0-9.]/g,'');
//ページ内のDOMから価格を取得 } else if(pathVal.indexOf('/category')>-1){ ptype = 'category'; } else if(pathVal.indexOf('/cart')>-1){ pid = window.location.href.split('/cart')[1]; ptype = 'cart'; } else if(pathVal.indexOf('/thanks.php')>-1){ ptype = 'purchase'; } else { ptype = 'other'; } var google_tag_params = { ecomm_prodid: pid, ecomm_pagetype: ptype, ecomm_totalvalue: parseFloat(tot) }; dataLayer.push({ 'google_tag_params': window.google_tag_params, 'event': 'dynamic_remarketing' }); </script>

このコードでやっていることはつまるところ、「ページ種別・商品コード・価格の3つの値を、GTMを経由してGoogle広告へ渡す」です。 以下、詳しく解説します。
まず、URLからそのページの種類を判定し、必要となる3つの値をページから取ってきます。

  • 商品ページであれば、ページの種類を持たせる変数 ptype に product を代入します。また同時に、商品価格を持たせる変数 tot に、価格を代入します。

この例ではURLから商品コードを取得し、商品コード変数 pid に代入しています。
ページ内の要素から取れるならそれでも問題ありません。
また同様に、jQueryを使ってページ内のDOMから価格を取得し、価格変数 tot に代入しています。

  • トップページであれば、ページタイプ変数 ptype に home を代入。
  • カテゴリページであれば、ページタイプ変数 ptype に category を代入。
  • カートページであれば、ページタイプ変数 ptype に cart を代入。
  • サンクスページであれば、ページタイプ変数 ptype に purchase を代入。
  • その他のページであれば、ページタイプ変数 ptype に other を代入。

商品ページ以外の場合は、商品コードや価格の変数には何も代入しません。
取得した pid, ptype, tot の値を、google_tag_params という配列に持たせ、dataLayer.push();します。
同時に、dynamic_remarketingというカスタムイベントをコールし、先ほど作成した dynnamic_remarketing というトリガーを引きます。
このトリガーは「ADW_ダイナミックリマケ」というタグにつながっているため、このタグが発火し、その時に goole_tag_params(の中に入っている3つの変数) がGoogle広告へと渡されるという仕組みです。
ここの動きがこのダイナミックリマケの、キモとなる仕掛けの部分です。
続いて「ウインドウの読み込み」トリガーを作成し、このタグのトリガー に設定してください。
DOMを読んでページ内の値を取ってくる必要があるわけですから、ページビューではなく、ページの読み込みが完了した時に発火させます。
これでこのタグの設定は終わりです。なおここまで終わると、タグ・トリガー・変数はそれぞれこのようになっていると思います。


動的リマーケティングキャンペーンの作成

Google広告でキャンペーンを作成する時に、ここにチェックを入れ「小売」を選択してください。


動作確認

これらを満たせば完璧というわけではありませんが、以下の項目が全てOKであれば、まず動くと考えて良いのではないかと思われます。

商品ページでダイナミックリマケタグが発火している。

GTMのプレビューモードで、ページの種類ごと(トップページ・カテゴリページ・商品ページ)に、適切なタグが発火しているかを確認します。


その際、各値がDataLayer変数に渡されている。

ここがちゃんと渡ってない時は、前述の「リマケ変数取得タグ」の動作を再度確認してください。 ここに値が入っていれば、ページからGTMへは値が渡っています。


Google広告にパラメーターが渡っている。

GTMからGoogle広告へ、前項のDataLayer変数がパラメーターとして、Google広告に渡されているかを確認します。
オーディエンスマネージャー→オーディエンスソース→Google広告タグ→詳細 で、パラメーター別に見ることができます。
値が渡ってないと、ecomm_xxx の値が0のままです。


なおこの値の更新には最大1日ほどのタイムラグがあるようです。

フィードが正しく登録されている

Merchant Centerに登録されているフィードは、有効になっていますか?


広告のプレビューを確認する

あとは広告を作成してみて、プレビューでそれっぽい広告が表示されてればおそらくOKなんじゃないかと…。

まとめ

技術的な難易度について

GTMでGDRを実装するのが難しい理由は、前述の通りサイトやページの構造によるところが大きいです。
この例では、商品ページからjQueryで価格を一発で取れたり、URLから正規表現で商品コードが取れたり、またURLからそのページの種類が特定できたりしているので、特に苦労はしていません。

しかし例えば全てのページが、https://shop.sherlocks.co.jp/?p=12345 となるようなURL構造だったりすると、URLからページの種類が特定できないため、実装は困難を極めます。
SEO面での効果改善や、PLA施策への展開なども視野に入れ、サイト構造の再構成を検討したほうが良いかと思います。

また価格がid指定など一発で取ってこれるようなDOM構造になっていなかったり、ページによってDOMが異なる構造だったりするととても苦労しますし、必ずどこかのページでエラーが出てたりするものです。
そういう場合はGDRの実装よりも先に、デザイナさんを呼んでDOMを整えた方が良いでしょう。

ウェブマーケ界で求められている人材

これはつまるところ、HTML/CSSコーディングのような表層から、サイトの構造設計・正規化・データフィードなどバックグラウンドの部分まで、トータルで見渡せる人が必要だ、ということです(これはPLAなどフィードの話が出る時のあるあるですが…)。

もちろん表層デザインだけ、データベースだけなど、それぞれの分野で技術を突き詰めスペシャリストとなるのは、言うまでもなく素晴らしいことです。

しかし、少なくともウェブマーケティングの世界では、それだけでは解決できる問題が年々(相対的に)小さくなっていると感じています。
いま求められているのは、俯瞰的な視点で物事を捉え、より大きな問題を解決するジェネラリストではないでしょうか。と問題を提起し、このエントリを結びます。

Googleタグマネージャ(GTM)とGoogleアナリティクス(GA)を使った開発の進め方

※この記事はGTMの仕様変更に伴い、2018年04月15日に更新されました。

記事の変更点

  • 2017年の10月にGTMで、スクロール率を元に発火するタグが簡単に作れるようになりました。
  • その機能を利用してGAにイベントを送るセクションを書きました。
  • 文中の「精読率」という表現を全て、「スクロール率」に変更しました。
  • プラグインの関係で正しく表示されていなかったソースコードを、正しく表示されるようにしました。

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

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

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

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

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

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

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

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

それではスクロール率と滞在時間について、ひとつずつ解説します。

Googleアナリティクス(GA)でスクロール率を測定するには?

Googleアナリティクスでスクロール率を測定するには、GTMの標準トリガーを使う方法と使わない方法(Javascriptを別途用意するなど)があります。

これまでは上記5つの手順に沿って、変数を設定したりJSコードを書いたりしていましたが、スクロール率を元にトリガーを発火させるだけであれば、もうGTM標準のトリガーを使ったほうが良いです。

実装や発火確認がとにかく簡単で間違いにくい上、デメリットが見当たらないからです。

ただしこの記事の趣旨は、スクロール率を計測することではなく、GTMとGAを使った各種数値の計測を、自分で出来るようになることにあります。

そのため旧来のやり方も記事として残しておきます。

【推奨】スクロール率測定の設定方法(GTMの標準トリガーを使用するケース)

2017年の10月にGTMの機能がアップデートされ、ページのスクロール率を元にトリガーを引けるようになりました。

そのことを受け、2018年の4月にこのセクションが追加されました。

GTMトリガーにスクロール距離が追加

それでは順番に進めていきましょう。

1. 組み込み変数のアクティブ化

GTMからGAへイベントを送る時、スクロール率の何%という値も一緒に投げます。

この値の受け渡しに使う変数はScroll Depth Thresholdという名前が付いていて、初期状態ではOFFになっているためONにしておきます。

変数→組み込み変数→スクロールの下にある、Scroll Depth Thresholdにチェックを入れます。

2. GTMからGAに値を送るイベントタグを作成

スクロールのトリガーが発火した時に、その都度GTMからGAに、イベントトラッキングの信号を送ります。

その時どんなデータを送るのかを、ここで設定します。

今回は、「どのページで」「何%スクロールした」というイベントを送ります。

カテゴリ名は自由に付けられます。ここで付けた名前は、GAのイベントカテゴリに表示されます。

今回アクション欄は「どのページで」に該当するため、{{Page Path}}を選択します(右側の黒い+マークから選択すると間違えません)。

ラベルは「何%スクロールした」に該当するため、{{Scroll Depth Threshold}}%スクロール と入力しておくと分かりやすいでしょう。

ここで{{Page Path}}や{{Scroll Depth Threshold}}が変数名に表示されない場合は、前項の組み込み変数のチェックが入っているかを見直してください。

非インタラクションを真に、オーバーライドにチェックを入れ、トラッキングIDを入力してください。

タグの名前は、「GA-スクロール率計測」にします。

3. GTMで、スクロール距離に応じて発火するトリガーを作成

タグを保存する前に、このままトリガーの作成を行います。

今回は、20%スクロールするごとにGAへイベントを投げるトリガーを作成します。

トリガー→新規→スクロール距離 を選択し、図のように設定してください。

タグの名前は「スクロール率20%毎」とし、このトリガーと、先ほどのタグを保存します。

(ちなみにGTMではアイテム名に半角%が使えないため、全角%にしてあります)

設定は以上です。続いて動作確認のセクション進んでください。

参考記事:スクロール率測定の設定方法(Javascriptを使用するケース)

※このセクションの内容は古く、スクロール率を取るだけであれば読む必要はありません。

ただ、スクロール率ではない他の値を取得する場合は参考になるかと思いますので、記事自体は残しておきます。

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

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

全体の流れ

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

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

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

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

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

GTMの設定項目

  • Scroll Depthタグが発火するページを制限するトリガーを作成(トリガー:LPのみ)
  • Scroll Depthイベントを拾うトリガーを作成(トリガー:スクロール率測定_scrollDistance)
  • Scroll Depthイベントが使用するDataLayer変数を作成(変数:スクロール率)
  • スクロール率を測定するScroll Depthタグを追加(タグ:JS-スクロール率測定)
  • Scroll DepthイベントをGAに投げるタグを作成(タグ:GA-スクロール率測定)

の順に説明します。

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

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

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

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

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

GTMのトリガーの設定

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

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

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

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

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

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

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

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

GTMのカスタムイベントの設定

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

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

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

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

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

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

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

GTMのデータレイヤーの設定

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

「スクロール率」という名前をつけて保存してください。

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

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

4.スクロール率を測定するScroll Depthタグを設置

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

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

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

精読率を測定するscrolldepthタグ

そして図のように、設定のコードを追加します。(上の画像での10~15行目)
▼スクロール量を計測するjavascriptコード

jQuery.scrollDepth({
	percentage:true, //25%ずつの計測をONにする
	userTiming:false,
	pixelDepth:false,
	nonInteraction:true //直帰にしない
});
またタグは、「いつ発火するか?」を設定しなくてはいけません。

特定のページでのみ発火するように設定

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

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

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

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

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

ユニバーサルアナリティクスの設定

カテゴリの値は、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-XXXX');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/
ns.html?id=GTM-XXXX"
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>

▼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のみ計測するテスト用ビューを作って使ってください。

GAのビュー
▲GAのビューリスト

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

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

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

テストの手順と確認方法

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

タグマネのプレビューで発火確認

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

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

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

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

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

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

GAのリアルタイムに表示される

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

GTMで特定のタグの発火状況を確認する 画面左側にScrollDistanceイベントが記録されている。Variablesをクリックすると、そのイベントで受け渡しされた値が参照できる。

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

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

GAの設定画面

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

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

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

精読率ごとにタグが発火する

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

GAにイベントが送られる

スクロール率測定についての解説は以上です。

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

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

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

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

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

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

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

滞在時間測定の設定方法

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

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

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

GAで滞在時間を設定するタグ一覧

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

の順に説明します。

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

滞在時間を測るトリガー

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

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

dataLayer.push({
	'event': 'stayTime',
	'strTime': timerVal
});
という箇所は、stayTimeという名前のトリガーを探し叩きます。

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

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

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

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

滞在時間を測るデータレイヤー変数

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 &gt;= 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つのタグが発火します。

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

GTMで発火確認(滞在時間の例)

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

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

GTMに渡された滞在時間の値

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

GAに送られたイベントアクションとイベントラベル

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

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

JavaScriptコードのデバッグ方法

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

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

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

Javascriptのデバッグは、Chromeの開発者ツールのコンソールを使う

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

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

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

まとめ

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

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

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

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

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

最近はGoogleAdWordsやfacebook広告などで、マイクロコンバージョンを元にユーザリストを作ったりすることも多いと思います。

そういう施策へ活かすこともできるため、きっとこの記事は役に立つことでしょう。

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

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

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