Googleタグマネージャー(GTM)は、GA4や広告のタグをサイトに出し入れするための、Googleの無料の道具です。サイトのHTMLに一度だけGTMのコードを入れておけば、その後のタグの追加・変更・削除はGTMの管理画面で済みます。この記事では、スタッフ6名の「サンプル料理教室」のサイトを例に、GTMの仕組みと、タグを直接貼る場合との違いを整理します。読み終わると、自分の会社のサイトにGTMを入れるべきか、入れるなら誰が何を触るかを決められます。Googleアナリティクス4(GA4)のプロパティを作ったことがあり、測定ID(G-XXXXXXXXXX)がどこにあるか分かっている前提で書きます。
この記事の内容
先に決めること
GTMの画面を開く前に、次の4つを決めておきます。
1つ目は、GTMを触る人です。サンプル料理教室では、サイトのテーマ(見た目とHTML)は外部の制作会社が持ち、GTMの中は受付スタッフ1名と代表が触ります。制作会社にお願いするのは「GTMのコードを全ページに入れる」1回だけにして、その後の計測の追加は社内で回す形にします。社内に触れる人がいないなら、GTMを入れても使われません。
2つ目は、何を測るかです。ページビューと、GA4が自動で取るスクロールや外部リンクのクリックだけで足りるなら、GTMは要らないこともあります。体験申込ボタン・電話番号のボタン・LINEの友だち追加ボタンを分けて数えたい、Google広告やMeta広告のコンバージョンも取りたい、となった時点でGTMを入れる意味が出ます。
3つ目は、今サイトに直接貼られているタグの棚卸しです。GA4のGoogleタグ、Google広告のタグ、Meta Pixelなどがテーマのheadに直接入っていることがよくあります。GTMに移すなら全部まとめて移し、直接貼ったほうは消します。公式ヘルプも、移行するときはすべてのタグを一度に移す方法を勧めています。半分だけ移すと、同じページビューが2回送られます。
4つ目は、GTMのアカウントを誰のGoogleアカウントで作るかです。担当者の個人のGmailで作ると、その人が辞めたときに管理者がいなくなります。会社のGoogle Workspaceのアカウントで作り、管理者を2人以上にしておきます。アカウントは会社に1つで足り、1つのアカウントの中に複数サイトのコンテナを置けます。
GTMの仕組み:体験申込ボタンで見る
GTMは5つの部品でできています。言葉だけだと分かりにくいので、サンプル料理教室のトップページにある「体験レッスンを申し込む」ボタンが押されたら、GA4に trial_button_click というイベントを送る場面で、それぞれが何をするかを見ます。
| 部品 | 何をするものか | サンプル料理教室での中身 |
|---|---|---|
| コンテナ | 1つのサイトに入れる、タグ・トリガー・変数の入れ物 | sample-cooking.example 用のウェブコンテナ GTM-XXXXXXX |
| タグ | どこに何を送るか | 「Google アナリティクス: GA4 イベント」でイベント名 trial_button_click を送る |
| トリガー | いつタグを動かすか | 「体験レッスンを申し込む」の文字を含む要素がクリックされたとき |
| 変数 | トリガーやタグが使う値 | クリックされた要素の文字(Click Text)・リンク先(Click URL)・ページのURL(Page URL) |
| バージョン | ある時点の設定の控え。公開するとサイトに反映される | 「v3 体験申込ボタンのクリックを追加」 |
コンテナ
コンテナは、サイト1つにつき1つ作る入れ物です。作るときに種類を「ウェブ」「iOS」「Android」「AMP」「サーバー」から選び、普通のホームページなら「ウェブ」です。名前は公式ヘルプのとおり、サイトの最上位のURL(ここでは sample-cooking.example)にしておくと迷いません。ページごとにコンテナを作る必要はありません。
コンテナを作ると、サイトに入れる2つのコードが表示されます。1つ目は「できる限り <head> タグの上のほうに」、2つ目は「<body> 開始タグの直後に」貼るよう、公式ヘルプに書かれています。サンプル料理教室では、これを制作会社に渡して全ページに入れてもらいます。
<!-- 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 -->
<!-- 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) -->
ダイアログの3つ目の「ウェブサイトをテストする(省略可)」では、コードを入れたあとのサイトを確かめられます。サイトには、自分のコンテナの画面に出るコードをそのまま貼ります。IDを手で書き換えると、別のコンテナのIDが混ざります。

