メモ > 技術 > サービス: Google > Google Tag Manager
Google Tag Manager
その名の通り、タグ（解析タグや広告タグ）をマネジメント（管理）できるツール。
最初に Google Tag Manager 用のタグを全ページに埋め込んでおけば、
あとは Google Tag Manager の画面から「この画面にこの解析タグを埋め込む」を操作できる。
Google Analyticsも含めて、専用画面からタグを管理できる。
GTM（Googleタグマネージャー）とは？基礎知識と導入・初期設定 - マーケティングオートメーションツール SATORI | 上戸彩さんTVCM公開中
https://satori.marketing/marketing-blog/what-is-marketing/gtm-basic/
■導入
https://marketingplatform.google.com/about/tag-manager/
にアクセス。
「無料で利用する」をクリック。
「アカウントを作成」から設定を始める。
アカウントの設定で以下を入力。
アカウント名: refirio
国: 日本
コンテナの設定で以下を入力。
コンテナ名: refirio.net
ターゲットプラットフォーム: ウェブ
「作成」ボタンをクリック。
利用規約が表示されるので、画面右上にある「はい」をクリック。
「Google タグ マネージャーをインストール」というダイアログが表示され、GTM導入のためのコードが表示される。
このコードをサイト内の全ページに組み込んでおく。
ダイアログの「OK」をクリックすると閉じるが、このコードはダッシュボード上部にある「GTM-XXXXXXX」をクリックすると再表示できる。
ただし、このコードを追加しただけでは何も行われないみたい。
■「Google タグ マネージャーをインストール」ダイアログの内容（参考）
下のコードをコピーして、ウェブサイトのすべてのページに貼り付けてください。
このコードは、次のようにページの <head> 内のなるべく上のほうに貼り付けてください。
<!-- 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','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->
また、開始タグ <body> の直後にこのコードを次のように貼り付けてください。
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
■タグマネージャーでGoogleアナリティクスを導入する
あらかじめ、Googleアナリティクスでトラッキングコードを取得しておく。
また、もともとGoogleアナリティクスを組み込んでいる場合は削除しておく。（2重にカウントされてしまわないように。）
今回は以下のようなトラッキングコードを取得済みとする。
UA-111111111-1
左メニューから「変数」をクリックする。
画面下部に「ユーザー定義変数」の枠があるので、ここから「新規」をクリックする。
「変数の設定」エリアをクリックする。
「ユーティリティ」にある「Google アナリティクス設定」をクリックする。
「トラッキング ID」に、取得済みのGoogleアナリティクスのトラッキングコードを入力する。
画面右上の「保存」をクリックする。
「変数名の変更」が表示されるが、今回は変更せずに「Googleアナリティクス設定」のまま「保存」をクリック。
これで変数を用意できたので、引き続きPV計測タグを登録する。
左メニューから「タグ」をクリックする。
「タグ」の枠があるので、ここから「新規」をクリックする。
「タグの設定」エリアをクリックする。
「おすすめ」にある「Google アナリティクス: ユニバーサル アナリティクス」をクリックする。
「トラッキングタイプ」が「ページビュー」になっていることを確認する。「Googleアナリティクス設定」で先程作成した設定である「{{Googleアナリティクス設定}}」を選択。
次に画面下部「トリガー」エリアをクリックする。
「All Pages」をクリックして選択する。（すべてのページで発火させる。）
画面右上の「保存」をクリックする。
「タグ名の変更」が表示されるが、今回は変更せずに「Google アナリティクス ユニバーサル アナリティクス」のまま「保存」をクリック。
これで設定できたので、プレビューモードで確認する。
（プレビューモードでアクセスしている人にだけ設定を反映できる。）
画面右上の「プレビュー」をクリックする。
GTMを埋め込んだページを別のタブで開くと、ページ下部に計測用ウインドウが表示される。
「○○ Fired 1 time(s)」などのように、イベントが発火したことが確認できる。
また、アナリティクスのリアルタイム解析からも、カウントを確認できる。
確認できたら「プレビューモードを終了」をクリックする。（終了すると、この時点ではアナリティクスにも反映されなくなる。）
これで確認も完了。最後に公開する。
画面右上の「公開」をクリックする。
「バージョンの公開と作成」が選択されていることを確認する。
「バージョン名」と「バージョンの説明」に判りやすい名前と説明を入力する。
今回はそれぞれ「初期設定」と「全ページにGoogleアナリティクスのトラッキングコードを設定。」としておく。
画面右上の「公開」をクリックする。
これで完了。アナリティクスのリアルタイム解析から確認する。
■エクスポートとインポート
コンテナのエクスポートとインポート - タグマネージャ ヘルプ
https://support.google.com/tagmanager/answer/6106997?hl=ja
「管理 → コンテナをエクスポート → バージョンまたはワークスペースを選択」
今回は「バージョンの「ID」が「1」の「初期設定」をクリック。
プレビューにJSONが表示されるので、「エクスポート」をクリック。
以下のようなファイルをダウンロードできる。
{
"exportFormatVersion": 2,
"exportTime": "2020-07-01 06:27:16",
"containerVersion": {
"path": "accounts/6666666666/containers/33333333/versions/1",
"accountId": "6666666666",
"containerId": "33333333",
"containerVersionId": "1",
"name": "初期設定",
"description": "全ページにGAのPV計測タグを設定しました。",
"container": {
以下略
「管理 → コンテナをインポート」
インポートするファイルを選択: （いったん上でエクスポートしたファイルを選択してみる。）
ワークスペースを選択: 既存 → ワークスペースを選択
インポート オプションを選択: （必要に応じて「上書き」か「統合」を選択。今回は「上書き」としてみる。）
「確認」をクリック。
ワークスペースに戻り、「現在編集中」という表示になる。
画面右上の「公開」から公開する。
■複数のタグマネージャーを埋め込む
※未検証。
公式の解説によると、単純に複数のタグを並べて埋め込めばいいみたい。
以下ページの「1 つのページで複数のコンテナを使用する」を参照。
デベロッパー ガイド | ウェブ トラッキング向け Google タグ マネージャー | Google Developers
https://developers.google.com/tag-manager/devguide
以下のページでも説明されている。
同じページにGoogleタグマネージャを複数設置する方法 | WEB担当者の備忘録
https://liapoc.com/same-page-more-gtm.html
以前はややこしい手順が必要だったようだが、
2016年ごろに現在のように簡単に導入できるようになったみたい。
1サイトで複数のGoogle Tag Managerを使う方法 | SEM Technology
https://sem-technology.info/ja/google-tag-manager/1site-multi-gtm
■その他参考になりそうなページ
【GTM活用】最初に設定しておきたい3つのGA計測テクニック - マーケティングオートメーションツール SATORI | 上戸彩さんTVCM公開中
https://satori.marketing/marketing-blog/contents-marketing/gtm-ga/
【GTM活用】設定しておきたい5つのトリガー - マーケティングオートメーションツール SATORI | 上戸彩さんTVCM公開中
https://satori.marketing/marketing-blog/contents-marketing/gtm-advanced-trigger/