1. GoogleタグマネージャーでGoogleアナリティクスのタグを設置する

Updated
2021/8/8 8:12
Author
Jumpei IkegamiJumpei Ikegami
Webマーケターの強い味方であるGoogleタグマネージャーを使うと、Webサイトと外部サービスを連携するためのタグを簡単に管理することができます。このチュートリアルでは、実際にタグの配信設定をしながらGTMの仕組みを理解していきましょう。

前提知識

自分で管理しているWebサイトを持っていることが必要になります。
もし無い場合は、次のチュートリアルを実施することで実験で使えるWebサイトを作ることができます。
 
Jimdoを使って全世界に公開されたWebサイトをNoCodeで作る2021/6/20 5:362021/6/20 5:37

やること

WebサイトにGoogleタグマネージャーのタグを設置し、GTM経由でGoogleアナリティクスのタグを設置します。

体験すること

このチュートリアルによって、以下を体験します。
  • GTMを使うメリットを理解する
  • GTMのアカウント作成
  • GAのアカウント作成
  • GTMによるテンプレートを利用したタグの設置

チュートリアルスタート!

ここからは、実際に手を動かしながら読み進めていきましょう。ただ読むだけよりも、実際に体験した方が内容を深く理解することができます。

GTMを使う目的について理解する

Googleタグマネージャー(以下、GTM)は、Webサイトに「タグ」と呼ばれるHTML要素を挿入するためのサービスです。Webサイトの表示を直接制御するようなタグを配信することもできますが、一般的には外部サービスとの連携で使われることがほとんどです。GTMを使ってWebサイトと連携するような外部サービスは、次のような機能を持ったものが多いです。
  • エンドユーザーのアクセスログや行動ログなどの収集・解析
  • 広告配信
  • A/Bテスト、Web接客
WebサイトにHTML要素を直接設置することができれば、GTMで配信されるタグと同じHTML要素をサイトに直接設置することで、外部サービスとの連携をGTM無しで実現することもできます。
それでもGTMの導入には、Webサイトを直接編集するのに比べて、次のメリットがあります。
  • Webサイトを毎回編集しなくても、簡単にタグの追加・編集・削除ができる
  • 連携先サービスの公式タグテンプレートを利用することで、簡単にタグの設定ができる
  • タグの配信条件やタグ同士の配信順序を、GTM側の設定だけで制御できる
外部サービスとの連携設定を変える度に毎回Webサイトの改修が発生するようでは、対応スピードが落ちてしまいます。特に連携の検証をしている最中は、設定を細かく変えながら色々と試したくなるものです。それを容易にするために、外部サービスを1つでも導入するWebサイトにはまずGTMを入れることをおすすめします。
このチュートリアルでは、まずGTMでGoogleアナリティクス(以下、GA)のタグをWebサイトに配信してみます。GAはGTMと同じくGoogleのサービスなので、GTMではGAの公式のタグテンプレートが提供されています。そのため、タグの配信設定がとても簡単です。まずはGAタグの配信を通じてGTMの基本的な操作を体験しましょう。

GAのアカウントとプロパティを作成する

ご存知の通り、GAはWebサイトのアクセス解析サービスです。まず最初に、GAの「アカウント」と「プロパティ」を作成する必要があります。
GAでは、実際の分析をする場所を「ビュー」と呼びます。個々のビューを管理するための場所として、「アカウント」と「プロパティ」があります。
「アカウント」は、会社などの組織ごとに作ります。個人利用であれば、1つのアカウントを個人用に作成します。アカウントには、複数のプロパティが所属しています。
「プロパティ」は、計測対象のサイトやアプリごとに作ります。名称にはサイトの名前やドメイン名などを付けておきましょう。プロパティには、複数のビューが所属しています。
GAの「アカウント」と「プロパティ」の作成方法については、GAの画面を見ればわかると思います。もしわからなければ、インターネット上に記事がたくさんあるので調べましょう。
notion image

GTMのアカウントとコンテナを作成する

次に、GTMの「アカウント」と「コンテナ」を作成します。
GTMでは、個々のHTML要素の配信設定を「タグ」と呼びます。個々のタグを管理するための場所として、「アカウント」と「コンテナ」があります。GAと微妙に用語が違うので、紛らわしいですね。
「アカウント」は、GAと同様に、会社などの組織ごとに作ります。アカウントには、複数のコンテナが所属しています。
「コンテナ」は、計測対象のサイトごとに作ります。名称にはサイトの名前やドメイン名などを付けておきましょう。コンテナには、複数のタグが所属しています。
GTMの「アカウント」と「コンテナ」の作成方法についても、GTMの画面を見ればわかると思います。もしわからなければ、インターネット上に記事がたくさんあるので調べましょう。
notion image

GTM自体のタグをサイトに設置する

