メモ > 技術 > サービス: 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/