Googleタグマネージャー(GTM)でカスタムイベントを設定する方法

Googleタグマネージャー（GTM）は、ウェブサイトのタグ管理を簡単にする便利なツールです。
この記事では、GTMを使ってカスタムイベントを設定する方法をわかりやすく解説します。
カスタムイベントとは、特定のユーザーアクション（クリックやスクロールなど）を計測するための設定です。

初心者の方でも安心して設定できるように、基本設定からトリガーの作成方法、イベントの確認方法までを丁寧に説明します。

GA4、GTM 個別サポート（無料）のご案内

GA4・GTMの設定やデータ活用でお悩みの方へ、初回限定で無料の30分相談を実施しています。
この相談では、GA4やGTMの基本設定やデータの見方について具体的なアドバイスをおこないます。ご自身でGA4、GTMを活用する第一歩のサポートを目的に、無理な売り込みは一切ありませんので、どうぞお気軽にご利用ください。

Webマーケティング関連書籍を多数執筆、全国でわずか100人程度のプロのウェブ解析士マスターが直接アドバイスします。

カスタムイベントの設定手順

カスタムイベントとは？

カスタムイベントとは、ウェブサイト上でユーザーが行った特定のアクション（クリック、フォームの送信、ページスクロールなど）をトラッキングするための設定です。
これにより、ユーザーの行動を詳細に把握し、サイトの改善に役立てることができます。
たとえば、どのボタンがよくクリックされるか、特定のフォームがどのくらい送信されているかなどがわかります。

イベントタグの作成方法

カスタムイベントを設定するためには、まずGoogleタグマネージャー（GTM）でイベントタグを作成する必要があります。
以下の手順で進めていきます。

Googleタグマネージャーにログインし、設定したいウェブサイトのコンテナを選びます。
「タグ」メニューを選び、「新規」ボタンをクリックします。
タグの名前を入力し、「タグの構成」をクリックしてタグタイプを選びます。ここでは「カスタムHTML」を選択します。
カスタムHTMLタグの設定画面が表示されたら、以下のようにカスタムイベントをトリガーするためのコードを入力します。<script> document.querySelector('特定の要素').addEventListener('click', function() { dataLayer.push({ 'event': 'customEvent', 'eventCategory': 'カテゴリ名', 'eventAction': 'アクション名', 'eventLabel': 'ラベル名' }); }); </script>
「トリガー」を設定します。ここでは、特定のページや全ページでこのイベントを発火させるかを選択します。
最後に、設定を「保存」して完了です。

カスタムイベントの設定項目

カスタムイベントを設定する際には、いくつかの重要な項目を設定します。
これらの項目は、イベントの詳細を定義し、分析ツールでのレポートを容易にします。

イベント名（event）
これは、イベントを識別するための名前です。たとえば、「customEvent」など、わかりやすい名前を付けます。
イベントカテゴリ（eventCategory）
イベントをグループ化するためのカテゴリ名です。たとえば、「ユーザーアクション」や「インタラクション」など。
イベントアクション（eventAction）
イベントが発生したアクションの名前です。たとえば、「クリック」や「送信」など。
イベントラベル（eventLabel）
イベントの詳細を示すラベルです。たとえば、「トップナビゲーションのボタンクリック」など、具体的な情報を含みます。

これらの設定項目を正しく設定することで、Googleアナリティクスなどの分析ツールで詳細なレポートを作成でき、ユーザーの行動を効果的に追跡できます。

トリガーの作成と設定

トリガーとは？

トリガーとは、特定の条件が満たされたときにタグを発動させるための設定です。
トリガーは、タグマネージャーに「いつ」タグを発動させるかを指示します。
例えば、ユーザーが特定のボタンをクリックしたときや、ページが読み込まれたときなど、さまざまな条件を設定できます。
これにより、ユーザーの特定の行動を追跡し、そのデータを収集することが可能になります。

トリガーの種類と使い方

トリガーにはさまざまな種類があり、それぞれ異なる用途に適しています。以下は主なトリガーの種類とその使い方です。

ページビュートリガー
ページが読み込まれたときに発動します。
例: 新しいページが表示されたときに特定のタグを発動させる。
クリックトリガー
ユーザーがリンクやボタンをクリックしたときに発動します。
例: 購入ボタンがクリックされたときにコンバージョンタグを発動させる。
フォーム送信トリガー
ユーザーがフォームを送信したときに発動します。
例: お問い合わせフォームが送信されたときに通知タグを発動させる。
タイミングトリガー
一定の時間が経過したときに発動します。
例: ユーザーがページに滞在してから30秒後にポップアップを表示させる。
スクロールトリガー
ユーザーがページを一定の割合までスクロールしたときに発動します。
例: ページの50%までスクロールしたときにタグを発動させる。
カスタムイベントトリガー
カスタムイベントが発生したときに発動します。
例: 特定のJavaScriptイベントが発生したときにタグを発動させる。