タグ
タグは「どこに、何を送るか」の設定です。GA4にイベントを送るなら、タグの種類で「Google アナリティクス: GA4 イベント」を選び、測定IDとイベント名を入れます。GA4にはまず、すべてのページで動く「Google タグ」というタグを1つ置き、その上でボタンごとのイベントタグを足していきます。
サンプル料理教室の体験申込ボタンなら、イベント名を trial_button_click、イベントパラメータに button_location(ボタンの場所。header・lesson_page・footer など)を入れます。同じボタンがヘッダーとレッスン紹介ページにあるので、どちらで押されたかを分けます。
トリガー
トリガーは「いつタグを動かすか」です。タグはトリガーが無いと動きません。クリックを拾うトリガーには「すべての要素」と「リンクのみ」の2種類があり、「すべての要素」はリンク・画像・ボタンなどページ上のあらゆるクリック、「リンクのみ」は <a> タグのリンクのクリックだけを拾います。
体験申込ボタンは、フォームのページへのリンク(<a href="/trial/">)として作られていたので、「リンクのみ」を選び、「一部のリンククリック」にして「Click Text」「含む」「体験レッスンを申し込む」という条件を付けます。条件は「変数・演算子・値」の3つで1行です。条件を付けないと、ページ上のすべてのリンクのクリックで体験申込のイベントが送られます。
変数
変数は、トリガーの条件やタグの中身に使う値です。最初から用意されている「組み込み変数」と、自分で作る「ユーザー定義変数」があります。クリックまわりの組み込み変数には Click Element・Click Classes・Click ID・Click Target・Click URL・Click Text、ページまわりには Page URL・Page Path・Page Hostname・Referrer があります。
クリック系の組み込み変数は、「変数」の画面の組み込み変数の「設定」で有効にしてから使います(初期状態の一覧に出ていないことがあります。画面で確かめてください)。体験申込ボタンの場合、トリガーの条件に Click Text、GA4に送るパラメータに Page Path を使えば、「どのページのどのボタンか」まで分かります。
バージョン
GTMの画面で何かを変えても、保存しただけではサイトに反映されません。ワークスペースの右上の「公開」を押し、バージョン名と説明を入れて公開して、初めて訪問者のブラウザに届きます。公開するたびに、その時点の設定がバージョンとして残ります。新しいコンテナの最初のバージョンは空のコンテナとして自動で作られ、バージョンの一覧には「Empty Container」と出ます。
バージョンは「いつ・誰が・何を変えたか」の記録であり、戻すための控えでもあります。新しいトリガーのせいで計測が壊れたら、「バージョン」の画面で前のバージョンの行の右端にある「⋮」を押し、「最新バージョンに設定」を選び、公開し直せば元に戻ります。直接貼ったタグを消してしまった場合の戻し方は「制作会社に前のHTMLを探してもらう」しかないので、ここがGTMのいちばん大きな違いです。

