GoogleTagManagerを使ってHTML要素の追加や削除を行う

まえがき

webアプリケーションで特定条件時のみ画面のカスタマイズを行いたい場合に、あんまりソースコードにif文いっぱい書きたくないな……と思ったのでGoogleTagManager（以下GTM）を使用することにしました。
Analyticsと組み合わせて使われることが多い（と思われる）GTMですが、Javascriptを使用してソースコード本体に手を加えずにHTML要素のカスタマイズを行うこともできます。

タグ作成

GTMから「新しいタグを作成」を押下し、「タグの設定」を選択します。

タグタイプで「カスタムHTML」を選択します。

タグの設定を行う

「HTML」の箇所にJavascriptを記載します。
今回はシンプルにdiv要素の追加を行うことにします。要素の削除や、CSSスタイルの変更も可能です。
Javascriptは「ライブラリを使わない素のJavaScriptでDOM操作」を参考にさせていただきました。

<script>
  var container = document.querySelector('.test-tag');
  container.innerHTML = '<div>グーグルタグマネージャテスト挿入</div>';
</script>

詳細設定から、タグ配信の優先度を100に設定しておきました。
タグを複数設定した場合、詳細設定でそれぞれのタグの優先順位や順序付けが可能なので色々調整が効きます。

トリガー作成

タグの作成が完了したら「トリガーの選択」右上にある「＋」マークからトリガーを新規追加します。

今回トリガーは「ページビュー > ページビュー」にしました。

サンプルでは特定IDのページだけカスタム画面を見せたいという設定なので、「一部のページビュー」を選択して条件を記載します。

サイトに差し込み用の要素を仕込む

<div class="test-tag"></div>

メッセージを差し込みたい位置に、GTMで指定したクラスを入れておきます。
これだけ。

プレビューで確認し、問題なければ公開します。
GTMのプレビューと公開を正しく行おう

メリット

• if文でソースコードを汚さずに済む。
• デプロイ不要。画像やリンクの追加も楽。
• かなり柔軟に設定できるので、慣れるとソースがりがり書くよりスムーズ。
• GTMのバージョン管理も便利。
• 運用者と開発者が異なっており、細かい変更が定期的に入る箇所の修正を運用者が行える（ニュースとか？）。

デメリット

• うっかり不具合があった場合に、原因がGTMに記述したscriptなのかソースコード本体側にあるのかの検証がややめんどうくさい。
• 使用しているクラスやIDの管理をきちんと行わないと、後日混乱しやすい。（「あれ、このクラス使ってない？いらないなら消していい？」「あーそれGTMで使ってます」）
• Git上でソースコードと合わせて一括でバージョン管理できない。

まとめ

トリガーにCookieを使用することで、LPページ踏んだお客さんにはフォームにキャンペーンコード入力欄を表示するけど、LPページ見てないお客さんにはキャンペーンコード入力欄は非表示にするよ！
Javascriptにエラーがあったときにブラウザでアラート出すよ！
QAページのスクロール距離が長い場合に、ヘルプチャットへの誘導を行うよ！
などなど、いろんなことがGTMでできました。
便利ですが、チーム開発では管理がやや煩雑になるなあという印象はあるため、うまく使っていきたいと思います。