同じページにGoogleタグマネージャを複数設置する方法

1つのページに複数のGoogleタグマネージャー（GTM）を入れたいという声をもらいました。

外部の解析会社に解析を依頼する際に、GTMの設置が必要なんだそうです。でも既にGTMが実装されているのでどうしたもんだろうということです。

Googleタグマネージャ−を複数設置する方法

方法は簡単です。今あるGoogleタグマネージャーのしたに、新しいGoogleタグマネージャーのタグ（正式にはGoogleタグマネージャーコンテナ）を設置すれば完了です！

つまり下記のような形で問題なく動きます。

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
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','dataLayer','GTM-XXXX');</script>

<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-YYYY"
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','dataLayer','GTM-YYYY');</script>
<!-- End Google Tag Manager -->

たまにカスタムHTMLタグの中に、Googleタグマネージャ−タグを入れる代理店の人がいますが、ダメです。

データレイヤーを複数作成

データレイヤーを作成して任意のデータをpushしていたのですが、解析屋さんもデータレイヤーを作成したいとのことでした。

このままだと、お互いのデータレイヤーが、お互いのGoogleタグマネージャーに入ってきてしまいます。

そのため、他方のデータレイヤー名を変更して使用することにします。

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
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','dataLayer','GTM-XXXX');</script>

<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-YYYY"
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','myNewName','GTM-YYYY');</script>
<!-- End Google Tag Manager -->

最終行の、’dataLayer’,’GTM-YYYY’　の部分を　’myNewName’,’GTM-YYYY’　するだけです。myNewName　は好きな名称でOKです。

これで、格納されるデータレイヤー名が変更されました。あとは、push等で値を送る際にmyNewName名のデータレイヤーに送ればOKです。

<script>
  myNewName = [{
    // ...
  }];
  myNewName.push({'variable_name': 'variable_value'});
</script>

参考サイト

Google for Developers

The data layer  |  Tag Platform  |  Google for Developers Learn how events and variables are passed to Google Tag Manager and gtag.js and triggers set up based on the values of variables.