1サイトに複数のGoogle Tag Managerを導入するメリット

複数のGoogle Tag Managerを入れることによるメリットは、

  • 企業サイトを運営している
  • ウェブサイト自体はディレクトリごとに部門別に管理されている

ようなケースで現れてきます。このようなシチュエーションであれば、

  • サイト全体に共通のGoogle Tag Managerを入れる
  • 各部門毎に個別のGoogle Tag Managerを自分の部門のディレクトリのみに入れる

を行うことによって、

  • サイト共通のタグを手間をかけずにサイトに導入することができる
  • 特定の部門でのみ使いたいタグについて、他の部門のGoogle Tag Managerに影響を与えることなく導入することができる
  • 他の部門のタグの更新と競合する更新を行ってしまう恐れがない(変更履歴が分かれる)

という恩恵を受けることが可能になります。

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さんも権限を持っておくといいでしょう。また、コンテナは全て同一のアカウントの配下に作成しておくといいと思います。

サイト全体の共通コンテナに第1ディレクトリを取得するマクロ(Variables)を作成

ここで、共通コンテナにマクロを作成します。作成するマクロは、現在のURLから第1ディレクトリ名を取得するカスタムJavaScriptです。コードは簡単で、下記をそのまま利用すれば動くと思います。

function () {
  var paths = location.pathname.split('/');
  if (paths.length >= 2) return paths[1];
  return "none";
}

以下のようになっていると思います。

第1ディレクトリ名から該当のGTMコンテナIDに変換するルックアップテーブルを作成

第1ディレクトリ名をGTMコンテナに変換するためのルックアップテーブルを作成します。こちらも、マクロ(Variables)から作成します。ルックアップテーブルを使ったことのない人も多くいらっしゃるかと思いますが、使いどころさえ掴めば便利に使えます。
言葉で説明すると、伝わりにくいと思いますので、キャプチャをご覧いただければと思います。

図のように、Input Variableに先ほど作成した「FirstDirectoryName」のマクロを指定し、ルックアップテーブルに「section-A、GTM-AAAAAA」「section-B、GTM-BBBBBB」を作成します。そして、最後にDefault Valueとして、GTM-OTHERを指定します。

ルックアップテーブルの見方としては、入力値「FirstDirectoryName」の値が、「section-A」と同じであったら、「GTM-AAAAAA」を返し、「section-B」と同じであったら、「GTM-BBBBB」を返します。どれにも一致しなかったら、デフォルト値である「GTM-OTHER」を返す、そんなマクロ「Child GTM-ID」を定義しています。
GTM-AAAAAA, GTM-BBBBB, GTM-OTHERの部分には、それぞれ作成した各GTMのコンテナIDを入れてください。また、section-Aやsection-Bのところも、各自自分のサイトに合わせたものを設定してください。

これらマクロを使用して、2つ目のタグを設置する


では、最後に共通コンテナで「タグ」の追加を行います。追加するタグは、カスタムHTMLとして追加します。このときの注意点は1点、dataLayerの変数名をデフォルトから変更してしまうことです。というのも、同一サイトに複数のGoogle Tag Managerを設置してはいけない理由というのは、dataLayer変数の変数名が被ってしまうことだったのです。さらに、ここでインストールする2つ目のGTMのIDは、先ほどのマクロ「Child GTM-ID」から取得するので、そのための修正も行います。というわけで、変数名の変更とGTMのIDを書き換えたバージョンのインストールタグは以下になります(下記の例では、dataLayerSecondに変更していますが、お好みの変数名を使ってもらって大丈夫です)。

2016/02/26訂正

Googleタグマネージャ開発者向けヘルプページ - Google Tag Manager for Web TrackingMultiple 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-ID}}');</script>
<!-- End Google Tag Manager -->

注意点

この内容はGoogle推奨の方法ではなく、非公式の方法です。また、2つ目以降のGoogle Tag Managerは、読み込むために今回の方法では、JavaScriptを利用しています。そのため、JavaScriptを実行できない環境(特に、ガラケー端末など)においては、2つ目以降のタグを呼び出すことはできません。ご注意ください。

2016/02/26訂正: 現時点では、Googleタグマネージャの開発者向けヘルプページにも記載されている方法となります。

まとめ

1サイトに1つしか入れれないと思っていたGoogleタグマネージャですが、技術上は2個だって3個だって入れたい放題です(そんなにたくさん入れるメリットもないですが)。
もし、データレイヤー変数名を変更してサイトに設置した場合は、JavaScriptなどでdataLayer変数を利用する際に、変数名を変更していることを忘れないように注意してください。