Googleタグマネージャー(GTM)でできること・導入・初期設定をマスターしよう

基礎を身につければ、GA4とGTMは怖くなくなります。→6時間のオンライン講座を受ける

  • GTMが何なのかわからない…。GAとは何が違う?
  • GTMを使うと何ができる?
  • GTMの初期設定方法が知りたい。

Webサイト運営をされている方の中には、そんなお悩みをお持ちの方も多いことでしょう。

Google タグマネージャー(GTM)は、Webサイトに設置するタグ(短いHTMLコード)の設定や管理を行うためのツールです。GTMを導入することで、「HTMLを編集せずにタグを設置できる」「GAだけでは取れないイベント計測ができる」などさまざまなメリットを受けられます。

「メリットは分かっているけれど、設定がややこしくて導入をためらっている…」という方も多いことでしょう。

この記事ではGoogle タグマネジャー(GTM)の役割と初期設定について解説します。

図解や画面キャプチャを交えて丁寧に説明するので、「書籍や他のWeb記事を読んでも理解できない…」という方も、もう一度チャレンジしてみてください。

動画で学びたい方向け

本記事の内容は、YouTube動画でも解説しています。

GA4を「ざっくりと」理解したい方へ

Googleアナリティクスを活用するための基礎知識をまとめたebookをご用意しました。どなたでも無料でダウンロードしていただけますので、以下のボタンからご利用ください。

※新しいタブでフォームが開きます。

読みたい場所にジャンプ

GTMとは

Googleタグマネージャーは、その名の通りWebサイトに設置するタグを管理するためのツールです。

Webの世界でいう「タグ」とは、HTMLやJavaScriptでできた短いコードのことを指します。タグという名称以外にも、「スニペット」「コード」などと呼ばれます。

例えばGoogle アナリティクス(GA)をWebサイトに設定したことがある方なら、「トラッキングコード」という短いコードを見たことがあるかもしれません。GAのようにWebサイトに機能追加をする場合、こうしたコードをHTMLに記述していくことになります。

しかし、Webサイトで使うツールが増えていけば、その分HTMLに記述するコードも増え、どれが何のコードなのかわからなくなってしまいます。また、コードを追加するたびにHTMLソースを編集する必要があり手間がかかります。記述ミスにより、タグが動かなくなったり、Webサイトの表示が崩れてしまうといった危険もあるでしょう。

こうした問題を解決するのが、GTMの役割です。WebサイトにはGTMのタグ1つだけを設置しておき、その他のタグはタグマネージャーの管理画面上で設定します。

GTMのメリット

Google タグマネージャーにはさまざまなメリットがあります。ここでは代表的な以下3点について解説します。

  • HTMLを編集せずタグを設置できる
  • タグに名前をつけて管理できる
  • GAだけでは取得できないイベントを計測できる

HTMLを編集せずタグを設置できる

タグマネージャーを導入すれば、HTMLを編集することなくタグの追加や削除が可能です。

タグを追加するたびにエンジニアや制作会社の外注に頼らなくてもよくなり、マーケティング施策をスピーディに始めることができます。

また、HTMLを編集したことによるレイアウト崩れなど、思わぬトラブルも避けることも可能です。

タグに名前をつけて管理できる

Webサイト内に導入したツールなどが増えてくると、何のために追加したタグなのかわからなくなってしまうことがあります。

GTMでは、管理画面上でタグに任意の名前を付けることができ、変更や削除の際に目的のタグを見付けやすくなります。

命名規則を決めておけば、チームでタグを管理するときにも、必要なタグを消したり不要なタグを増やしたりすることを防げるでしょう。

GAだけでは取得できないイベントを計測できる

Googleタグマネージャーを使うと、Webサイト上のユーザー行動(クリックやスクロールなど)を簡単に計測できるのが、Webマーケティング施策においては最大のメリットと言えるでしょう。

GA4では、Webサイト上のユーザー行動を「イベント」という単位で計測します。Googleタグマネージャーは、このイベントを発生させるタイミングを柔軟に制御できるツールです。

タグマネージャーのイベント計測は以下のようなイメージで行われます。タグマネージャーは常にサイト内の動きを見ており、ユーザーが何らかのアクションを起こすとタグを動かします。

