Google Tag Managerの使い方
Webサイトの分析タグやマーケティングタグの管理に悩んでいませんか?Google Tag Manager(GTM)を使えば、コードを直接編集せずにタグを一元管理できます。
Google Tag Managerとは
Google Tag Managerは、Googleが提供する無料のタグ管理システムです。Google AnalyticsやGoogle広告、その他のサードパーティタグをWebサイトに簡単に追加・管理できます。
GTMの主なメリット
- 開発者不要: エンジニアに依頼せず、マーケターが直接タグを管理
- 一元管理: すべてのタグを1つの場所で管理
- バージョン管理: 変更履歴を保存し、必要に応じてロールバック可能
- プレビュー機能: 本番環境に公開する前にテスト可能
- 高速化: 非同期読み込みでページ速度への影響を最小化
初期設定の手順
1. アカウント作成
- Google Tag Managerにアクセス
- Googleアカウントでログイン
- 「アカウントを作成」をクリック
- アカウント名と国を入力
2. コンテナの作成
- コンテナ名(通常はサイト名)を入力
- ターゲットプラットフォームを選択
- ウェブ: Webサイト用
- iOS: iOSアプリ用
- Android: Androidアプリ用
- AMP: AMPページ用
3. GTMコードの設置
作成完了後、2つのコードスニペットが表示されます。
HTMLの<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)](https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f));
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
<body>開始タグの直後に配置
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
基本の3要素
GTMは3つの主要な要素で構成されています。
タグ(Tags)
実際に実行されるコードです。Google Analyticsの計測コードや広告コンバージョンタグなどが該当します。
トリガー(Triggers)
タグを発動させる条件です。「ページビュー時」「ボタンクリック時」「スクロール到達時」などを設定できます。
変数(Variables)
タグとトリガーで使用する値です。「ページURL」「クリックテキスト」「カスタムデータ」などを格納します。
Google Analyticsの設定例
GTMで最もよく使われるGoogle Analyticsの設定方法を解説します。
Step 1: タグの作成
- 左メニューから「タグ」を選択
- 「新規」をクリック
- タグ名を入力(例: GA4 - ページビュー)
- タグの設定をクリック
- 「Google アナリティクス: GA4 設定」を選択
- 測定IDを入力(例: G-XXXXXXXXXX)
Step 2: トリガーの設定
- 「トリガー」セクションをクリック
- 「All Pages」を選択(すべてのページビューで発動)
- 保存をクリック
Step 3: 公開
- 右上の「プレビュー」でテスト
- 問題なければ「公開」をクリック
- バージョン名と説明を入力して公開
よく使うトリガーの種類
ページビュー
- すべてのページ: サイト内すべてのページ
- 一部のページ: 特定のURLパターンのみ
クリック
- すべての要素: あらゆるクリック
- リンクのみ: aタグのクリック
ユーザーエンゲージメント
- スクロール距離: 25%、50%、75%、100%など
- 動画: YouTube動画の再生、一時停止など
タイマー
- 一定時間後: ページ滞在時間の計測
カスタムイベント
- カスタムコード: 独自のJavaScriptイベント
便利な組み込み変数
GTMには事前定義された変数が多数用意されています。
ページ関連
- Page URL: 現在のページURL
- Page Path: URLのパス部分
- Page Hostname: ドメイン名
- Referrer: リファラーURL
クリック関連
- Click Element: クリックされた要素
- Click Classes: 要素のclass属性
- Click ID: 要素のid属性
- Click Text: 要素内のテキスト
その他
- Error Message: JavaScriptエラーメッセージ
- Video: YouTube動画の情報
有効化は「変数」メニューから「設定」をクリックして選択します。
デバッグとテスト
プレビューモードの使い方
- 右上の「プレビュー」をクリック
- WebサイトのURLを入力
- Tag Assistantが起動
- サイト上で操作を行う
- 発動したタグとトリガーを確認
確認ポイント
- タグが正しいタイミングで発動しているか
- 変数に正しい値が入っているか
- エラーが発生していないか
よくあるミスと対処法
タグが発動しない
原因: トリガー条件が厳しすぎる
対処: プレビューモードで条件を確認し、変数の値をチェック
二重計測が発生
原因: GTMと直接実装のタグが両方動作
対処: HTMLから古いタグを削除
データが送信されない
原因: 測定IDやタグIDの入力ミス
対処: IDを再確認し、スペースや全角文字が入っていないか確認
ベストプラクティス
命名規則を統一
タグ、トリガー、変数の名前に一貫性を持たせましょう。
例:
- タグ:
GA4 - イベント - フォーム送信 - トリガー:
クリック - 問い合わせボタン - 変数:
カスタムJS - ユーザーID
フォルダで整理
タグ数が増えてきたら、フォルダ機能で分類します。
バージョン管理を活用
公開時に分かりやすいバージョン名と説明を記入します。問題が発生した際のロールバックが容易になります。
権限管理
チームメンバーには適切な権限を付与します。
- 公開: 変更を本番環境に反映
- 編集: タグの作成・編集
- 承認: 公開前の承認
- 読み取り: 閲覧のみ
まとめ
Google Tag Managerは、マーケティングの効率化に欠かせないツールです。初期設定には少し時間がかかりますが、一度マスターすれば開発者に依存せず、迅速にタグ管理ができます。
まずは基本的なGoogle Analyticsの設定から始めて、徐々にコンバージョントラッキングやカスタムイベントなど、高度な機能に挑戦してみてください。