GTMには、変更を下書きとして分けておける「ワークスペース」もあります。小さな会社で1〜2人が触るだけなら、最初から用意されているワークスペース1つで足ります。
データレイヤー(知っておくと制作会社と話が早い)
ボタンのクリックやページの表示はGTMだけで拾えますが、「フォームが本当に送信できたか」「どのコースを選んだか」のように画面の見た目からは分からない値は、サイト側から dataLayer という箱に入れてもらいます。GTMはその値を変数として読みます。制作会社にお願いするなら、次のように「送信が終わった時点でこれを実行してほしい」と書いて渡します。
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'trial_form_submit',
'lesson_type': 'weekend'
});
dataLayer は大文字と小文字を区別します。datalayer と書かれていると、GTMには何も届きません。
タグを直接貼る場合とGTMを使う場合
同じ「体験申込ボタンのクリックをGA4に送る」を、テーマのHTMLに直接書く場合とGTMで入れる場合で比べます。
| 比べるところ | タグを直接貼る | GTMを使う |
|---|---|---|
| サイトを触る人 | テーマのHTMLを編集できる人(たいてい制作会社) | 最初の1回だけ制作会社。以降はGTMの権限を持つ社内の人 |
| 制作会社に頼む回数 | タグを足す・変える・消すたびに毎回 | GTMのコードを入れる1回と、データレイヤーを足すときだけ |
| やり直し | HTMLを直して、もう一度アップロードしてもらう | GTMの画面で直して公開し直す。数分で済む |
| 確認のしやすさ | ページのソースを見て、ブラウザの開発者ツールで送信を探す | 「プレビュー」で、どのタグがどのクリックで動いたかが一覧で見える |
| 壊したときの戻し方 | 前のHTMLが残っていれば戻せる。残っていなければ書き直し | 前のバージョンを「最新バージョンに設定」して公開し直す |
| 誰が何を変えたか | 制作会社の更新履歴に頼る | バージョンごとに公開日時と公開した人が残る |
| 入れられるタグ | 何でも入る。ただし1つずつHTMLに書く | GoogleのタグとGoogle以外のタグを同じ画面で管理できる |
| 費用 | 無料(制作会社の作業費は別) | 無料(有料版のTag Manager 360は小さな会社には要らない) |
実際に運用していると、差がいちばん出るのは「やり直し」と「確認」です。広告を始めた月に、ボタンの文字を「無料体験」から「体験レッスン」に変えたら計測が止まった、ということはよく起きます。直接貼っていると制作会社の返事を待つ数日間、数字が欠けます。GTMならトリガーの条件を書き換えて、その日のうちに戻せます。

GoogleタグとGTMの違い
名前が似ていて、いちばん混同されるところです。Googleタグ(gtag.js)は、GA4とGoogle広告にデータを送るためのGoogleのタグそのものです。GTMは、そのGoogleタグを含むいろいろなタグを出し入れするための道具です。競合するものではなく、GTMの中でGoogleタグを動かすことも、Googleタグをサイトに直接貼ることもできます。
| 比べるところ | Googleタグ(gtag.js) | GTM |
|---|---|---|
| 正体 | GA4とGoogle広告に送るためのタグ | タグを出し入れする管理画面と、その配信の仕組み |
| IDの形 | G-XXXXXXXXXX(GA4の場合) | GTM-XXXXXXX |
| 送れる先 | Googleのサービスだけ | Googleのサービスと、Meta・LINEなど他社のタグ |
| 変更のしかた | イベントを足すときはサイトのコードに gtag() を書く | GTMの画面で設定して公開 |
| 管理の単位 | サイトのコードの中 | コンテナ。バージョンで履歴が残る |
| 費用 | 無料 | 無料 |
Googleタグを直接貼る場合のコードはこの形です。GA4のデータ ストリームの画面に表示されるものを、全ページのheadに入れます。
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>
このやり方で体験申込ボタンのクリックを送るなら、ボタンのHTMLに次のようなコードを足すことになります。ボタンが増えるたびにHTMLを触るので、制作会社に毎回お願いすることになります。
<a href="/trial/" onclick="gtag('event', 'trial_button_click', {'button_location': 'header'});">体験レッスンを申し込む</a>
混乱しやすいのは、GTMの中に「Google タグ」というタグの種類があることです。GTMを使う場合も、GA4を動かすにはGTMの中に「Google タグ」を1つ置き、そこに測定IDを入れます。サイトに直接貼ったGoogleタグも残っていると、同じページビューが2回送られます。
GA4のデータ ストリームの画面にもGoogleタグのコードが出ますが、GTMを使う場合はそれを貼らず、測定IDだけをGTMの「Google タグ」に入れます。

