dackdive's blog

新米webエンジニアによる技術ブログ。JavaScript(React), Salesforce, Python など

「現場で使える Googleタグマネージャー実践入門」を読んだ

自分で作ったサイトのアクセス数分析ができるようになりたいなと思って Google アナリティクスとかを調べていたところ、Google タグマネージャー(以下 GTM)という存在を知ったので一冊本を買って読んでみた。

この本について

現場で使える Googleタグマネージャー実践入門 | マイナビブックス より引用。

■本書の特徴
Googleタグマネージャーの学習環境を構築できる
→ミスを恐れずにトライアンドエラーできるよう、本書では学習環境の構築から解説します。デモ環境で学習できるので、だれかに迷惑をかけることなく実践できます。
 
・逆引きとして、用途に合わせた項目がすぐ見つかる
→実際の現場でよく使われる事例を中心にまとめてあります。困りごとからすぐに事例を見つけられます。  
UAからGA4の移行にも対応できる →UAからGA4への移行にも対応できるよう、それぞれの設定方法を併記しています。新規設定だけでなく、移行にも利用いただけます。

発売日が2022年06月22日で GTM でググった中では新しく、また自分は手を動かしながら学べる系の本が好きなので良さそうな印象を受けこの本にした。

章の構成は以下。

Chapter1 Googleタグマネージャーとは
Chapter2 学習環境の構築
Chapter3 Googleタグマネージャーの導入
Chapter4 基本操作
Chapter5 現場で使える逆引きレシピ 基本編
Chapter6 現場で使える逆引きレシピ 応用編
Appendix 現場で役立つTips

感想

「GTM なんもわからん!」という状態でまず読む本としては良さそうに思った。
自分はある程度ネットの情報を調べた後にこの本を読んだのだが、GTM ってなんなの?GA との関係性は?とか、GTM の構成要素であるタグ・トリガー・変数の説明などは非常にわかりやすかった。

手を動かす系の本として、気軽に試せる環境を提供してくれてるのも良かった点。ただ1から順を追って学ぶハンズオンっぽい内容ではなく、後半(Chapter 5 & 6)によくあるユースケースをカバーしたレシピ集があるので気になったものをかいつまんで試す感じ。

レシピの一部を載せる。

# Chapter5 現場で使える逆引きレシピ 基本編

5-1 Googleアナリティクスの導入(UA, GA4)
5-2 外部リンククリック数の計測(UA, GA4)
5-3 メール送信(mailto)クリック数の計測(UA, GA4)
5-4 電話番号タップ数の計測(UA, GA4)
5-5 ボタンのクリック数の計測(UA, GA4)
5-6 SNSボタンのクリック数の計測(UA, GA4)
...

# Chapter6 現場で使える逆引きレシピ 応用編

6-1 オリジナルの変数作成
6-2 さまざまなファイルクリックの計測
6-3 仮想ページビュー数の計測
6-4 精読ページビューの計測
6-5 ブログの執筆者名・カテゴリー名の計測
...

書籍の内容とは関係ないが、最近本を読むときに「最初から最後まで全部読んですべてを理解しようとしない」を意識していて、それがやりやすい本でもあった。
実際 Chapter 4 の途中からはさっと目を通しただけだし、Chapter 5, 6 のレシピもとりあえず気になる Chapter 5 の一部だけやって、残りは必要になったときに読み返そう、という感じで 3, 4 時間程度で読了した。

環境は WordPress で、GTM もプラグインとしてインストールするため、開発者目線では React などで作ったアプリケーションにどう組み込むの?というのはイメージしにくいかも。ここについては Appendix 6 でコードスニペットを直接埋め込む方法も紹介されてはいる。

1つ残念だった点を挙げると、自分は GTM の中でも「データレイヤー」という機能が調べてもよくわからないな〜というのが本を買ったモチベーションだったのだが、データレイヤーについては説明もあっさりしていて、また手を動かして試すこともできなかった。(自分の理解では、データレイヤーは JavaScript を書いてデータを送信する必要があるのだが、WordPress でそれをやる方法がよくわからずだった)

学習メモ

Chapter 1 Google タグマネージャーとは

  • GTMはタグマネージメントツール=「さまざまなタグを一元管理できるツール」
  • Googleプロダクトとの親和性◎。GA4は測定IDを登録するだけで導入できる
  • マスタータグのみで複数のタグを一元管理できる:「ワンタグ」
    • 簡単にタグの追加・削除ができる
  • 1-2 Googleタグマネージャーの三大要素(タグ・トリガー・変数)
    • タグ
    • トリガー
      • 設定したタグを発動させるための「条件を設定する」こと
      • 例:サイト全ページのページビュー計測をGAで行う場合、「ページビュー」というトリガータイプを「全ページ」に発生させる
    • 変数
      • 例:「Page URL」というGTMの変数は現在のウェブページのURLを返す
      • あらかじめ用意された「組み込み変数」と、ユーザー側で新規に設定できる「ユーザー定義変数」の2種類

Chapter 4 基本操作

  • ゴール
    • プロダクト:GA(ユニバーサルアナリティクス)
    • 設定:対象サイトのすべてのページビューを計測できるようにする
  • 4-2 タグの種類について
    1. サポートされているタグ
      • Googleが公式にサポートしているタグ。GAやGoogle広告など
    2. コミュニティテンプレートギャラリー
    3. カスタムタグ
  • 4-9 データレイヤー変数
    • デフォルトでは取得できない独自データをGTMに渡すことで、GTM内でタグやトリガーとして活用できる仕組み

    サイト上でGTMのスニペットコードが読み込まれるごとに、データレイヤーの中にサイトで得たデータが送られ、その送られたデータを基にタグやトリガーが動作しています。つまり、GTMの機能としてさまざまな「タグ」や「トリガー」を利用できますが、それらはデータレイヤーの中に貯まっているデータを活用して動作しているという状況です

    • データレイヤー変数の作り方
      1. JavaScriptの実装
      2. データレイヤー変数の定義
      3. カスタムイベントの定義
      4. カスタムディメンションの作成