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

Google Tag Managerとは

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

GTMの主なメリット

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

初期設定の手順

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: タグの作成

左メニューから「タグ」を選択
「新規」をクリック
タグ名を入力（例: 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の設定から始めて、徐々にコンバージョントラッキングやカスタムイベントなど、高度な機能に挑戦してみてください。

WordPressとNuxt Contentの比較

WordPressの特徴

Nuxt Contentの特徴

比較まとめ