Googleタグマネージャー（GTM）は、ウェブサイトのタグ管理を簡単にする便利なツールです。この記事では、GTMを使ってカスタムイベントを設定する方法をわかりやすく解説します。カスタムイベントとは、特定のユーザーアクション（クリックやスクロールなど）を計測するための設定です。初心者の方でも安心して設定できるように、基本設定からトリガーの作成方法、イベントの確認方法までを丁寧に説明します。さらに、Googleアナリティクス（GA）との連携方法や実際の活用例も紹介します。この記事を読めば、カスタムイベントを使ってウェブサイトのユーザー行動を詳細に把握し、サイトの改善に役立てることができるようになります。
カスタムイベントの設定手順
カスタムイベントとは？
カスタムイベントとは、ウェブサイト上でユーザーが行った特定のアクション（クリック、フォームの送信、ページスクロールなど）をトラッキングするための設定です。これにより、ユーザーの行動を詳細に把握し、サイトの改善に役立てることができます。たとえば、どのボタンがよくクリックされるか、特定のフォームがどのくらい送信されているかなどがわかります。
イベントタグの作成方法
カスタムイベントを設定するためには、まずGoogleタグマネージャー（GTM）でイベントタグを作成する必要があります。以下の手順で進めていきます。
- GTMにログインし、設定したいウェブサイトのコンテナを選びます。
- 「タグ」メニューを選び、「新規」ボタンをクリックします。
- タグの名前を入力し、「タグの構成」をクリックしてタグタイプを選びます。ここでは「カスタムHTML」を選択します。
- カスタムHTMLタグの設定画面が表示されたら、以下のようにカスタムイベントをトリガーするためのコードを入力します。
<script>
document.querySelector('特定の要素').addEventListener('click', function() {
dataLayer.push({
'event': 'customEvent',
'eventCategory': 'カテゴリ名',
'eventAction': 'アクション名',
'eventLabel': 'ラベル名'
});
});
</script>- 「トリガー」を設定します。ここでは、特定のページや全ページでこのイベントを発火させるかを選択します。
- 最後に、設定を「保存」して完了です。
カスタムイベントの設定項目
カスタムイベントを設定する際には、いくつかの重要な項目を設定する必要があります。これらの項目は、イベントの詳細を定義し、分析ツールでのレポートを容易にします。
- イベント名（event）: これは、イベントを識別するための名前です。たとえば、「customEvent」など、わかりやすい名前を付けます。
- イベントカテゴリ（eventCategory）: イベントをグループ化するためのカテゴリ名です。たとえば、「ユーザーアクション」や「インタラクション」など。
- イベントアクション（eventAction）: イベントが発生したアクションの名前です。たとえば、「クリック」や「送信」など。
- イベントラベル（eventLabel）: イベントの詳細を示すラベルです。たとえば、「トップナビゲーションのボタンクリック」など、具体的な情報を含めます。
設定項目の例
| 設定項目 | 説明 | 例 |
|---|---|---|
| イベント名 | イベントの識別名 | customEvent |
| イベントカテゴリ | イベントのグループ名 | ユーザーアクション |
| イベントアクション | イベントが発生したアクションの名前 | クリック |
| イベントラベル | イベントの詳細を示すラベル | トップナビゲーションのボタンクリック |
これらの設定項目を正しく設定することで、Googleアナリティクスなどの分析ツールで詳細なレポートを作成でき、ユーザーの行動を効果的に追跡できます。たとえば、どのボタンがよくクリックされるかを分析することで、ユーザーインターフェースの改善ポイントを見つけることができます。
カスタムイベントの設定は、ウェブサイトのパフォーマンスを向上させるための重要なステップです。これを適切に設定することで、ユーザー行動のデータを詳細に収集し、サイトの改善に役立てることができます。
トリガーの作成と設定
トリガーとは？
トリガーとは、特定の条件が満たされたときにタグを発動させるための設定です。トリガーは、タグマネージャーに「いつ」タグを発動させるかを指示します。例えば、ユーザーが特定のボタンをクリックしたときや、ページが読み込まれたときなど、さまざまな条件を設定できます。これにより、ユーザーの特定の行動を追跡し、そのデータを収集することが可能になります。
トリガーの種類と使い方
トリガーにはさまざまな種類があり、それぞれ異なる用途に適しています。以下は主なトリガーの種類とその使い方です。
- ページビュー トリガー
- ページが読み込まれたときに発動します。
- 例: 新しいページが表示されたときに特定のタグを発動させる。
- クリック トリガー
- ユーザーがリンクやボタンをクリックしたときに発動します。
- 例: 購入ボタンがクリックされたときにコンバージョンタグを発動させる。
- フォーム送信 トリガー
- ユーザーがフォームを送信したときに発動します。
- 例: お問い合わせフォームが送信されたときに通知タグを発動させる。
- タイミング トリガー
- 一定の時間が経過したときに発動します。
- 例: ユーザーがページに滞在してから30秒後にポップアップを表示させる。
- スクロール トリガー
- ユーザーがページを一定の割合までスクロールしたときに発動します。
- 例: ページの50%までスクロールしたときにタグを発動させる。
- カスタム イベント トリガー
- カスタムイベントが発生したときに発動します。
- 例: 特定のJavaScriptイベントが発生したときにタグを発動させる。
カスタムトリガーの設定手順
カスタムトリガーを設定するには、以下の手順に従います。
- GTMにログインし、設定したいウェブサイトのコンテナを選びます。
- 「トリガー」メニューを選び、「新規」ボタンをクリックします。
- トリガーの名前を入力し、「トリガーの構成」をクリックします。
- トリガータイプを選びます。ここでは「カスタムイベント」を選択します。
- イベント名: カスタムイベント名を入力します。例:
customEventName - イベントが一致する条件: イベント名が一致する場合に発動するよう設定します。
- イベント名: カスタムイベント名を入力します。例:
- トリガーの条件を設定します。
- 条件を追加し、特定の条件が満たされたときにトリガーを発動させます。例:
eventCategoryがuserActionである場合に発動させる。
- 条件を追加し、特定の条件が満たされたときにトリガーを発動させます。例:
- トリガーの設定を保存します。
- 次に、タグとこのトリガーを関連付ける必要があります。
- 「タグ」メニューを選び、トリガーを設定するタグを選択します。
- タグの設定画面で「トリガー」セクションを見つけ、先ほど作成したカスタムトリガーを選びます。
- タグの設定を保存し、プレビューモードで正しく動作するか確認します。
- プレビューモードでサイトを開き、カスタムイベントが発生したときにタグが発動するかを確認します。
トリガー設定の例
| 設定項目 | 説明 | 例 |
|---|---|---|
| イベント名 | カスタムイベントの名前 | customEventName |
| イベントカテゴリ | イベントのグループ名 | userAction |
| イベントアクション | イベントが発生したアクションの名前 | click |
| 条件 | 特定の条件が満たされたときに発動 | eventCategoryがuserAction |
このようにカスタムトリガーを設定することで、特定の条件に基づいてタグを発動させ、ウェブサイトのユーザー行動を詳細に追跡することができます。
カスタムイベントの確認とデバッグ
イベントのプレビュー方法
カスタムイベントを設定した後、正しく動作するかどうかを確認するためには、プレビューモードを使用します。プレビューモードを使うことで、タグやトリガーが正しく発火しているかを確認できます。
- GTMにログインし、設定したいウェブサイトのコンテナを選びます。
- 画面右上にある「プレビュー」ボタンをクリックします。
- 新しいウィンドウが開き、確認したいウェブサイトのURLを入力して「スタート」をクリックします。
- ウェブサイトがプレビューモードで表示され、プレビューバーが下部に表示されます。このバーには、タグの発火状況やトリガーの動作状況が表示されます。
プレビューモードを終了するには、プレビューバーの右上にある「Exit Preview」ボタンをクリックします。
デバッグツールの使い方
GTMには、デバッグツールが組み込まれており、タグやトリガーの動作状況を詳細に確認できます。以下の手順でデバッグツールを使用します。
- プレビューモードでウェブサイトを開きます。
- プレビューバーが表示されたら、「Tags Fired」タブと「Tags Not Fired」タブを確認します。
- Tags Firedタブには、発火したタグのリストが表示されます。
- Tags Not Firedタブには、発火しなかったタグのリストが表示されます。
- 発火したタグをクリックすると、タグの詳細情報が表示されます。ここで、どのトリガーが発動したか、タグの設定が正しいかを確認できます。
デバッグツールでは、タグやトリガーの詳細な動作状況を確認できるため、設定ミスや条件の不一致を見つけやすくなります。
イベント動作の確認方法
イベントが正しく動作しているかを確認するためには、以下の方法を使用します。
1. Googleアナリティクスでの確認
カスタムイベントがGoogleアナリティクスに正しく送信されているかを確認する方法です。
- Googleアナリティクスにログインし、リアルタイムレポートに移動します。
- 「イベント」セクションを選び、発生したカスタムイベントが表示されているか確認します。
2. GTMのプレビューモードでの確認
プレビューモードを使用して、カスタムイベントが発火しているかを確認します。
- ウェブサイトで設定したアクション（クリックやスクロールなど）を実行します。
- プレビューバーの「Summary」タブで、カスタムイベントが発火しているか確認します。
3. ブラウザのデベロッパーツールでの確認
ブラウザのデベロッパーツールを使用して、イベントデータが正しく送信されているかを確認します。
- ブラウザのデベロッパーツールを開きます（通常、F12キーや右クリックメニューから開けます）。
- 「Network」タブを選び、フィルタリングオプションで「Collect」を選びます（Googleアナリティクスの場合）。
- ウェブサイトで設定したアクションを実行し、データが送信されているか確認します。
これらの手順を通じて、カスタムイベントの動作を詳細に確認し、必要な修正を加えることができます。設定が正しいかどうかを確認することで、イベントデータが正確に収集され、ウェブサイトの改善に役立てることができます。
Googleアナリティクス(GA)へのデータ送信
GAとGTMの連携方法
Googleアナリティクス（GA）とGoogleタグマネージャー（GTM）を連携することで、ウェブサイトのユーザー行動を詳細に追跡することができます。以下の手順で連携を行います。
- Googleアナリティクスの設定
- Googleアナリティクスにログインし、トラッキングIDを取得します。これは、GAのプロパティ設定ページで確認できます。
- トラッキングIDは「UA-XXXXXXXX-X」という形式です。
- GTMの設定
- GTMにログインし、対象のコンテナを選びます。
- 「タグ」メニューを選び、「新規」ボタンをクリックします。
- タグの名前を入力し、「タグの構成」をクリックして「Googleアナリティクス：ユニバーサルアナリティクス」を選びます。
- 「トラッキングタイプ」を「ページビュー」に設定し、トラッキングIDを入力します。
- 「トリガー」を設定します。通常は「全てのページ」に設定します。
- 設定が完了したら、「保存」をクリックします。
これで、GAとGTMの基本的な連携が完了です。
GAへのイベントデータ送信方法
次に、特定のイベント（例えば、ボタンクリックやフォーム送信）が発生したときに、そのデータをGAに送信する方法を説明します。
- イベントタグの作成
- GTMにログインし、「タグ」メニューを選びます。
- 「新規」ボタンをクリックし、タグの名前を入力します。
- 「タグの構成」をクリックして「Googleアナリティクス：ユニバーサルアナリティクス」を選びます。
- 「トラッキングタイプ」を「イベント」に設定します。
- イベントの設定項目
- 「カテゴリ」: イベントのカテゴリー（例：ユーザーアクション）
- 「アクション」: イベントのアクション（例：ボタンクリック）
- 「ラベル」: イベントのラベル（例：お問い合わせボタン）
- トリガーの設定
- 「トリガー」セクションで、イベントを発火させる条件を設定します。
- 例えば、「クリック – 特定の要素」を選び、ボタンのCSSセレクタを指定します。
- 設定が完了したら、「保存」をクリックします。
イベントデータの確認方法
GAに送信されたイベントデータが正しく記録されているかを確認する方法を説明します。
1. リアルタイムレポートで確認
- GAにログインし、**「リアルタイム」**セクションを選びます。
- **「イベント」**タブをクリックすると、リアルタイムで発生したイベントが表示されます。
- ここで、設定したイベント（例：ボタンクリック）が正しく記録されているか確認します。2. イベントレポートで確認
- GAの**「行動」**セクションから**「イベント」**を選びます。
- **「概要」**をクリックすると、全てのイベントデータが表示されます。
- ここで、設定したイベントのカテゴリやアクションごとにデータを確認できます。3. デベロッパーツールで確認
- ブラウザのデベロッパーツールを開き（通常、F12キーや右クリックメニューから開けます）、**「ネットワーク」**タブを選びます。
- フィルタリングオプションで**「collect」**を選びます（GAの場合）。
- ウェブサイトで設定したアクションを実行し、データが送信されているか確認します。カスタムイベントの活用例
クリックイベントの計測方法
クリックイベントは、ユーザーが特定のボタンやリンクをクリックしたときに発生するイベントです。これにより、どのボタンがどれだけクリックされたかを把握できます。以下の手順でクリックイベントを計測する方法を説明します。
手順
- GTMにログインし、対象のコンテナを選びます。
- 「タグ」メニューを選び、「新規」ボタンをクリックします。
- タグの名前を入力し、「タグの構成」をクリックして「Googleアナリティクス：ユニバーサルアナリティクス」を選びます。
- 「トラッキングタイプ」を「イベント」に設定します。
- イベントの設定項目を入力します。
- カテゴリ: クリックイベント
- アクション: ボタンクリック
- ラベル: 例えば「お問い合わせボタン」
- 「トリガー」を設定します。「新規」ボタンをクリックし、トリガーの名前を入力します。
- 「トリガーの構成」をクリックして「クリック – すべての要素」を選びます。
- 「一部のクリック」を選び、クリックした要素が特定の条件に合致する場合にのみ発動するように設定します。たとえば、ボタンのCSSセレクタを指定します。
- 設定が完了したら、「保存」をクリックします。
設定例
| 設定項目 | 説明 | 例 |
|---|---|---|
| カテゴリ | イベントの種類 | クリックイベント |
| アクション | イベントが発生した動作 | ボタンクリック |
| ラベル | イベントの詳細 | お問い合わせボタン |
これで、クリックイベントが発生した際にデータが収集され、Googleアナリティクスで確認できるようになります。
ページスクロールイベントの活用例
ページスクロールイベントは、ユーザーがウェブページをどの程度スクロールしたかを測定するためのイベントです。これにより、ページのどの部分までユーザーが見ているかを把握できます。
手順
- GTMにログインし、対象のコンテナを選びます。
- 「タグ」メニューを選び、「新規」ボタンをクリックします。
- タグの名前を入力し、「タグの構成」をクリックして「Googleアナリティクス：ユニバーサルアナリティクス」を選びます。
- 「トラッキングタイプ」を「イベント」に設定します。
- イベントの設定項目を入力します。
- カテゴリ: ページスクロール
- アクション: 例えば「50%スクロール」
- ラベル: ページ名
- 「トリガー」を設定します。「新規」ボタンをクリックし、トリガーの名前を入力します。
- 「トリガーの構成」をクリックして「スクロール深度」を選びます。
- 「垂直方向」を選び、スクロールの深度（例：50%、75%）を設定します。
- 設定が完了したら、「保存」をクリックします。
設定例
| 設定項目 | 説明 | 例 |
|---|---|---|
| カテゴリ | イベントの種類 | ページスクロール |
| アクション | イベントが発生した動作 | 50%スクロール |
| ラベル | イベントの詳細 | トップページ |
この設定により、ユーザーがページをどの程度スクロールしたかを追跡し、コンテンツのエンゲージメントを評価できます。
動画再生イベントの計測方法
動画再生イベントは、ユーザーがウェブページ上で動画を再生したときに発生するイベントです。これにより、動画の視聴状況を詳細に把握できます。
手順
- GTMにログインし、対象のコンテナを選びます。
- 「タグ」メニューを選び、「新規」ボタンをクリックします。
- タグの名前を入力し、「タグの構成」をクリックして「Googleアナリティクス：ユニバーサルアナリティクス」を選びます。
- 「トラッキングタイプ」を「イベント」に設定します。
- イベントの設定項目を入力します。
- カテゴリ: 動画再生
- アクション: 例えば「再生開始」
- ラベル: 動画のタイトル
- 「トリガー」を設定します。「新規」ボタンをクリックし、トリガーの名前を入力します。
- 「トリガーの構成」をクリックして「カスタムイベント」を選びます。
- 動画プレーヤーの設定に応じて、適切なカスタムイベント名を指定します。たとえば、YouTubeプレーヤーの場合、
video_startなど。 - 設定が完了したら、「保存」をクリックします。
設定例
| 設定項目 | 説明 | 例 |
|---|---|---|
| カテゴリ | イベントの種類 | 動画再生 |
| アクション | イベントが発生した動作 | 再生開始 |
| ラベル | イベントの詳細 | 製品紹介ビデオ |
この設定により、ユーザーが動画を再生したかどうかを追跡し、動画コンテンツのエンゲージメントを評価することができます。
これらのカスタムイベントを活用することで、ユーザーの具体的な行動を詳細に追跡し、ウェブサイトのパフォーマンスを向上させるための貴重なデータを得ることができます。
まとめ
今回の解説では、Googleタグマネージャー（GTM）を使ってカスタムイベントを設定し、それをGoogleアナリティクス（GA）に送信する方法について説明しました。まず、GTMとはウェブサイトのタグ管理を簡単にするツールであり、カスタムイベントを使うことでユーザーの特定の行動を追跡できます。クリックイベントでは、ユーザーが特定のボタンをクリックした回数を測定し、ページスクロールイベントでは、ページのどの部分までユーザーがスクロールしたかを追跡できます。また、動画再生イベントでは、ユーザーが動画を再生したかどうかを把握できます。
さらに、これらのイベントを設定し、データをGAに送信することで、ユーザー行動の詳細なレポートを作成できます。GAとGTMの連携方法やデバッグツールの使い方も紹介し、イベントの確認方法についても具体的に説明しました。これにより、ウェブサイトの改善点を見つけやすくなります。重要な設定項目や具体的な手順をしっかり理解し、実際の運用に活かしてください。今回の解説が、GTMとGAの活用に役立つことを願っています。詳しい設定方法については、公式ドキュメントを参考にしてください。