GTMで入れられるタグの例
GTMには、よく使うタグがあらかじめテンプレートとして用意されています。用意されていないものは、Googleが公開している「コミュニティ テンプレート ギャラリー」から足すか、配布元のコードを「カスタム HTML」タグに貼ります。テンプレートは権限が決められた中でしか動かないため、カスタム HTMLよりも安全に作れると開発者ドキュメントに書かれています。テンプレートがあるならテンプレートを選びます。
| タグ | 何に使うか | GTMでの入れ方 | サンプル料理教室での用途 |
|---|---|---|---|
| GA4 | アクセスとイベントを数える | 「Google タグ」と「Google アナリティクス: GA4 イベント」 | 全ページのページビュー、体験申込・電話タップ・LINE追加 |
| Google広告 | 広告から来た人の申込を広告の成果として数える | 「Google 広告コンバージョン トラッキング」と「コンバージョン リンカー」 | 体験レッスン向けの検索広告の申込数 |
| Meta Pixel | Instagram・Facebook広告の成果を数える | 「タグタイプを選択」の「ギャラリー タグ タイプ」にある「Meta Pixel(facebook)」 | Meta広告から来た人の体験申込 |
| LINE Tag | LINE広告・LINE公式アカウントの配信の成果を数える | 「カスタム HTML」にベースコードとコンバージョンコード | LINE配信から来た人の体験申込 |
| ヒートマップ(Microsoft Clarity) | どこまで読まれたか、どこが押されたかを見る | コミュニティ テンプレート「Microsoft Clarity – Official」 | 料金ページがどこで離脱されているか |
Google広告は、ランディングページで広告クリックの情報を保存する「コンバージョン リンカー」を全ページで動かし、申込のときに「Google 広告コンバージョン トラッキング」でコンバージョンIDとラベルを送る形になります。詳しくは「GTMで広告のタグを入れる:Google広告のコンバージョンタグとMeta ピクセル」で扱います。
Meta Pixelは、GTMの「タグタイプを選択」の画面で「ギャラリー タグ タイプ」の中に「Meta Pixel(facebook)」が最初から並んでいて、カスタム HTMLにコードを貼らなくても一覧から選べます。
LINE Tagは、LINE公式アカウントのマニュアルでベースコード・コンバージョンコード・カスタムイベントコードの3つに分かれていて、ベースコードは計測するページのheadの中に、コンバージョンコードはベースコードの直後に置くよう書かれています。マニュアルにはタグマネージャーを使ってベースコードを置く方法もあると書かれていて、GTMなら「カスタム HTML」タグに貼ります。改行や空白が崩れると動かないとも書かれているので、コピーしたものをそのまま貼ります。
Microsoft Clarityは、公式ドキュメントでGTMへの入れ方が3つ案内されています。いちばん手間が少ないのは、コミュニティ テンプレートで「Microsoft Clarity – Official」を選び、プロジェクトIDを入れてトリガーを全ページにする方法です。

手順:GTMを入れて、体験申込ボタンのクリックをGA4に送るまで
ここでは流れをつかむための全体像を書きます。コンテナの作り方と初期設定の細かいところは「GTMの導入と初期設定:コンテナを作ってサイトに入れ、GA4タグを1つ置く」で扱います。
- 会社のGoogleアカウントで tagmanager.google.com を開き、「アカウントを作成」を押す
- アカウント名に「サンプル料理教室」、国に「日本」を入れる
- コンテナ名に「sample-cooking.example」を入れ、コンテナの種類で「ウェブ」を選んで「作成」を押し、利用規約に同意する
- 表示された2つのコードを制作会社に送り、全ページの指定の位置に入れてもらう。テーマに直接貼られているGA4のGoogleタグがあれば、同じ作業で消してもらう
- 「タグ」→「新規」で、タグタイプ「Google タグ」を選び、タグIDに測定ID
G-XXXXXXXXXXを入れる - トリガーに「Initialization – All Pages」(日本語表示では「初期化 – すべてのページ」)を選んで保存する
- 「変数」→「組み込み変数」の「設定」から Click Text と Click URL にチェックを入れる
- 「トリガー」→「新規」で「クリック – リンクのみ」を選び、「一部のリンククリック」で「Click Text」「含む」「体験レッスンを申し込む」を入れて保存する
- 「タグ」→「新規」で「Google アナリティクス: GA4 イベント」を選び、測定IDに
G-XXXXXXXXXX、イベント名にtrial_button_clickを入れる - イベントパラメータに
button_locationを足し、値に組み込み変数の{{Page Path}}を入れる - トリガーに手順8のトリガーを選んで保存する
- 右上の「プレビュー」を押し、sample-cooking.example を入れて「接続」を押す
- 開いたサイトで体験申込ボタンを押し、Tag Assistantのタブに戻って、クリックの行に体験申込のタグが「配信されたタグ」として出ているかを見る
- GA4の「DebugView」か「リアルタイム」でも
trial_button_clickが届いているかを見る - GTMに戻り右上の「公開」を押し、バージョン名に「v2 体験申込ボタンのクリックを追加」、説明に変えた理由を書いて公開する



