Google Tag Managerの使い方

Webサイトの分析タグやマーケティングタグの管理に悩んでいませんか?Google Tag Manager(GTM)を使えば、コードを直接編集せずにタグを一元管理できます。

Google Tag Managerとは

Google Tag Managerは、Googleが提供する無料のタグ管理システムです。Google AnalyticsやGoogle広告、その他のサードパーティタグをWebサイトに簡単に追加・管理できます。

GTMの主なメリット

  • 開発者不要: エンジニアに依頼せず、マーケターが直接タグを管理
  • 一元管理: すべてのタグを1つの場所で管理
  • バージョン管理: 変更履歴を保存し、必要に応じてロールバック可能
  • プレビュー機能: 本番環境に公開する前にテスト可能
  • 高速化: 非同期読み込みでページ速度への影響を最小化

初期設定の手順

1. アカウント作成

  1. Google Tag Managerにアクセス
  2. Googleアカウントでログイン
  3. 「アカウントを作成」をクリック
  4. アカウント名と国を入力

2. コンテナの作成

  1. コンテナ名(通常はサイト名)を入力
  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: タグの作成

  1. 左メニューから「タグ」を選択
  2. 「新規」をクリック
  3. タグ名を入力(例: GA4 - ページビュー)
  4. タグの設定をクリック
  5. 「Google アナリティクス: GA4 設定」を選択
  6. 測定IDを入力(例: G-XXXXXXXXXX)

Step 2: トリガーの設定

  1. 「トリガー」セクションをクリック
  2. 「All Pages」を選択(すべてのページビューで発動)
  3. 保存をクリック

Step 3: 公開

  1. 右上の「プレビュー」でテスト
  2. 問題なければ「公開」をクリック
  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動画の情報

有効化は「変数」メニューから「設定」をクリックして選択します。

デバッグとテスト

プレビューモードの使い方

  1. 右上の「プレビュー」をクリック
  2. WebサイトのURLを入力
  3. Tag Assistantが起動
  4. サイト上で操作を行う
  5. 発動したタグとトリガーを確認

確認ポイント

  • タグが正しいタイミングで発動しているか
  • 変数に正しい値が入っているか
  • エラーが発生していないか

よくあるミスと対処法

タグが発動しない

原因: トリガー条件が厳しすぎる

対処: プレビューモードで条件を確認し、変数の値をチェック

二重計測が発生

原因: GTMと直接実装のタグが両方動作

対処: HTMLから古いタグを削除

データが送信されない

原因: 測定IDやタグIDの入力ミス

対処: IDを再確認し、スペースや全角文字が入っていないか確認

ベストプラクティス

命名規則を統一

タグ、トリガー、変数の名前に一貫性を持たせましょう。

:

  • タグ: GA4 - イベント - フォーム送信
  • トリガー: クリック - 問い合わせボタン
  • 変数: カスタムJS - ユーザーID

フォルダで整理

タグ数が増えてきたら、フォルダ機能で分類します。

バージョン管理を活用

公開時に分かりやすいバージョン名と説明を記入します。問題が発生した際のロールバックが容易になります。

権限管理

チームメンバーには適切な権限を付与します。

  • 公開: 変更を本番環境に反映
  • 編集: タグの作成・編集
  • 承認: 公開前の承認
  • 読み取り: 閲覧のみ

まとめ

Google Tag Managerは、マーケティングの効率化に欠かせないツールです。初期設定には少し時間がかかりますが、一度マスターすれば開発者に依存せず、迅速にタグ管理ができます。

まずは基本的なGoogle Analyticsの設定から始めて、徐々にコンバージョントラッキングやカスタムイベントなど、高度な機能に挑戦してみてください。