GTMを勉強するのにおすすめの１冊。タグマネージャーのことがわかります。

2018年8月25日 GoogleAnalytics, GoogleTagManager, Webディレクターのお勉強

最近GTMを使って結構特殊なことをすることが多かった。
DOM要素を操ってurlに動的にパラメータをつけたり、GAでイベント計測を行ったり・・・
いろいろ調べて勉強になったので後日記事にもまとめたいと思います。
そんな中で読んだ本で理解したことをサマリしておきます。

あと、ココナラでGA/GTM設定のお手伝いはじめました。
見積依頼をしていただければ内容もカスタマイズしますのでよろしければどうぞ。
お困りですか？ GA/GTMの設定、承ります

読んだ本

リンク

かなり誤字・脱字が多くて笑ってしまいましたwww
でも、ある程度GTMを操作した人が、GTMをより深く使いこなしていくために読むうえでとてもわかりやすく、
読みやすい本でした。自分的には頭がだいぶ整理されてよかったです。
広告タグの設定方法がGTM、YTMそれぞれでわかりやすく記載されているので、広告担当者の方には特におすすめの本です。

学んだこと

１．タグマネージャーの処理の流れ
 ２．GTMの変数について
 ３．GTMのトリガーについて
 ４．GTMとYTM(Yahoo Tag Manager)の違い
 ５．その他（タグを支える技術とノウハウ）
６．まとめ

１．タグマネージャーの処理の流れ

Googleタグマネージャーは以下の順で処理される。

WebブラウザがWebサーバにコンテンツを要求
WebサーバがGTMのタグが含まれたWebページを返却
WebブラウザがGoogleタグマネージャ本体(gtm.js)を要求する
Googleタグマネージャが本体(gtm.js)をWebブラウザに返却する
Webブラウザがgtm.jsを実行し、各サービスに対してデータ送信を行う。

当たり前の知識ではあるんですが、GTMで広告の計測やカスタムhtmlを仕込んだりする場合、
上記のことはしっかり理解しておく必要があります。
場合に応じてGTMで設定するタグのトリガはDomReadyだよね、
みたいな話をする上で前提の知識になるので。

2．GTMの変数について

GTMには事前に用意されている「組み込み変数」と、ユーザーが自由に設定する「ユーザー定義変数」の2種類が存在する。

組み込み変数

GTMの中でよく使われる変数は「組み込み変数」として事前設定されています。
この変数は下記のように用途や種類に合わせてグルーピングされています。

グループ名	用途・種類
ページ	URLや参照元など、ページに関する情報をまとめた変数
ユーティリティ	コンテナやバージョンなど、GTMの活用に関する情報
エラー	当該ページで発生したエラーに関する情報
クリック	クリックした要素の名前・ID・リンクといった情報。クリック計測で使う
フォーム	フォームに入力した情報を計測するときに利用
履歴	Ajaxなど、ページ遷移が発生しないURLの更新時に利用

ユーザー定義変数

自分で変数を定義することも可能です。
新規に変数を作成する場合の変数タイプは以下のような意味になっています。

変数タイプ	設定できる内容など
ナビゲーション	閲覧しているページのURL、参照元など。上記のほかよく使う「パス」は組み込み変数の「PagePath」と同じでURLのディレクトリからファイル名までの文字列
ページ変数	閲覧しているページに存在している変数をデータソースに指定する
ページ要素	ページのhtmlパーツとして記述されている情報を変数のデータソースに指定する ※ページタグの実行タイミングに要注意。自動イベント変数はクリックされたおぷジェクトの要素名やID、リンク先といった情報、もしくは履歴の変更が発生したときの情報を取得できる
ユーティリティ	Googleタグマネージャの内部情報、タグ管理をより便利に行うための変数
コンテナデータ	現在利用しているタグマネージャのコンテナ情報