タグマネージャーによるイベント計測のイメージ

こうしたイベントトラッキングはGoogleアナリティクス単体でも可能ですが、HTMLタグを編集しなければならず、手軽に行えるものではありません。ですが、GTMを導入すればサイト内の特定のボタンクリックやユーザーのスクロール率などを、ノンコーディングで設定することが可能です。

GA4のイベントについて

「そもそもGA4のイベントの概念がよくわからない」という方向けには、以下の記事で詳しく説明していますので、あわせてご覧ください。

GA4とGoogleタグマネージャーを組み合わせてできる代表的なイベントについては、以下の記事でも解説していますので、こちらもご覧ください。

GTMを使ってイベントを作成すると、同じ条件(トリガー)で広告タグなどGA以外のタグを動かすこともできるというメリットもあります。広告運用を行っている方にとっても、GTMは強い味方になってくれます。

GTMの導入方法

GTMの設定は以下の流れで行います。

  1. アカウント作成
  2. コンテナ作成
  3. GTMタグ設置

それぞれ1つずつ解説していきます。

アカウント作成

まずはGTMのアカウントを作成しましょう。

※GTMを使用する場合のブラウザはGoogle Chromeを使うのが便利です。ChromeにGoogleアカウントでログインした状態で進めてください。

「Google タグマネージャー」と検索すると、Googleマーケティングプラットフォームのページにたどり着きます。

ページ内の「無料で利用する」ボタンを押しましょう。

タグマネージャーのページに移動するので、「アカウントを作成」ボタンを押します。

アカウント名」は任意で良いのですが、社名や部署名などを入れておくと便利です。「」は日本を選択しましょう。

続いて、アカウントの中にコンテナを作っていきます。

コンテナ作成

アカウント設定から続けてコンテナの作成画面に移ります。

GTMは、1つのアカウントの中に複数の「コンテナ」と呼ばれる箱を作り、それぞれのコンテナごとにWebサイトを管理できるという構造になっています。

コンテナ名」にWebサイト名を入力し、「ウェブ」を選択しましょう。

利用規約が表示されますので、「はい」を押しましょう。

※利用規約は現状、日本語版はありません。内容としては、「Google以外のタグについては責任を負いません」「個人を特定できるデータを取得しないでください」といったことが書かれています。

利用規約に同意すると、「Google タグマネージャーをインストール」というポップアップが表示され、GTMの計測用コードが表示されます。

この2つのコードを両方ともWebサイトに設置することで、GTMを使えるようになります。次のパートで設置していきます。

WebサイトへのGTMタグ設置

GTMのコードをWebサイトに設置する場合、環境により方法が異なります。

大きくは以下の3パターンがあります。

  1. HTMLファイルへの記述
    Webサイトを構成しているHTMLファイルに直接記述する方法です。
    HTMLのみで構成された静的Webサイトで使う方法です。
  2. WordPressへの設置
    WordPressのテーマヘッダーに記述するか、テーマの機能を使って設置する方法です。
  3. プラグインを使う(Word Press)
    WordPressであれば、「Site Kit by Google」というプラグインを利用できます。

WordPressへのGTM設置方法については以下の記事で詳しく解説しています。こちらもお役立てください。

その他のプラットフォームへの設置

WixやSTUDIOなどのWebサイト制作ツール、ShopifyやBASEなどのECカートシステムにもGTMを設置することが可能です。それぞれツールにより連携機能が異なります

ここでは、2番目のWordPressへの設置方法を中心に解説します。

WordPressへの設置:テーマ機能を使う場合

WordPressテーマによっては、サイト内にコードを埋め込む機能を搭載しているものがあります。

例えば当サイトが使用しているSWELLでは、カスタマイズメニューの中の「高度な設定」から、headとbodyにタグを埋め込むことができます。

この機能はWordPressテーマにより異なるので、詳しくはテーマの公式サポートページなどをご確認ください。

テーマに同様の機能がない場合やオリジナルのテーマを使っている場合には、次のパートで紹介するテーマヘッダーに直接記述する方法で設置しましょう。

WordPressへの設置:テーマヘッダーに直接記述する場合

