Google Tag Manager(GTM )を使ってできることをプログラマ視点でまとめる

Google Tag Manager(GTM) の存在は知っているけど、何ができるのかがわからないというエンジニア、プログラマもいます。
そのような人に、Google Tag Manager(GTM) できることの概要を説明したい場合もあるので、説明したい内容を記載しておきます。
Google Tag Manager は略すと GTM。 以下 GTM と呼称します。

対象者

説明の対象者は以下の通りです。

• GTM の存在は知っているが、 GTM 自体を操作したことがない。
• GTM の存在は知っているが、何ができるのかがわからない。
• 開発者以外の立場、GTM を操作もしているし、知っている。
• 開発者の立場、GTM の存在を知らない。

GTM とは

GTM とは何かを、開発者以外の一般的な視点からの解釈、開発者視点でみた視点からの解釈で記載します。

• 一般的な視点からみた解釈
  Google が提供する タグマネジメントツールです。
  Google Analytics タグ、ChatBot ツールのタグ 等 外部サービスの JavaScript タグの管理ができるツールです。
  似たようなツールとして、Yahoo!タグマネージャー もあります。
  どこがどう違うのかは、以下の GTM と Yahoo!タグマネージャの比較記事が参考になりました。

  • Googleタグマネージャとは？初心者でも分かる利用方法と導入手順｜ferret [フェレット]
  • タグマネージャーの重要性と用途で使い分けるYahoo!タグマネージャーとGoogleタグマネージャ｜アナグラム株式会社

• 開発者視点からみた解釈
  Google が提供する マーケテイングテクノロジスト向けの JavaScript の統合開発環境 です。
  JAVA 屋観点だと、 Eclipse、構成管理ツール、Maven がごった煮で提供されているイメージです。
  マーケテイングテクノロジスト という言葉はなんだかよくわからない言葉ですが、この領域の情報が記載されているサイトは以下があるかと思います。

  • Google Tag Manager and Google Analytics | Simo Ahava’s blog
  • 清水誠メモ
  • SEM Technology
  • コラム | アユダンテ株式会社

タグマネジメントツールとしての GTM

タグマネジメントツールとしての GTM 、基本的なユースケースを説明します。
GTM の おすすめタグ を使い JavaScript をサイト上に埋め込むことなく、Google Analytics のタグ配信が行えます。
おすすめタグとしては以下があります。

Google Analytics で サイトの PageView を記録する。

以下の手順でサイト全体のページビューが記録できます。

1. Google Analytics タグ の設定をする。
2. トリガーとして全てのページビューを設定する。

設定の流れは GTM コンテナの導入部からの記載がある以下の記事を参考にするのがよいかと思います。

• Googleタグマネージャでアナリティクスを管理しよう！メリット・ページビュー設定方法 | Goodpatch Blog

スクロールイベントをトリガーにして、Google Analytics にスクロール率を送信する。

トリガーは複数あり、スクロール距離を使うと、スクロール率の測定が可能です。

1. Google Analytics タグ の設定をし、Event として記録する。
2. トリガーとして、スクロールの距離を設定する。

以下、記事が参考になります。

• 15分で設定完了！ Google Tag Managerで記事の「読了率」と「スクロール率」を取得しよう【小川卓のブログ分析入門 第2回】 - 週刊はてなブログ

カスタムタグをサイト全体に配信する

配信したいサービスのタグが おすすめタグ にも、その他タグにも存在しない場合は、カスタム HTML タグを使います。
手順は以下の記事が参考になります。他のサービスの場合も同じような手順を踏むことになります。

• Googleタグマネージャを使ってWebページのトラッキングをするには？｜Synergy!LEAD | シナジーマーケティング株式会社　SynergyMarketing

開発者視点での GTM

開発者視点で見て、使い方として以下の使い方ができると思われます。

クライアント 側の JavaScript エラー検知、監視ツールとして使う

トリガーとして、JavaScript のエラー発生を検知するトリガーが存在します。
以下の記事のように Google Analytics に エラー内容を送信したり、カスタム HTML タグでサーバ側に送付して RDB 等にエラーを記録することができます。

• GoogleAnalytics＋GoogleTagManagerでJSエラーを収集する

コンテンツマネジメントツール として GTM を使う

カスタム HTML を使い、HTML に出力されている情報、ブラウザの JavaScript を使用して ページ属性、ユーザ属性を基にコンテンツ内容を書き換えることができます。
コンテンツ書き換えパターンとして以下の2つのパターンがあるかと思います。

ページ属性、ユーザ属性でのページの書き換え

HTML の内容に基づいて、動的に、または静的に HTML を書き換えます。
以下の記事が参考になります。

• Google Tag Managerを使ってバナーやメッセージをデプロイなしに切り替える - $shibayu36->blog;

過去にルックアップテーブルを使ったバナー切り替えの実装についてまとめています。よろしければご確認ください。

• GTM(Google Tag Manager) で ユーザのカテゴリごとのバナー配信、メッセージ配信 を行う | Monotalk

イベント駆動でのページの書き換え

これは、有効期限の短い Cookie を使います。 ^{1 2} A ページを閲覧したユーザにだけ、B ページを訪れた際にコンテンツを切り替えたい場合に使用できます。手順は以下になるかと思います。