上記の中でも「ユーティリティ」にある「ルックアップテーブル」は強力なツールです。
GTM上に条件に合わせて返却する値をテーブル化しておくことができるため、
サーバに急遽新しいテーブルを用意しなければならない場合など、小さいテーブルであれば代用ができてしまいます
。恐ろしい・・・。

3．GTMのトリガーについて

タグの実行条件である「トリガー」。いろいろ設定が可能ですが、設定できる内容の微妙な違いについてメモ。

ページビュー

GTMの中でおそらく最もよく使われるトリガー。

変数タイプ	タイミング
ページビュー	GTM本体（gtm.js)が呼ばれたタイミングで実行される
DOM Ready	WebブラウザがHTMLを読み込んで解釈が終わったタイミングで実行される
ウィンドウの読み込み	HTMLに含まれる画像など外部ファイルの読み込みが完了したタイミングで実行される

４．GTMとYTM(Yahoo Tag Manager)の違い

YTMの方が対応しているタグの種類が豊富。
GTMはGoogleのサービスもしくは一部の海外ベンダーのサービスに限定されているが、YTMはGoogleだけでなく、Criteoなどのシェアの高いサービス、フリークアウトやバリューコマースといった日本国内を中心にサービス展開しているタグにも対応している。
なので、広告出稿の範囲がGoogle、Yahoo、Criteoで、サイト分析もGAで問題ない場合はGTMだけの導入で基本的には十分です。逆に幅広いアドネットワークへの出稿や、GAを使わないということであればYTMの導入を検討するべきです。
この他、タグマネージャーの選定からタグマネージャーの導入設計・検証、運用方法等についてもこの本には記載されているので、タグの導入を受注することになる人は一度この本で頭を整理して、どのように案件を進めていくか俯瞰してみるのがよいと思います。

５．その他（タグを支える技術とノウハウ）

GAに送信されているパラメータ

基本的なものは下記のようなものがあるが、イベント計測等GA上の設定を増やしていくとパラメータの数も増える。
Googleが提供する開発者ガイド(Measurement Protocol)のパラメータリファレンスを参照すること。

パラメータ	概要
t	計測の種類（pageviewなど）
dl	ドキュメントのURL
dt	ドキュメントのタイトル
cid:	ブラウザのクッキー
tid	GAのトラッキングID

動作確認ツール

ツール名	概要
Ghostery	広告目的に利用されているタグの実装状況確認ツール。普及率の低いタグでは認識できない場合あり
Google Tag Assistant	Google系タグの実装状況確認ツール。対象はGoogle系に限られるが、GAで計測できている内容の細かい点までデータが確認でき、「レコード機能」で複数ページにわたるサイト行動を記録に残したりGA設定結果をリアルタイムに把握したりすることができる。
WASP.inspector	どのタグがどこから呼び出されているか調査するツール

JavaScriptで利用できる情報・できない情報

利用できる情報は下記から取得。

オブジェクト名	内容
Document	ページのコンテンツに関する情報
Window	ウィンドウに関する情報
Location	WebページのURLに関する情報
History	閲覧したページの履歴に関する情報
Screen	サイズなど画面に関する情報
Navigator	バージョンなどブラウザに関する情報

以下は取得できない。

Webサーバに保存されている情報（ページにない情報）
HTTP以外の通信レイヤーで発生する情報（IPアドレス、Macアドレスなど）
セキュリティ上アクセスできない情報（他サイトのCookieやiframeなどの情報）
OS内部の情報（ブラウザ以外に起動しているアプリ情報）
HDDに保存されている情報（Webカメラなどのデバイス情報であって、ユーザー（ブラウザ）が許可した場合を除く

６．まとめ

なとなくタグマネージャーを使い始めて今に至る方には、一度知識の棚卸をするという意味でおすすめしたい本です。
タグマネージャーがいかに強力なツールか再認識できます。
もちろんこれから使い始める方にも細かく設定手順が書かれていてよいと思います。
最初からこういう本を読みながら使い始めればいろいろと苦労はしなかったんだろうなぁって思いました。
ときどき頭を整理することも大事ですね☆

リンク

Webの学習