GTMも魔法のツールではないので、Webサイトにタグを配信するためには、GTM自体のタグを配信先のWebサイトに設置する必要があります。逆に言えば、WebサイトにGTM自体のタグさえ設置してしまえば、他のサービスと連携するためのタグはGTMから配信することができます。
まず、GTMの管理画面にログインします。ヘッダーにアカウントとコンテナが表示されています。先ほど作成したコンテナが表示されていることを確認します。もし違う場合は変更してください。
ヘッダーにある[管理]をクリックし、アカウントやコンテナの管理画面を開きます。コンテナ側にある[Googleタグマネージャーをインストール]をクリックします。GTMのタグをサイトに設置することを指して「インストール」と表現されています。[Google タグ マネージャーをインストール]画面には、2種類のコードが表示されます。
notion image
これらのコードをWebサイトに設置すると、WebサイトとGoogleタグマネージャーがいい感じにやりとりをしてくれて、GTM側の設定に合わせてタグが配信されるようになります。画面の指示の通りに、表示されている上のコードを<head></head>内のなるべく上のほうに、下のコードを<body></body>の一番最初に設置します。設置箇所については、厳密に守らなくても動くことが多いです。Webサイト自体のHTMLを直接編集してください。編集方法は、残念ながらWebサイトをどのように開発しているかによって異なります。Webサイトをホスティングしているサービスを使ってる場合は、カスタムコードを設置する仕組みがあるケースが多いので、それを使ってください。

GTMでGAタグの設定をする

GAとGTMの環境が準備できたら、さっそくGTMの設定によってGAのタグをWebサイトに配信してみましょう。
引き続き、GTMの管理画面で作業をします。ヘッダーに先ほど作成したコンテナが表示されていることを確認します。
次に、タグを新規作成します。左サイドバーの[タグ]を選択し、[新規]をクリックします。すると、タグの新規作成画面が開きます。[タグの設定]をクリックすると、[タグタイプを選択]が開きます。今回はGAのタグを設置するので、 "Googleアナリティクス: ユニバーサルアナリティクス" を選択します。
[タグの種類]が "Googleアナリティクス: ユニバーサルアナリティクス" になったことを確認します。[トラッキングタイプ]では、どんなデータを計測するかを選びます。ここでは "ページビュー"に設定しておきます。これで、ページ閲覧に関する情報をトラッキングできるようになります。ちなみに、ここの設定次第ではボタンクリックなどを設定できるようになります。次に、[Googleアナリティクス設定]のプルダウンから、[新しい変数]を選び、[変数の設定]画面を開きます。
notion image
変数の設定では、GAの[トラッキングID]が必要になります。トラッキングIDによって、どのGAのプロパティに対して計測を行うかをGTMに知らせることができます。
ここで、トラッキングIDを取得するために横道に外れて、GAの管理画面に移動します。GTMの画面を開いたブラウザのタブは残したまま、別のブラウザタブでGAの管理画面を開きます。GAの管理画面にログインできたら、ヘッダーに先ほど作成したプロパティが表示されていることを確認します。もし違う場合は変更してください。次に、左サイドバーから[管理]を開きます。現在のアカウント、プロパティ、ビューが表示されます。トラッキングIDは、計測対象のサイトごとに生成されます。GAの概念の中で、サイトに対応するものは「プロパティ」でした。そこで、[プロパティ設定]を開いてみます。すると、めでたく "UA-" で始まる[トラッキングID]が表示されました。これをクリップボードにコピーします。
notion image
GAのトラッキングIDが手に入ったので、先ほど作業の途中だったGTMの管理画面に戻ります。[変数の設定 > トラッキングID]にコピーした実際のトラッキングIDを貼り付けます。トラッキングID以外にも色々と高度な設定が見えますが、GAのチュートリアルは別の機会にすることにして、いったんデフォルトのままでOKです。変数の設定が完了したので、左上に表示された "名前のない変数" という部分をクリックし、変数に名前を付けます。「変数ってなんやねん」という感じだと思いますが、「同じ設定を色んなタグで使いまわすためのもの」だとふわっと理解しておいてください。変数名は基本的には何でもOKです。特にこだわりがなければ、 "[GA]デフォルト設定" と入力しましょう。
notion image

トリガーの設定をする

ここまでで「どんなタグを配信するか(What)」の設定が完了しました。次に、「いつタグを配信するか(When)」の設定をします。GTMでは、タグの配信タイミング設定のことを「トリガー」と呼びます。トリガーとは、拳銃で弾を発射するための引き金のことです。GTMでも、タグを発射するための引き金をいつ引くかについて、「トリガー」で設定します。
さて、今回のタグは、どのタイミングで配信すればいいでしょうか?配信するタグは、GAでページビューを計測するタグでした。計測を除外するページが特に無ければ、すべてのページビュー時にタグが配信されれば良さそうです。
タグ編集画面で[トリガー]をクリックすると、[トリガーの選択]画面が開きます。幸い、 "All Pages" という「すべてのページビュー時に配信する」という設定がデフォルトで用意されています。これを選びましょう。これですべてのページビュー発生時に設定したGAのタグが配信されるようになります。もちろん、配信するページを一部に絞りたいときや、ボタンクリックをトラッキングしたいときなどは、トリガーを新規作成する必要があります。トリガーのカスタマイズについては、次以降のチュートリアルで体験しましょう。
これで、タグ全体の設定が完了しました。最後に、管理しやすいようにタグに名前を付けましょう。タグ編集画面左上の "名前のないタグ" と表示された部分をクリックします。タグ名も、一部使えない文字はありますが、基本的には何でもOKです。特にこだわりがなければ、 "[GA]ベージビュー" と入力しましょう。
notion image

