Googleタグマネージャーとは

Googleタグマネージャーとは、複数のタグを一括管理するツールである。

Googleタグマネージャー(GTM)導入のメリット

タグの管理が簡単になる

解析ツールの導入などでコードを追加する際に個別にHTMLソースをいじらなくても、GTMから一括ですべてのページのタグを確認・変更することが可能になる。

外注コストを低減できる

Webサイトの更新を外部に委託しているようなケースで、実際のところはタグの管理くらいしかしていないにも関わらず、定期コストが発生している場合がある。

このようなケースではタグの更新をGTMで内製化することで外注コストを低減することができる。

あるいは、Webサイトの編集権限は与えたくないがアクセス解析系の作業だけ外部に委託したい場合にも、GTMの権限を付与することで対応が可能になり、管理コストが低減する。

ページの表示速度が速くなる

サイト内に個別のタグが増えれば増えるほど、ページの読み込みと同期するタグが増えるためWebサイトの表示速度が低下する。

GTMを導入することですべてのタグが非同期タグとして1コードにまとまるため、Webサイトの動作を軽量化することが可能。

高度な分析が可能になる

後述するユニバーサルアナリティクス(旧GA)を使用する場合、「ページのスクロール率」や「詳細な滞在時間」をそれ単体で計測することができない。

GTMを使用することでこれらの計測が可能になるため、アクセス解析の精度をより高めることに寄与する。

Googleタグマネージャーを使用しない場合

使用するタグをそのままWebサイトに記載することになり、タグが複数になる場合管理が煩雑になる。

Googleタグマネージャーを使用した場合

Webサイト内に貼るタグを一元管理することで、どのページにどのコードを貼ったのかわからなくなるというミスや、編集時に間違えてタグを消してしまうというミスを防止することができる。

Googleタグマネージャーを使用することで、「ページのスクロール率」や「詳細な滞在時間」など、より細かいユーザーの行動を追うことが出来る。

結果的に、

  • ランディングページに◯秒以上滞在したユーザーへのリマーケティング広告の配信
  • ランディングページを◯%以上読み、◯◯をクリックしたユーザーへのリマーケティング広告の配信

といったリマーケティング広告の詳細な設定が可能となる。

Googleタグマネージャーの初期設定

Googleタグマネージャーの応用設定

ランディングページの精読率チェック(スクロール率)

リマーケティングのリストを作成する際、ただLPに訪問したユーザーに配信すると、

  • LPをよく見ること無く直帰したユーザー
  • LPをしっかりと見たユーザー

の両方に配信されるため効率が悪くなる。

「LPをしっかりと見たユーザー」にだけ配信するために、まずはこのユーザーを定義する。

LPをしっかりと見たユーザーの定義

本記事では「75%以上スクロールした」ユーザーと定義する。

  • 新しいタグを作成する
    • タグの設定
      • カスタムHTMLを追加する
      • 以下のコードを貼り付ける
      • 「document.white をサポートする」にチェックを入れる
    • トリガーの設定
      • 「All Pages」をクリック
<script>
/*!
 * @preserve
 * jquery.scrolldepth.js | v1.0
 * Copyright (c) 2016 Rob Flaherty (@robflaherty)
 * Licensed under the MIT and GPL licenses.
 */
