Google Tag Manager（GTM）の基本を解説

Webマーケティング

始めに

WordPress で Google Analytics 導入 にて、GA4の導入について解説しました。その際に「Google Tag Manager（GTM）」を利用しましたが、サービスの解説ができてなかったので、本記事ではGTMの基本を解説していきます。

目次

対象者

  • GTMをこれから利用する方
  • GTMってどんなサービスなのか知りたい方

GTMの基本を解説

サービスの概要

GTMはその名のとおり、Googleが提供しているタグを管理するサービスです。
メリットとしては、 Webサイトのコードを直接書き換えずに、GTMの管理画面から変更ができる点にあります。

HTMLやCSS、JavaScriptなどのプログラミング言語を扱えない人でも画面上をぽちぽちするだけでユーザーの行動を追うことができます。

覚えるべきGTMの構成要素

GTMには主に3つの構成要素があります。

  1. タグ
    • Webサイトに埋め込むタグで、ツールを導入したりイベントを飛ばすことができます
  2. トリガー
    • タグをどのタイミングで埋め込むのかを制御します
  3. 変数
    • タグに設定する値を設定します

これらの3要素を組み合わせることで、ツールの導入やイベント送信を実現していきます。

GA4を導入したときは、下記のような設定をしていました。

  • タグ：Google タグ
    • GA4を導入するタグ
  • トリガー：Initialization – All Pages
    • ページが初期化されたとき
  • 変数：測定ID
    • どのGA4なのかを設定

全てのページで画面が初期化されたとき（トリガー）、G-xxxという測定ID（変数）のGA4タグ（タグ）を埋め込む、ということです。

目覚まし時計で例えると、アラーム機能（タグ）を朝の7時に設定（トリガー）し、音の大きさは大中小から選べて、大（変数）を選択したとすると、、、
朝7時になったことをきっかけ（トリガー）に、大音量（変数）のアラーム（タグ）が動く、というイメージです。

タグの種類はいっぱいある

タグの新規作成からタグ種類をクリックすると、以下の画面になると思います。

Webサイトに導入できるツールやサービスがたくさんあることがわかります。

「カスタムHTML」を選択すると、 Webサイトの中に自分で作成したHTMLを埋め込むこともできます。

他にも、コミュニティテンプレートと呼ばれるGoogle以外の企業や個人が作ったタグのテンプレートもあります。

例えば、Microsoftが提供している「Clarity」というサービスを導入するためのテンプレートがあります。これは、サイトに訪れたユーザーの行動を追跡することができ、カーソルの動きやページのスクロール率などを計測してくれるサービスです。（個人情報を扱っているサイトでは取り扱いに気をつけましょう）

コミュニティテンプレートはGoogleが安全や品質などを保証しているわけではないので、問題ないことの確認は行いましょう。

どんなタイミングでタグを埋め込めるのか

トリガータイプ

トリガータイプには以下のようなものがあります。

  • ページビュー
    • ページを開くこと
  • クリック
    • 何かをクリックしたこと
  • ユーザーエンゲージメント
    • YouTube動画を開始したなどのユーザー行動が行われたこと
  • JavaScriptエラー
    • ページ内で読み込んでいるJavaScriptでエラーが起きたこと
  • タイマー
    • ページ内にとどまった時間
  • カスタムイベント（上級者向け）
    • フロント側で配信されたイベントを検知したとき

タグを埋め込みたいタイミングを考えて設定しましょう。

カスタムイベントの補足

こちらのトリガーはその名のとおり、カスタムなイベントを検知するためのトリガーです。ユーザーのアクションに対して任意の情報を任意のタイミングで取得したいときなどに利用します。

例えば、ECサイトの商品レコメンド機能の効果検証をしたいとすると、「レコメンドされた商品一覧」や「クリックされた商品」の情報を最低限取得する必要があります。その取得方法の1つとして、カスタムイベントがあります。

Webサイトであれば、データレイヤーを利用することでカスタムイベントを送ることができ、それを検知してGA4にデータを流すことができます。

参考：データレイヤー | Tag Platform | Google for Developers

どんな情報が取得できるのか

組み込み変数

組み込み変数は、あらかじめGTM側が用意してくれている変数で、ほとんどのタグやトリガーの設定で利用できます。

ページのURLやパスなどの情報やJava Scriptのエラーメッセージ、クリックした要素のクラス名など、様々なパラメータを取得することができます。

組み込み変数の設定をクリックすると、下記のような画面が出てきます。

例えば、Page Pathは「https://moyanoie.com/example/path/1/」にアクセスしたとすると、「/example/path/1/」が返ってきます。

欲しいパラメータが組み込み変数にない場合は、ユーザー定義変数で取得できないかを検討してみてください。

参考URL：ウェブサイト用コンテナの組み込み変数 – タグ マネージャー ヘルプ

ユーザー定義変数

ユーザー定義変数は、組み込み変数では対応できない特定の変数を設定、利用することができます。

JavaScriptの変数やDOM要素のパラメータなど、自由度が高くパラメータを取得することができます。

ユーザー定義変数の設定、変数の変更をクリックすると、下記のような画面が出てきます。

データレイヤーの変数について

データレイヤーの変数を利用することで、トリガーで説明したカスタムイベントのパラメータを取得することができます。

例えば、以下のようなカスタムイベントが送信されたとします。

イベント名：商品のクリック
パラメータ1：商品ID
パラメータ2：ユーザーID

このとき、データレイヤーと呼ばれるオブジェクトにこれらのデータが入ってくるため、このデータレイヤーからパラメータ1、パラメータ2を取り出すために「データレイヤーの変数」を利用します。

参考URL：ウェブ用のユーザー定義変数タイプ – タグ マネージャー ヘルプ

まとめ

  • GTMは、Googleが提供しているタグを管理するサービス
  • タグ、トリガー、変数を組み合わせて設定する
  • タグは、どんなツール、イベントを埋め込むかを制御する
  • トリガーは、どんなタイミングでタグを埋め込みたいかを制御する
  • 変数は、タグやトリガーでどんなパラメータを利用するかを制御する
  • GAのカスタムイベントを利用することで、任意の情報を任意のタイミングで送信することができる

終わりに

今回はGTMの基本を解説させていただきました。こんな感じなのかな、というイメージがついていただけてたら嬉しいです。

GTMを利用してGA4を導入してみたい方は、解説している記事があるのでぜひ参考にしてみてください。
WordPressでGoogle Analytics導入

今回解説しきれなかった「GAのカスタムイベント」については、新しく記事を書きたいと思っています。もう少々お待ちいただけると幸いです…！

では、最後まで読んでいただきありがとうございました！