手順5と6のトリガー名は、管理画面の言語設定によっては英語のまま表示されます。日本語の公式ヘルプでは「初期化 – すべての初期化イベント」と書かれています。
応用
制作会社・広告代理店と権限を分ける
GTMの権限はアカウントとコンテナで分かれていて、コンテナの権限は5段階です。
| 権限 | できること | サンプル料理教室で渡す相手 |
|---|---|---|
| アクセス権なし | コンテナが見えない | 関係のない人 |
| 読み取り | 設定を見られるが変えられない | 状況を確認したい代表 |
| 編集 | 下書きを作って編集できるが、公開できない | 広告代理店(タグを作ってもらい、公開は社内で確認してから) |
| 承認 | バージョンを作れるが、公開できない | 小さな会社ではあまり使わない |
| 公開 | 編集から公開まで全部できる | 受付スタッフ1名と代表 |
公開まで任せる相手を増やすほど、知らないうちに計測が変わる可能性が上がります。外の会社には「編集」までを渡し、公開は社内の人が「プレビュー」で動きを見てから押す、という分け方が小さな会社には合います。なお、公開前に承認者のチェックを必須にする承認の仕組みは有料のTag Manager 360だけの機能です。詳しくは「GA4・GTMの権限:制作会社・広告代理店に渡すとき、辞めた人を外すとき」で扱います。
バージョン名を読める形にする
バージョン名を空のまま公開すると、あとで「バージョン14」が何だったか誰にも分からなくなります。「v5 LINE追加ボタンのクリックを追加」「v6 体験申込のトリガー条件を『体験レッスン』に変更」のように、何を変えたかを書いて公開します。説明欄に頼んできた人と理由を1行書いておくと、戻すときに迷いません。
GTMが向かないケース
GTMは便利ですが、入れれば必ず得をするものではありません。次の場合は入れないほうが話が早いです。
ページが数枚で、見たいのはページビューだけという場合は、Googleタグを直接貼れば足ります。GA4の拡張計測機能をオンにしておけば、スクロール・離脱クリック・フォームの操作・ファイルのダウンロードはGoogleタグだけで取れます。Googleの開発者ドキュメントも、標準の指標だけならGoogleタグを1回設定すれば足りると整理しています。
サイトのサービス自体が計測欄を持っている場合も、まずそちらを使います。WordPressのプラグイン、Wix、Shopifyなどのサービスには、測定IDを入れるだけでGoogleタグが入る欄が用意されていることが多く、Googleのヘルプにもサービスごとの入れ方がまとめられています。そこに測定IDを入れたうえでGTMにもGoogleタグを置くと、二重計測になります。どちらか一方に決めます。
外部のサービスのページ(サンプル料理教室なら reserve.example の予約システムや決済画面)には、こちらのGTMは入りません。そのサービスに計測欄があるかを確かめ、無ければ「予約ページへ移ったところ」までを数えます。
できないことと、その代わり
| GTMでできないこと | 代わりの手 |
|---|---|
| データを貯めたり、レポートを見たりする | 数字はGA4で見る。GTMは送るだけの道具 |
| 他社のドメイン(予約システム・決済画面)にタグを入れる | そのサービスの計測欄を使う。無ければ移る手前のクリックを数える。詳しくは「クロスドメイン計測:予約システムや決済ページへ移るサイト」 |
| フォームが本当に送れたかを確実に知る | サンクスページの表示で数えるか、制作会社に dataLayer.push を入れてもらう |
| 広告ブロッカーを入れているブラウザで動く | 一部の訪問者は数えられない前提で数字を見る。予約システムの実数と月1回突き合わせる |
| 同意バナー(Cookieの同意取得)を出す | 同意管理のツールを別に入れ、GTMの同意モードの設定と組み合わせる |
| サイトの見た目を直す | カスタム HTMLで書き換えることはできるが、テーマの直しは制作会社に頼む |
| スマホアプリをウェブ用コンテナで測る | アプリには別のコンテナ(iOS・Android)が要る |
よく詰まるところ
| 症状 | 原因 | 直し方 |
|---|---|---|
| GTMで作ったのに、GA4に何も届かない | 保存しただけで公開していない | 右上の「公開」を押して公開まで済ませる。「バージョン」画面で公開日時を確かめる |
| ページビューが急に倍になった | テーマに直接貼ったGoogleタグと、GTMの「Google タグ」が両方動いている | どちらか一方を消す。GTMに寄せるなら制作会社にテーマ側を消してもらう |
| プレビューで「接続」してもつながらない | GTMのコードがそのページに入っていない、または別のコンテナのIDが入っている | ページのソースで GTM- を検索し、自分のコンテナIDと同じかを見る |
| 体験申込のイベントが、関係ないクリックでも送られる | トリガーが「すべてのリンククリック」のまま | 「一部のリンククリック」にして Click Text や Click URL の条件を付ける |
| トリガーの条件に Click Text が出てこない | 組み込み変数が有効になっていない | 「変数」→「組み込み変数」の「設定」でクリック系にチェックを入れる |
| ボタンの文字を変えたら計測が止まった | トリガーの条件がボタンの文字に頼っている | Click URL(リンク先 /trial/)など変わりにくい値を条件にする |
| テーマを更新したらGTMが消えた | 制作会社がテーマを入れ替え、headのコードが抜けた | テーマ更新の連絡があったら、その日のうちに「プレビュー」で接続できるか確かめる |
測定IDを入れる欄に GTM- を入れてしまった | GTMのコンテナIDとGA4の測定IDを取り違えた | GA4の「Google タグ」には G- で始まる測定IDを入れる |
| 担当者が辞めて、誰もGTMを開けない | 個人のアカウントだけが管理者だった | 会社のアカウントを管理者に足しておく。辞める前に権限を移す |
| 代理店が入れたタグがいつの間にか動いている | 代理店に「公開」権限を渡していた | 外の会社は「編集」までにして、公開は社内で確かめてから押す |
| LINEの友だち追加ボタンのクリックが数えられない | ボタンが画像やJavaScriptで作られていて、<a> タグではない | トリガーを「すべての要素」に変え、Click Element や Click Classes で絞る |
| GA4の数字と予約システムの申込数が合わない | 広告ブロッカーや、計測できない別ドメインの手前で数えている | 完全には合わない前提で、毎月の差の幅を見る |
何か変だと思ったら、最初に「公開したか」と「直接貼ったタグが残っていないか」を見ます。

次にやること
GTMを入れると決めたら、まず「GTMの導入と初期設定:コンテナを作ってサイトに入れ、GA4タグを1つ置く」でコンテナを作り、サイトにコードを入れて、Googleタグを1つ置きます。
トリガーと変数の選び方は「GTMのトリガーと変数:組み込み変数とデータレイヤーの使い分け」、公開前に動きを確かめる方法は「公開前の確認:GTMのプレビューとGA4のDebugView」にまとめています。
電話番号のボタンやLINEの友だち追加ボタンも数えるなら、「GTMでボタンのクリックを計測する:電話・LINE追加・資料請求」に進みます。