公開前のタグをプレビューする

GTMの素晴らしい機能の1つに、「プレビュー機能」があります。プレビューをすると、タグの変更を実際のWebサイトに反映させる前に、自分だけに変更後のタグを配信してみることができます。これによって、意図したページで配信されるか、タグの内容が間違っていないかを事前に確認することができます。
作成したGAのタグを、プレビューしてみましょう。ヘッダー右側の[プレビュー]をクリックします。すると、プレビューモードが有効になります。その状態で、GTMタグを設置したWebサイトを別のブラウザタブで開きます。すると、なんとWebページにオーバーレイする形で、GTMプレビュー用のUI(デバッグペイン)が表示されます。
notion image
自分が管理しているサイト上に突然GTM用の画面が表示されて、驚いたかもしれません。この表示は同一ブラウザでGTMにログインしプレビューを有効にしている場合にしか表示されません。エンドユーザーに見えることはないので安心してください。
デバッグペインの[Tags Fired On This Page]に、閲覧中のページで配信されるタグが表示されます。ここには、編集したけれどまだ公開されていないタグも含まれます。先ほど作成したGAのタグが表示されていれば、問題ありません。
もしGTMのデバッグペインそれ自体が表示されない場合は、次のことを確認してください。
  • Webサイトを開いているタブで、キャッシュを無視したハード更新をしてみる(Windows: Ctrl + F5 or Ctrl + Shift + R / Mac: ⌘ + Shift + R
  • GTM自体のタグがWebサイトに正しく設置されているかチェック
また、GTMのデバッグペインにGAのタグが表示されない場合は、GTM側のGAタグの配信設定が正しいかを確認してください。GTM側の設定を変更した場合、プレビューを[更新]することで、プレビューに変更内容が反映されるようになります。

タグを公開する

いよいよ、タグを公開します。
公開作業は、タグ単位ではなく「ワークスペース」単位で行います。ワークスペースとは、コンテナの中で実際に作業をする場所のことです。もし実際に配信されているタグを直接編集するとしたら、タグの編集途中でうっかり保存してしまい、中途半端な状態のタグがWebサイトに配信されてしまう恐れがあります。GTMではそれを防ぐための仕組みとして、ワークスペースがあります。タグの新規作成や編集などのコンテナ内での設定変更は、実際に配信されているタグに即座に反映されるわけではなく、ワークスペースに一時的に溜まっていきます。それらの設定変更に問題がないことを確認した上で、ワークスペースに溜まった変更をまとめて公開できます。ワークスペース機能によって、編集、確認、公開の3段階に分けて安全に作業することができるわけです。便利ですね。ちなみに今回は説明しませんが、複数人で別々のワークスペースで作業して編集が競合しないようにすることもできます。
notion image
さて、実際にタグを公開してみましょう。ヘッダーの右側にある[公開]をクリックし、[変更の送信]画面を開きます。[ワークスペースの変更]には、ワークスペース内での変更が一覧表示されます。意図していない変更が紛れ込んでいないか、公開前の最後の確認をします。また、[バージョン名]と[バージョンの説明]を入力することができます。タグの追加や変更が重なってくると、「このタグはいつどんな理由で今の形に編集したんだっけ?」ということがわからなくなってきます。そこで、変更の理由がわかるように記録するために「バージョン」の仕組みを使うことができます。せっかくなので、[バージョン名]には "GAのタグを新規追加" と、[バージョンの説明]には "・GAのタグを全ページに配信する設定を新規追加" と入力しましょう。最後に、右上の[公開]をクリックします。
これで、すべてのエンドユーザーに対してGAのタグが配信されるようになりました。GAの管理画面から、ページビューが計測されていることが確認できるようになります。
notion image

GAのタグが配信されるまでのフローを簡単に理解する

ここまでで、GTMでの初めてのタグ設置作業は完了です。
せっかくなので、GTMがどのような仕組みでWebサイトにタグを配信しているのかを簡単に理解しましょう。今回の設定で、エンドユーザーがブラウザでWebサイトを開いてから、GAにページビューの情報を送信するまでの処理の流れは、次の画像の通りです。(Webサイト自体の読み込みについては省略しています)
notion image
細かい点は気にしなくても大丈夫ですが、サイトに設置した「GTM自体のタグ」が読み込まれることをきっかけに、GTMやGAとの連携が連鎖的に実行されていることがわかります。GTMやGAのサービスの裏では、それぞれGoogleのサーバーが動いています。ブラウザとサーバーの間はHTTPと呼ばれる仕組みで通信され、情報のやりとりが高速に行われています。
これで今回のチュートリアルは終了です。今後のチュートリアルでは、独自のスクリプトをGTMで配信したり、より高度なトリガー設定を試していきましょう。
 

次のチュートリアル

2. 特定のページだけにカスタムJavaScriptをタグとして配信する2021/6/20 5:312021/8/8 8:24