1. A ページを閲覧の際に、カスタム HTML タグ で Cookie を設定する。
2. B ページを閲覧した際に、Cookie が設定されていれば、カスタム HTML タグ でバナーを表示する。

Cookie の設定方法は以下が参考になります。

• Google Tag Manager で utm_source を Cookie に保存する | ハックノート

補足. HTML の属性にどうやってアクセスするのか?

カスタム JavaScript 変数 で アクセスができます。
カスタム HTML 内でもアクセスができますが、頻繁に使う変数であれば、カスタム JavaScript 変数として定義しておいたほうがいいです。

function() {
    return document.querySelector("h1").innerText;
}

補足. トリガーの条件はどうやって指定するのか?

各トリガーには、全てか、一部かの選択肢があります。
一部を選択して、そこに条件を指定していけば発火する条件を絞り込むことができます。

その他、使い方のアイディアを得る方法

Github で、gtm、googletagmanager、google-tag-manager 等の Topic で検索すると、サンプル実装、ライブラリ等が公開されています。
そのまま使用できるものもありますし、そのまま使用できなくてもアイディアが得られる可能性があるので、たまに眺めてみるのをお勧めします。
2019年1月のスナップショットですが、以下リンク集を作成しましたので、よろしければご確認ください。
mutter.monotalk.xyz- Google Tag Manager 関連の情報リンク集

GTM を使うメリット、デメリット

メリット

以下の記事にメリットが記載されており、参考になります。

• エンジニアのためのGoogle Tag Manager入門 - てくすた

上記と繰り返しになりますが、個人的に感じているメリットは以下になります。

• アプリケーションのリリースと切り離して、タグ、やコンテンツの切り替えを行うことができる。
  アプリケーション側のリリースタイミングを待つ必要がありません。
  また、タグ由来の障害が発生した場合も、GTM を介して OFF にできるので、迅速に障害に対処できます。

• 実装の一部を設定に任せることができる。
  コードで記載するのが面倒なところを、GTM の組み込み変数や、各種機能がカバーしてくれます。

• Version 管理、並行開発ができる
  ワークスペース機能で並行開発が、バージョン機能で指定した Version に戻すことができるので、複数人出の開発が可能で、失敗時にも迅速に戻すことができます。
  ワークスペースを作った後に、別のワークスペースからリリースが行われた後、通知が出るのでマージ漏れの心配もありません。

• 管理が一元化される
  各タグの管理が一元化されるので、カオスになっていたとしても一元管理されている安心感は生まれます。

デメリット

個人的に以下の部分がデメリットに感じます。

• できることが多いので、サーバ側プログラムなのか GTM 側の設定のどこで何をやっているのかよくわからなくなる。
  問題が発生した際に、GTM でできることがサーバ側に実装されていたり、サーバ側でやるべきことが GTM で実装されていたりする状況になると、問題の切り分けがたいへんになります。
  調査担当の開発者が、GTM の権限がないと、GTM 側の確認を担当者に依頼することになったり、そもそも GTM の存在を知らない場合だと、調査自体が行き詰まるケースもあります。

• タグ、や変数の管理方にルールを設けないと管理がカオスになる
  企業で導入する際は、導入前に命名規則、ルールなどを設けないと何をしているのか不明なタグ、変数が大量に発生します。
  同じことをやっているタグ、変数の存在に気づかず、同じものを作ってしまい保守性が落ちます。

導入にあたって考慮すべきこと

導入にあたって考慮すべきことを以下に記載します。

• GTM で実施する範囲を決めよう
  タグの配信管理だけではない機能が GTM にはあります。どこまで GTM で実装すべき機能なのかを検討してルールを決めましょう。
  ページ属性、ユーザ属性でのページの書き換え は本来 GTM でやるべきではない邪道な使い方かもしれません。
  有償になるかもしれませんが、この用途で使えるツールは他にもあります。

• コンテナの作成単位を適切な範囲で分割しよう
  複数ドメインで1つのコンテナを使う設定にした場合、タグ総数の見積もりが甘かったりすると、数が膨大になって何をやっているのかよくわからない状態になります。 非同期なので そこまでではないかもしれませんが GTM のタグ配信パフォーマンスにも影響あると思いますので、ドメイン単位、もしくは役割単位で コンテナは分割すべきかと思います。

• フォルダ機能の有効活用、命名規約を設けよう
  タグの数が増えて、設定がカオスになった場合は、フォルダ機能を使ってタグ、変数の整理を行いましょう。
  命名規約もあると、よりわかりやすいかと思います。機能別、施策単位等で規約を設けていいかと思います。

• GTM ガイドライン
  Google Tag Manager の 開発ガイドラインが Github で公開されており、その日本語翻訳を作成しました。
  以下記事に、翻訳文へのリンクと補足を記載しています。よろしければご確認ください。
  gtm-guidelines の翻訳、その感想とその補足 | Monotalk

まとめ

GTM を使ってできることをプログラマ視点でまとめてみました。
言いたかったことをまとめると以下になります。

• GTM はタグ管理ツールではなく、タグ管理ができる クライアント側の JavaScript の統合開発 である。

• JavaScript でなんでもできてしまうため、企業で使うならどこまで GTM で実施することを決める必要がある。

• JavaScript の統合開発環境なので、アプリケーション開発と同様に標準化が必要。

以上です。