使用しているWordPressテーマに該当する機能がない場合は、テーマヘッダー(header.php)に記述しましょう。この方法はテーマファイルを直接編集するので慎重に行いましょう。

※編集前に、必ずバックアップをとってください。

WordPressのダッシュボードから、「外観>テーマファイルエディタ」と進み、テーマファイルの中のテーマヘッダー(header.php)を選択します。

下の図のように、テーマヘッダーの中の<head>開始タグの直後に1番目のタグ、<body>開始タグの直後に2番目のタグを貼り付けます。

※使っているテーマにより、ヘッダー内のタグの位置や内容に違いがあります。

テーマファイルを保存すれば、GTMタグの設置は完了です。

静的HTMLサイトの場合にも同様に、<head>開始タグと<body>開始タグの直後にタグを設置することでGTMを使えます。ただしWordPressとは異なり、すべてのHTMLファイルに適用する必要がある点に注意しましょう。

GTMへのタグ設置(GA4タグ)

GTMのタグを設置したら、Google アナリティクス(GA4)のタグを設定してみましょう。

「テキストで見てもよくわからない」という方向けに、GoogleタグマネージャーのUdemyのオンライン講座もご用意しています。

GTMやGA4の初期設定、イベント計測からLooker Studioでのレポート作成までワンストップで解説しました。

以下のリンクは割引クーポンになっていますので、よろしければご利用ください。

【実践】GoogleタグマネージャーによるGA4カスタムイベント設定入門

※割引率はタイミングにより異なります。

タグの作成

GTM管理画面で「新しいタグを追加」をクリックします。

最初にタグの名前をつけておきましょう。ここでは「GA4設定」とします。

名前をつけたら、「タグの設定」エリアの中央部分をクリックします。

2023年9月より「Googleタグ」が導入されました。GA4初期設定の方法についてもGoogleタグに合わせた内容に変更しています。※旧「Google アナリティクス:GA4設定」の設定方法については、本章の最後に記載しております。

「タグタイプを選択」の画面で「Googleタグ」をクリックします。

「Googleアナリティクス」の中にも「Googleタグ」がありますが、どちらを選択しても同様のものになります。

「タグID」の空欄にGoogleタグのID(取得方法は後述)を入力します。

タグIDの取得方法

タグIDは、GA4の管理画面から取得します。

STEP
データストリームを選択

GA4管理画面の「データストリーム」をクリックします。

対象のストリームを選択します。

STEP
GoogleタグIDを取得

ストリーム内の「タグ設定を行う」をクリックします。

「Googleタグ」部分にある「G-XXXXXXXXXX」形式のIDをコピーします。このIDをGoogleタグマネージャーに設定します。

2023年9月、Googlaタグが導入され上記の方法に変わりました。

参考:[GA4] Google タグ ID を確認する

旧「Google アナリティクス:GA4設定」の設定方法

2023年9月以前の設定方法です。Googleタグの導入により、2023年9月以降に新規作成したコンテナでは、この方法は使えません。

旧「Google アナリティクス:GA4設定」の設定方法を見る
STEP
GA4設定タグを選択

「タグタイプを選択」のメニュー内から、「Google アナリティクス:GA4設定」を選択します。

STEP
測定IDの入力

測定ID」に、GA4の測定IDを記入します。

GA4の測定IDがどこにあるかわからない場合は、以下の手順で取得してください。

GA4測定IDの取得方法

GA4の測定IDは、以下の方法で取得できます。

GA4管理画面左下の歯車アイコンをクリックし、「データストリーム」を選択します。

データストリーム名をクリックします。

表示された「ウェブストリームの詳細」の中の「G -XXXXXXXXXX」という文字列がGA4の測定IDです。これをGTMに設定します。

トリガーの作成

次はトリガーの作成です。

トリガーとは、タグを動かす条件のことを指します。今回は「GA4のタグを全ページで動かす」という条件を設定します。

タグ設定画面「トリガー」エリアの中央付近をクリックします。

「トリガーの選択」画面で、「Initialization – All Pages」を選択します。

