Google Tag Managerがリリースされてかなりの年月が過ぎ、タグマネジメントというキーワードも浸透してきたので、既にGoogle Tag Managerを利用している、という方も増えてきたのではないでしょうか？SEM Technologyでは、2020年12月までGoogleタグマネージャーの導入件数を調査しており、その導入数は上場企業の約45%になりました。
そんなGoogle Tag Managerですが、実はデフォルトのインストールの方法だと、同一サイトに2つ以上のGoogle Tag Managerを導入しようとすると、意図せぬ挙動を起こしてしまうときがあります。
これを何とかして、複数のGoogle Tag Managerを入れれないか試行錯誤してみました。
1サイトに複数のGoogle Tag Managerを導入するメリット
複数のGoogle Tag Managerを入れることによるメリットは、
- 企業サイトを運営している
- ウェブサイト自体はディレクトリごとに部門別に管理されている
ようなケースで現れてきます。このようなシチュエーションであれば、
- サイト全体に共通のGoogle Tag Managerを入れる
- 各部門毎に個別のGoogle Tag Managerを自分の部門のディレクトリのみに入れる
を行うことによって、
- サイト共通のタグを手間をかけずにサイトに導入することができる
- 特定の部門でのみ使いたいタグについて、他の部門のGoogle Tag Managerに影響を与えることなく導入することができる
- 他の部門のタグの更新と競合する更新を行ってしまう恐れがない（変更履歴が分かれる）
という恩恵を受けることが可能になります。
一方で、
- 誤って同じタグを2つのGoogleタグマネージャーから設定してしまった。
- サイトに導入しているタグの不具合などの調査に時間がかかってしまった。
といったデメリットがあります。
1サイトに複数のGoogle Tag Managerを導入する方法
はじめに
ここでは、1つのウェブサイトを複数の部門のメンバーで管理していると仮定します。サイトの管理者には、
- サイト全体の管理者（Aさん）
- /section-A/以下のディレクトリの管理者（Bさん）
- /section-B/以下のディレクトリの管理者（Cさん）
- /section-A/, /section-B/以外のディレクトリの管理者（Dさん）
がいるとします。
サイト全体の共通コンテナの作成
まずは、サイト全体の共通のGoogle Tag Managerのコンテナを作成します。このコンテナは通常のタグマネージャーの導入方法通りに、タグを発行し、ウェブサイト全体に導入してください。このコンテナは、「サイト全体の管理者」（Aさん）が権限を保有するようにします。
各部門用のコンテナの作成
次に、各部門用のGoogle Tag Managerのコンテナを必要なだけ作成します。つまり、Bさん、Cさん、Dさんのコンテナを計3つ作成します。これらの権限はそれぞれ、Bさん、Cさん、Dさんが保有するようにします。さらに、必要に応じてサイト全体の管理者であるAさんも権限を持っておくといいでしょう。また、コンテナは全て同一のアカウントの配下に作成しておくといいと思います。
ページパスから該当のGTMコンテナIDに変換する「正規表現の表」を作成
ページパスを元に、GTMコンテナIDを取得するような変数を「正規表現の表」を使って作成します。正規表現の表が登場する前は、さらに一手間必要でしたが、正規表現の表が登場したことで、シンプルに設定することができるようになりました。
設定内容は以下のようになります。変数名は「Child GTM Container ID」として以下の話を進めています。別の変数名で作成することもできますが、以降では適宜読み替えてください。
正規表現に自信のない人は、筆者が2020年10月に出版した書籍「デジタルマーケターのためのテクノロジー入門」でも解説しているので、ぜひご購入いただき勉強すると良いでしょう。
もちろん、GTM-BBBBBB, GTM-CCCCCC, GTM-DDDDDDの部分には、それぞれ作成した各GTMのコンテナIDを入れてください。また、section-Aやsection-Bのところも、各自自分のサイトに合わせたものを設定してください。
これら変数を使用して、2つ目のGTMを設置する
2つ目のGoogleタグマネージャーは、1つ目のGoogleタグマネージャーの「カスタムHTML」を使って配信します。配信するタグは、Googleタグマネージャーのインストールに使われるタグをベースとして使います。ただし、JavaScriptが動作しない環境のタグは無視してしまって良いでしょう。
配信するカスタムHTMLは以下のようになります。タグマネージャーの標準スニペットのうち、コンテナIDに該当する部分を、GTMの変数を参照するようにしています。
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','{{Child GTM Container ID}}');</script>
<!-- End Google Tag Manager -->このHTMLタグを、全てのページで発火させるようにすれば、実装完了です。もちろん、トリガーで特定ページのみ配信するように絞り込むようなことも可能です。
補足: データレイヤー変数の変更について
Googleタグマネージャ開発者向けヘルプページ - Google Tag Manager for Web Trackingの Multiple Containers on a Page という形で1ページ(1サイト)に複数のGoogleタグマネージャを設置する方法が記載されています。
以前はタグマネージャのデータレイヤー変数名が重複しないように、変数名を変更してサイトに設置する必要がありましたが、現在はそのようなトリックを使わなくても、HTML内に2つのコンテナコードを設置すれば問題ありません。もし、内部のデータレイヤー変数名を共有したくない、という状況であれば下記のようにデータレイヤー変数名を変更して設置してください。
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-5K253H"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayerSecond','{{Child GTM Container ID}}');</script>
<!-- End Google Tag Manager -->まとめ
1サイトに1つしか入れれないと思っていたGoogleタグマネージャですが、技術上は2個だって3個だって入れたい放題です（そんなにたくさん入れるメリットもないですが）。 もし、データレイヤー変数名を変更してサイトに設置した場合は、JavaScriptなどでdataLayer変数を利用する際に、変数名を変更していることを忘れないように注意してください。