!function(e){"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof module&&module.exports?module.exports=e(require("jquery")):e(jQuery)}(function(e){"use strict";var n,t,r,o,i={minHeight:0,elements:[],percentage:!0,userTiming:!0,pixelDepth:!0,nonInteraction:!0,gaGlobal:!1,gtmOverride:!1,trackerName:!1,dataLayer:"dataLayer"},a=e(window),l=[],c=!1,u=0;return e.scrollDepth=function(p){function s(e,i,a,l){var c=p.trackerName?p.trackerName+".send":"send";o?(o({event:"ScrollDistance",eventCategory:"Scroll Depth",eventAction:e,eventLabel:i,eventValue:1,eventNonInteraction:p.nonInteraction}),p.pixelDepth&&arguments.length>2&&a>u&&(u=a,o({event:"ScrollDistance",eventCategory:"Scroll Depth",eventAction:"Pixel Depth",eventLabel:d(a),eventValue:1,eventNonInteraction:p.nonInteraction})),p.userTiming&&arguments.length>3&&o({event:"ScrollTiming",eventCategory:"Scroll Depth",eventAction:e,eventLabel:i,eventTiming:l})):(n&&(window[r](c,"event","Scroll Depth",e,i,1,{nonInteraction:p.nonInteraction}),p.pixelDepth&&arguments.length>2&&a>u&&(u=a,window[r](c,"event","Scroll Depth","Pixel Depth",d(a),1,{nonInteraction:p.nonInteraction})),p.userTiming&&arguments.length>3&&window[r](c,"timing","Scroll Depth",e,l,i)),t&&(_gaq.push(["_trackEvent","Scroll Depth",e,i,1,p.nonInteraction]),p.pixelDepth&&arguments.length>2&&a>u&&(u=a,_gaq.push(["_trackEvent","Scroll Depth","Pixel Depth",d(a),1,p.nonInteraction])),p.userTiming&&arguments.length>3&&_gaq.push(["_trackTiming","Scroll Depth",e,l,i,100])))}function h(e){return{"25%":parseInt(.25*e,10),"50%":parseInt(.5*e,10),"75%":parseInt(.75*e,10),"100%":e-5}}function g(n,t,r){e.each(n,function(n,o){-1===e.inArray(n,l)&&t>=o&&(s("Percentage",n,t,r),l.push(n))})}function f(n,t,r){e.each(n,function(n,o){-1===e.inArray(o,l)&&e(o).length&&t>=e(o).offset().top&&(s("Elements",o,t,r),l.push(o))})}function d(e){return(250*Math.floor(e/250)).toString()}function m(){y()}function v(e,n){var t,r,o,i=null,a=0,l=function(){a=new Date,i=null,o=e.apply(t,r)};return function(){var c=new Date;a||(a=c);var u=n-(c-a);return t=this,r=arguments,0>=u?(clearTimeout(i),i=null,a=c,o=e.apply(t,r)):i||(i=setTimeout(l,u)),o}}function y(){c=!0,a.on("scroll.scrollDepth",v(function(){var n=e(document).height(),t=window.innerHeight?window.innerHeight:a.height(),r=a.scrollTop()+t,o=h(n),i=+new Date-D;return l.length>=p.elements.length+(p.percentage?4:0)?(a.off("scroll.scrollDepth"),void(c=!1)):(p.elements&&f(p.elements,r,i),void(p.percentage&&g(o,r,i)))},500))}var D=+new Date;p=e.extend({},i,p),e(document).height()<p.minHeight||(p.gaGlobal?(n=!0,r=p.gaGlobal):"function"==typeof ga?(n=!0,r="ga"):"function"==typeof __gaTracker&&(n=!0,r="__gaTracker"),"undefined"!=typeof _gaq&&"function"==typeof _gaq.push&&(t=!0),"function"==typeof p.eventHandler?o=p.eventHandler:"undefined"==typeof window[p.dataLayer]||"function"!=typeof window[p.dataLayer].push||p.gtmOverride||(o=function(e){window[p.dataLayer].push(e)}),e.scrollDepth.reset=function(){l=[],u=0,a.off("scroll.scrollDepth"),y()},e.scrollDepth.addElements=function(n){"undefined"!=typeof n&&e.isArray(n)&&(e.merge(p.elements,n),c||y())},e.scrollDepth.removeElements=function(n){"undefined"!=typeof n&&e.isArray(n)&&e.each(n,function(n,t){var r=e.inArray(t,p.elements),o=e.inArray(t,l);-1!=r&&p.elements.splice(r,1),-1!=o&&l.splice(o,1)})},m())},e.scrollDepth});
</script>
  
<script>  
jQuery.scrollDepth({
  percentage: true,
  userTiming: false,
  pixelDepth: false
});
</script>
  • 変数の作成(eventCategory)
    • 「データレイヤーの変数」をクリック
    • データレイヤーの変数名に「eventCategory」を入力
    • データレイヤーのバージョンで「バージョン2」を選択
  • 変数の作成(eventLabel)
    1. 「データレイヤーの変数」をクリック
    2. データレイヤーの変数名に「eventLabel」を入力
    3. データレイヤーのバージョンで「バージョン2」を選択
  • トリガーの作成
    • 「カスタムイベント」をクリック
    • イベント名に「ScrollDistance」を入力
  • 新しいタグを作成する
    • タグの設定
      • 「ユニバーサルアナリティクス」をクリック
      • トラッキングタイプは「イベント」
      • カテゴリは「eventCategory」
      • アクションは「Page Path」
      • ラベルは「eventLabel」
      • 非インタラクションヒットは「真」
      • Googleアナリティクス設定でトラッキングIDを選択
    • トリガーの設定
      • 「ScrollDistance」を選択
  • 新規作成したタグを保存し公開する

Googleアナリティクスでのスクロール率の確認方法

準備中

スクロール率に応じた広告配信方法

準備中

ランディングページの精読率チェック(滞在時間)

縦方向の長さが短いLPの場合、スクロール率では精読率を正確に計測できない場合がある。

よってスクロール率とは別の計測方法として、LPの滞在時間も計測項目とする。

LPをしっかりと見たユーザーの定義

本記事では「150秒以上滞在した」ユーザーと定義する。

  • 変数の作成(JS_ElapsedTime)
    • 「カスタム JavaScript」をクリック
    • 変数名に「JS_ElapsedTime」を入力
    • 以下のコードを貼り付ける
function() {
    return Math.floor({{gtm.timerElapsedTime}} / 1000);
}
  • 変数の作成(JS_ElapsedTime)
    • 「データレイヤーの変数」をクリック
    • データレイヤーの変数名に「gtm.timerElapsedTime」を入力
    • データレイヤーのバージョンで「バージョン2」を選択
  • トリガーの作成
    • 「タイマー」をクリック
    • イベント名は「gtm.timer」(最初から入力されている)
    • 間隔は「10000」
    • 制限は「30」
    • これらすべての条件が true の場合にこのトリガーを有効化
      1. 「Page URL」
      2. 「正規表現に一致」
      3. .*ドメイン名.*(ドメインに使用されている「.」は「\.」と入力する)
    • このトリガーの発生場所は「すべてのタイマー」
    • トリガーの名前は「10秒ごとに30回計測」(任意)
  • 新しいタグを作成する
    • タグの設定
      • 「ユニバーサルアナリティクス」をクリック
      • トラッキングタイプは「イベント」
      • カテゴリは「滞在時間」
      • アクションは「Page Path」
      • ラベルは「JS_ElapsedTime」
        {{JS_ElapsedTime}}の後ろに半角スペースを入れてから「秒」を入力する
      • 非インタラクションヒットは「真」
      • Googleアナリティクス設定でトラッキングIDを選択
    • トリガーの設定
      • 「10秒ごとに合計30回計測」を選択
  • 新規作成したタグを保存し公開する

Googleアナリティクスでの滞在時間の確認方法

準備中

滞在時間に応じた広告配信方法

準備中

クリックの計測

LPの精読率とは別に、何かしらのボタン(資料請求やPDFなど)をクリックした人も商品・サービスの購買意欲が高いとみなすことができる。

「どのボタンをクリックしたか」を計測し、適切なユーザーに広告を出稿することができれば効率的だ。

商品やサービスの購買意欲が高いユーザーの定義

本記事では「ページ内のPDFダウンロードボタンをクリックした」ユーザーと定義する。

なお、テキストリンクのみを対象とし、画像リンクは計測対象外とする。

  • 変数の設定
    • 組み込み変数に「Click URL」と「Click Text」を追加
  • トリガーの作成
    • 「リンクのみ」をクリック
    • このトリガーの発生場所は「一部のリンククリック」
    • イベント発生時にこれらすべての条件が true の場合にこのトリガーを配信
      • 「Click URL」
      • 「正規表現に一致」
      • 「pdf」
    • トリガーの名前は「PDFリンクのクリック」(任意)
  • 新しいタグを作成する
    • タグの設定
      • 「ユニバーサルアナリティクス」をクリック
      • トラッキングタイプは「イベント」
      • カテゴリは「クリック」
      • アクションは「Click Text」
      • 非インタラクションヒットは「真」
      • Googleアナリティクス設定でトラッキングIDを選択
    • トリガーの設定「PDFリンクのクリック」を選択
  • 新規作成したタグを保存し公開する

Googleアナリティクスでのクリックの確認方法

準備中

リンククリックに応じた広告配信方法

準備中