「Initialization – All Pages」は、GA4のタグをGTMが設置されたWebサイト内の全ページで最初に動かすという働きをするトリガーです。これを設定することで、すべてのページでGA4のトラッキングコードを動かすことができるようになります。

トリガーを設定したら、「保存」ボタンを押して完了です。

次のパートで、タグが正しく動くかどうか検証します。

プレビューで検証

GTMのプレビュー機能は、タグが正しく設定されているかどうかを本番公開前に確認するためのものです。タグ設定を行ったら、公開前に必ずプレビュー機能で確認するようにしましょう。

GTM管理画面右上の「プレビュー」ボタンを押します。

新しく「Tag Assistant」というタブが開くので、入力欄に検証したいサイトのURLを記入し「Connect」ボタンを押します。

新しいタブが立ち上がり、検証するWebサイトが表示されたら、Tag Assistantタブに戻り、「Continue」ボタンを押します。

Tag Assistantの画面で、タグが正しく動いているかを確認していきます。

画面内には「Tags Fired」と「Tags Not Fired」という二つのエリアがあり、現在動いているタグは「Tags Fired」側に表示されます(マーケティング界隈では、タグが「発火している」という表現をします)。

以下の画像のように、先ほど設定した「GA4設定」タグがTags Firedのエリアにあれば、正しく動いている証拠です。

念の為、GA4のリアルタイムレポートでも確認しておきましょう。

GTMのプレビューを起動した状態でGA4のリアルタイムレポートにアクセスすると、tagassistant.google.comを経由したアクセスがカウントされているはずです(数秒のタイムラグがあります)。

プレビューしただけでは、タグが本番公開されていません。次のパートで最終段階について解説します。

本番公開

タグ設定が完了しプレビューで動作確認をしたら、設定内容を本番公開しましょう。

GTM管理画面右上の「公開」ボタンを押します。

開いた画面で「バージョン名」にわかりやすい名前を記入します。後でどんな作業を行ったか確認しやすいよう、バージョン名には作業内容を記入するのがおすすめです。ここでは「GA4初期設定」としておきます。

右上の「公開」ボタンを押して完了です。

GA4タグを直接設定している場合は

もしも、すでにGA4のタグをWebサイトに直接設定している場合には、GTMコンテナの本番公開後に削除しておきましょう。

以上がGTMの初期設定とGA4タグの設定方法です。GA4のタグ設置が完了したら、最低限やっておきたい初期設定も済ませておきましょう。以下の記事で解説しているので、あわせてご覧ください。

まとめ

Google アナリティクスなどマーケティングツールの機能を最大限活かすには、Google タグマネージャー(GTM)の利用が不可欠です。

GTMを使うと、以下のようなことが可能になります。

  • HTMLを編集せずタグを設置できる
  • タグに名前をつけて管理できる
  • GAだけでは取得できないイベントを計測できる

設定が難しそうだからと食わず嫌いせずに、本記事を参考にぜひ導入してみてください。

GTMを活用すると、Webサイト内でのスクロールやクリックなどのユーザー行動が手に取るようにわかるようになります。より複雑な設定方法については以下の記事でも解説しているので、あわせてご覧ください。

イベント計測をコンバージョン率改善に役立てるためには、コンバージョンまでの中間地点に設定する「マイクロコンバージョン」という考え方が重要です。マイクロコンバージョンについては、以下の記事で詳しく解説しています。こちらもあわせてご覧ください。

GA4を「ざっくりと」理解したい方へ

Googleアナリティクスを活用するための基礎知識をまとめたebookをご用意しました。どなたでも無料でダウンロードしていただけますので、以下のボタンからご利用ください。

※新しいタブでフォームが開きます。

屋嘉比 馨
ボーダーヘイズ・ジャパン代表
ウェブ解析士協会所属・ウェブ解析士。
ラジオ局、広告代理店などに勤務ののち、大手SIerのWebマーケティング担当に。
2022年に独立し、ボーダーヘイズ・ジャパンを設立。
これまで100サイト以上の改善・計測環境構築に貢献。

YouTubeチャンネル

本サイトの内容を動画でも発信中です。文章で見てもいまいちよくわからないという方はこちらもご覧ください。

ブログの内容と若干異なる場合もございます。

読みたい場所にジャンプ