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

スポンサーリンク
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>

 

参考にさせて頂いたサイト
https://developers.google.com/tag-manager/devguide#multiple-containers