カスタムトリガーの設定手順

カスタムトリガーを設定するには、以下の手順に従います。

Googleタグマネージャーにログインし、設定したいウェブサイトのコンテナを選びます。
「トリガー」メニューを選び、「新規」ボタンをクリックします。
トリガーの名前を入力し、「トリガーの設定」をクリックします。
トリガータイプを選びます。ここでは「カスタムイベント」を選択します。
イベント名: カスタムイベント名を入力します。例: customEventName
イベントが一致する条件: イベント名が一致する場合に発動するよう設定します。
トリガーの条件を設定します。例: eventCategoryがuserActionである場合に発動させる。
トリガーの設定を保存します。
次に、タグとこのトリガーを関連付ける必要があります。「タグ」メニューを選び、トリガーを設定するタグを選択します。タグの設定画面で「トリガー」セクションを見つけ、先ほど作成したカスタムトリガーを選びます。
タグの設定を保存し、プレビューモードで正しく動作するか確認します。

トリガー設定の例

設定項目	説明	例
イベント名	カスタムイベントの名前	customEventName
イベントカテゴリ	イベントのグループ名	userAction
イベントアクション	イベントが発生したアクションの名前	click
条件	特定の条件が満たされたときに発動	eventCategoryがuserAction

このようにカスタムトリガーを設定することで、特定の条件に基づいてタグを発動させ、ウェブサイトのユーザー行動を詳細に追跡することができます。

カスタムイベントの確認とデバッグ

イベントのプレビュー方法

カスタムイベントを設定した後、正しく動作するかどうかを確認するためには、プレビューモードを使用します。
プレビューモードを使うことで、タグやトリガーが正しく発火しているかを確認できます。

Googleタグマネージャーにログインし、設定したいウェブサイトのコンテナを選びます。
画面右上にある「プレビュー」ボタンをクリックします。
新しいウィンドウが開き、確認したいウェブサイトのURLを入力して「connect」をクリックします。
ウェブサイトがプレビューモードで表示され、プレビューバーが下部に表示されます。このバーには、タグの発火状況やトリガーの動作状況が表示されます。プレビューモードを終了するには、プレビューモードの右下にある「Tag Assistant」のウィンドウで「Finish」ボタンをクリックします。

デバッグツールの使い方

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は「G-XXXXXXXX-X」という形式です。
GTMの設定：GTMにログインし、対象のコンテナを選びます。「タグ」メニューを選び、「新規」ボタンをクリックします。
タグの名前を入力し、「タグの設定」をクリックして「Googleアナリティクス」を選びます。
「Google タグ」を選択し、対象GA4測定IDを入力します。
「トリガー」を設定します。通常は「全てのページ」に設定します。
設定が完了したら、「保存」をクリックします。

これで、GAとGTMの基本的な連携が完了です。

GAへのイベントデータ送信方法

次に、特定のイベント（例えば、ボタンクリックやフォーム送信）が発生したときに、そのデータをGAに送信する方法を説明します。

イベントタグの作成:GTMにログインし、「タグ」メニューを選びます。
「タグの設定」をクリックして「Googleアナリティクス：GA4 イベント」を選びます。
イベントの設定項目:「測定ID」GA4測定ID／「イベント名」: イベントの名前（例：ボタンクリック）／必要に応じて、さらにパラメータを追加して情報を送信できます。
トリガーの設定:「トリガー」セクションで、イベントを発火させる条件を設定します。例えば、「クリック – すべての要素」を指定します。
設定が完了したら、「保存」をクリックします。

イベントデータの確認方法

GAに送信されたイベントデータが正しく記録されているかを確認する方法を説明します。

1. リアルタイムレポートで確認

GAにログインし、「リアルタイム」レポートを選びます。
「イベント数」内の対象イベント名をクリックすると、リアルタイムで発生したイベントが表示されます。
ここで、設定したイベント（例：ボタンクリック）が正しく記録されているか確認します。

2. イベントレポートで確認

GAの「エンゲージメント」レポートから「イベント」を選びます。
ここで、設定したイベントを確認できます。

3. デベロッパーツールで確認

ブラウザのデベロッパーツールを開き（通常、F12キーや右クリックメニューから開けます）、「ネットワーク」タブを選びます。
フィルタリングオプションで「collect」を選びます（GAの場合）。
ウェブサイトで設定したアクションを実行し、データが送信されているか確認します。

カスタムイベントの活用例

クリックイベントの計測方法

クリックイベントは、ユーザーが特定のボタンやリンクをクリックしたときに発生するイベントです。
これにより、どのボタンがどれだけクリックされたかを把握できます。
以下の手順でクリックイベントを計測する方法を説明します。

手順

Googleタグマネージャーにログインし、対象のコンテナを選びます。
「タグ」メニューを選び、「新規」ボタンをクリックします。
タグの名前を入力し、「タグの設定」をクリックして「Googleアナリティクス：GA4 イベント」を選びます。
「測定ID」「イベント名」項目を入力します。
「トリガー」を設定します。「新規」ボタンをクリックし、トリガーの名前を入力します。
「トリガーの設定」をクリックしてクリックタイプのトリガーを選択します。すべての要素：ページ上のすべての要素（リンク、画像、ボタンなど）のクリックを測定します。／リンクのみ：<a> 要素を使用する HTML リンクのクリックを測定します。

これで、クリックイベントが発生した際にデータが収集され、Googleアナリティクスで確認できるようになります。

ページスクロールイベントの活用例

ページスクロールイベントは、ユーザーがウェブページをどの程度スクロールしたかを測定するためのイベントです。これにより、ページのどの部分までユーザーが見ているかを把握できます。

手順

Googleタグマネージャーにログインし、対象のコンテナを選びます。
「タグ」メニューを選び、「新規」ボタンをクリックします。
タグの名前を入力し、「タグの設定」をクリックして「Googleアナリティクス：GA4 イベント」を選びます。
「測定ID」「イベント名」項目を入力します。
「トリガー」を設定します。「新規」ボタンをクリックし、トリガーの名前を入力します。
「縦方向スクロール距離」をクリックして「割合」もしくは「ピクセル数」を入力します。
設定が完了したら、「保存」をクリックします。

この設定により、ユーザーがページをどの程度スクロールしたかを追跡し、コンテンツのエンゲージメントを評価できます。

YouTube動画再生イベントの計測方法

YouTube動画再生イベントは、ユーザーがウェブページ上で動画を再生したときに発生するイベントです。
これにより、動画の視聴状況を詳細に把握できます。

手順

Googleタグマネージャーにログインし、対象のコンテナを選びます。
「タグ」メニューを選び、「新規」ボタンをクリックします。
タグの名前を入力し、「タグの設定」をクリックして「Googleアナリティクス：GA4 イベント」を選びます。
「測定ID」「イベント名」項目を入力します。
「トリガー」を設定します。「新規」ボタンをクリックし、トリガーの名前を入力します。
「トリガーの設定」をクリックして「YouTube動画」を選びます。
「キャプチャ」を設定します。開始：動画の再生が開始されると、タグが配信されます。／完了：動画の再生が終わると、タグが配信されます。／一時停止、シーク再生、バッファリング：動画の再生が一時停止されると、スクラブバーが動きます。動画のバッファリングが行われると、タグが配信されます。／進捗状況：動画の再生が特定のポイントに達すると、タグが配信されます。ポイントは割合か時間のしきい値で設定します。
「上級」を設定します。すべての動画に JavaScript API サポートを追加する: このチェックボックスをオンにすると、YouTube iFrame Player API が有効になります。
次の時にこのトリガーを有効化する: 適切なオプションを選択します。コンテナの読み取り（gtm.js）はページの読み取りと同時に行われます。／ウィンドウの読み取り（gtm.load）（デフォルト）はページ上の初期コンテンツすべてが読み取られた後に行われます。／DOM 準備完了（gtm.dom）は DOM の解析の準備完了後に行われます。
設定が完了したら、「保存」をクリックします。

これらのカスタムイベントを活用することで、ユーザーの具体的な行動を詳細に追跡し、ウェブサイトのパフォーマンスを向上させるための貴重なデータを得ることができます。

まとめ

今回の解説では、Googleタグマネージャー（GTM）を使ってカスタムイベントを設定し、それをGoogleアナリティクス（GA）に送信する方法について説明しました。
まず、GTMとはウェブサイトのタグ管理を簡単にするツールであり、カスタムイベントを使うことでユーザーの特定の行動を追跡できます。

クリックイベントでは、ユーザーが特定のボタンをクリックした回数を測定し、ページスクロールイベントでは、ページのどの部分までユーザーがスクロールしたかを追跡できます。
また、YouTube動画再生イベントでは、ユーザーがYouTube動画を再生したかどうかを把握できます。

さらに、これらのイベントを設定し、データをGAに送信することで、ユーザー行動の詳細なレポートを作成できます。GAとGTMの連携方法やデバッグツールの使い方も紹介し、イベントの確認方法についても具体的に説明しました。これにより、ウェブサイトの改善点を見つけやすくなります。
重要な設定項目や具体的な手順をしっかり理解し、実際の運用に活かしてください。
今回の解説が、GTMとGAの活用に役立つことを願っています。

※詳しい設定方法については、公式ドキュメントを参考にしてください。