検索
検索をクリア
検索終了
Google アプリ
メインメニュー

Google タグマネージャによるイベント トラッキング

イベント トラッキングは、ウェブサイト上でのボタンのクリック回数、フォームの送信回数、またはドキュメントのダウンロード回数など、ユーザーの行動を把握するのに最適な方法です。

サイトでのユーザーの操作を測定するには、Google タグマネージャのデータレイヤー イベント コードを実装するか、Google タグマネージャの自動イベント トラッキング機能を活用するかのいずれかの方法をとります。

イベント トラッキングの詳細とその使用方法については、ヘルプセンターの記事をご覧ください。

Google タグマネージャの自動イベント トラッキングを使用すると、これらの操作を簡単に収集することができます。Google タグマネージャの管理画面でイベントタグを直接作成し、定義済みの変数、または管理画面で作成できるカスタム変数に基づいたトリガーによって、それらのイベントタグを配信できるため、Javascript で各クリック操作をハードコード化する必要がありません(analytics.js での ga('send', 'event', 'category', 'action', 'label') など)。

自動イベント トラッキングはウェブサイトの変更に起因する問題の影響を受けやすいため、変更される可能性が低い、識別可能なプロパティを含む要素(例: リンク URL、クラス ID など)に対するウェブサイト上のユーザー操作の測定に使用することをおすすめします。そのような識別可能な属性が含まれない要素や、Google タグマネージャでリッスンできない要素(Flash 内でのクリックなど)に対応するには、データレイヤー イベント コードを使用します。このセクションでは、主に Google タグマネージャーの管理画面を介して自動イベント トラッキング機能を使用する方法について説明していきます。

イベント トラッキングはクリック トリガーによって開始するため、イベントタグを作成する前に、[組み込み変数] メニューのすべてのクリック変数がオンになっていることを確認してください。

[組み込み変数] メニューですべてのクリック変数をオンにする

定義済み変数(詳細

組み込み変数を使用すると、イベントタグを簡単に作成できます。最初の例では、ボタンをクリックして「もっと読む」イベントの実行方法を示しています。ユーザーがこのボタンをクリックすると、ホームページから、完全な記事を参照できる新しいページに移ります。

ステップ 1

最初に、Google タグマネージャで新しいタグを作成します。タグを作成するには、タグメニューの [新規] を選択して Google アナリティクス タグの設定に進むか、あるいは元の Google アナリティクス ページビュー タグをコピーして編集します。すべての設定内容を維持して、設定時の入力ミスを防ぐために、元のページビュー タグをコピーすることをおすすめします。

タグをコピーしたら、名前を変更します。この例では「GA - Event - 'moretag' Click」という名前を付けます。

ステップ 2

次に、タグを設定します。[タグを設定] セクションをクリックして編集します。まず、値を入力するか gaProperty 定数文字列変数を使用する(推奨)かしてトラッキング ID を設定します。

次にトラッキング タイプを [イベント] に変更します。これによって、イベントの [カテゴリ]、[アクション]、[ラベル]、[値] のイベント トラッキング パラメータのフィールドが有効になります。イベント トラッキングは、階層構造のクリックデータを管理する手段だと考えてください。

この階層のトップレベルは [カテゴリ] です。これは、イベントが発生している場所の詳細を示します。

ここでは、概要ページで [もっと読む] がクリックされるため、このカテゴリに「概要」という名前を付けます。

第 2 の階層は [アクション] で、ウェブサイトでのユーザー行動を示します。[もっと読む] ボタンがクリックされているため、ここではボタンのテキストをアクションの名前にします。

イベント階層の最後のレベルは [ラベル] です。[ラベル] は、クリックされた対象物に関する詳細情報が示されます。この例では、外部への URL に記事タイトルが含まれるため、外部への URL が収集されるように [ラベル] を設定します。この情報を収集するために、組み込み変数 {{Click URL}} を使用します。Google アナリティクスで読み込みやすくなるように URL をクリーンアップするには、後で Google アナリティクス フィルタを使用します。

[値] ボックスは、クリック アクションに数値を割り当てる場合を除き、空白のままにしてください。この例では数値は割り当てられていません。

最後のフィールドは、非インタラクションのイベントを含むかどうかについて [True] または [False] を選択して切り替えます。ボタンやリンクをクリックしても新しいページビューが作成されない操作も直帰率の算出に含めたい場合は、これを [True] に設定します。ここでは、[もっと読む] ボタンをクリックすると別のページが表示されるため、このパラメータの値はデフォルトの [False] のままにします。非インタラクションのイベントの詳細については、開発者向けサイトをご覧ください。

このように整理したデータが Google アナリティクスに送信されることで、サイト運営者は、ユーザーが概要ページの [もっと読む] ボタンをクリックしてどの記事を参照したかを知ることができます。これは、オーガニックな記事の人気度(他のソースから直接リンクされた可能性がのあるページビューに基づいた人気度とは対照的)を把握するのに適した方法です。

トラッキング パラメータの設定は次のようになります。

Tag configuration showing track type = event, category = index, and label = {{Click URL}}

イベント トラッキング パラメータのすべてのフィールドを設定したら、[続行] をクリックします。

ステップ 3

次に、このタグを配信するトリガーを選択します。ここでは [クリック] を選択します。[クリック] を選択すると、既存のクリック トリガーを使用するか、新しいクリック トリガーを作成するかを選ぶポップアップ ボックスが表示されます。ここでは、新しいクリック トリガーを作成するので、既存のトリガーをすべてオフにしてから [新規] をクリックします。

トリガーを作成する新しいポップアップが開きます。[イベントを選択] フィールドでは、既に [クリック] が選択されています。次にこのトリガーのタイプを設定します。トリガーのタイプには次の 2 つがあります。

リンククリック
含めることができるアンカータグ <a>(例: <a href="#"> リンク </a>)がある場合、通常リンククリックのトリガータイプを使用します。
クリック
<div> タグや <img> タグなど、その他の要素(例: ボタン: <div class="button">ボタン</div>)にはクリック トリガーを使用します。

アンカータグ内にアンカー以外の要素がある場合(例: <a href="#"><img class="image" src="#"></a>)は、タグを配信するかどうかの識別に何を使用するか、そしてどの要素にそのタグを含めるかを決める必要があります。それがクリック URL(つまりアンカーの href)であれば、リンククリックを使用します。あるいはクラスまたは子要素のその他の属性であれば、クリックを使用します。基本的に、クリックのトリガータイプではクリックされた最下位レベルの要素に関する情報が収集され、リンククリックでは(低いレベルの子要素がある場合であっても)クリックされたアンカータグに関する情報が収集されます。

この例では、リンククリックを使用します。[リンククリック] を選択して [次へ] をクリックします。

リンククリックのトリガーを使用する場合、このトリガーを有効にする場所をタグマネージャに通知する必要があります。このトリガーがすべてのページで呼び出されるようにするには、[URL / 正規表現に一致 / *] を使用します。

トリガー設定の最後のステップは、[配信するタイミング] の条件の設定です。これは、トリガーを呼び出すタイミングをタグマネージャに通知するためのフィルタの役割を果たします。[すべてのクリック] または [一部のクリック] のいずれかを選択します。ここでは [一部のクリック] を選択します。これによって、配信条件を入力できる新しい選択フィールドが表示されます。

ご利用のウェブサイトに使用する最適な条件を選択するには、イベントを呼び出す要素を検討します。

この例では、ウェブサイトのボタンに「class="moretag"」が独自の条件として含まれています。これは、組み込まれた Click Classes 変数を使用して、このトリガーにフィルタを適用できるということです。このトリガーの設定では、[Click Classes / 等しい / moretag] という条件を含めます。

設定が完了したトリガーは、次のスクリーンショットのようになります。トリガーを保存します。

Create Trigger, event = click, enable on all pages, fire when click classes equals moretag.

ステップ 4

完成したタグは次のように表示されます。

Completed GA Pageview Tag

タグを保存し、プレビューとデバッグを行ってから公開します。

ユーザー定義変数(詳細

ユーザー定義変数の作成手順は、最初の例と同じ手順と基本的には同じですが、部分的に異なるため、必要に応じて新しい手順に置き換えて説明します。

この例では、Google ストアを使用します。具体的には、ウェブページ上部のナビゲーション バーに対してイベント トラッキングを追加する手順について重点的に説明します(アクセサリ、娯楽、キッズなど)。

ステップ 1

最初に、Google タグマネージャで新しいタグを作成します。タグを作成するには、タグメニューの [新規] を選択して Google アナリティクス タグの設定に進むか、あるいは元の Google アナリティクス ページビュー タグをコピーして編集します。すべての設定内容を維持して、設定時の入力ミスを防ぐために、元のページビュー タグをコピーすることをおすすめします。

タグをコピーしたら、名前を変更します。この例では「GA - Event - Global Nav」という名前を付けます。

ステップ 2

次に、タグを設定します。[タグを設定] セクションをクリックして編集します。まず、値を入力するか gaProperty 定数文字列変数を使用する(推奨)かしてトラッキング ID を設定します。

次にトラッキング タイプを [イベント] に変更します。これによって、イベントの [カテゴリ]、[アクション]、[ラベル]、[値] のイベント トラッキング パラメータのフィールドが有効になります。イベント トラッキングは、階層構造のクリックデータを管理する手段だと考えてください。

この例では、これらのリンクのカテゴリを「ナビゲーション」とし、[アクション] を第 1 レベルのナビゲーション バー リンククリック(例: アクセサリ)に、[ラベル] を第 2 レベルのクリック(例: バッグ)とします。

ナビゲーション要素のクリックは複数ページで発生する可能性があるため、カテゴリ パラメータには包括的な名前を付ける必要があります。そのため「ナビゲーション」という名前にします。

アクション パラメータは、イベント階層の第 2 レベルで、特定のナビゲーション領域をクリックしているかなどのウェブサイト上でのユーザー操作を示します。このアクションに、トップレベルのナビゲーション要素のボタンテキストに基づいた名前を付けます(例: アクセサリ)。

https://www.googlemerchandisestore.com/shop.axd/Home のナビゲーション リンクの要素を検証すると、これらのリンクには Google タグマネージャで認識される要素が含まれていないことがわかります。このため、[アクション] や [ラベル] に組み込み要素を使用できないので、それぞれに対してユーザー定義変数を作成する必要があります。

「アクセサリ」要素は次のように表示されます。

<a class="" href="/Google+Redesign/Accessories/">アクセサリ</a>

「バッグ」要素は次のように表示されます。

<a href="/Google+Redesign/Accessories/Bags/">バッグ</a>

[カテゴリ] は常に「ナビゲーション」になりますが、[アクション] と [ラベル] は何がクリックされるかによって変わるため、どちらも変数を作成する必要があります。

[アクション] のユーザー定義変数は次のようになります。

[ラベル] のユーザー定義変数は次のようになります。

これらの変数を作成したら、[アクション] フィールドと [ラベル] フィールドでこれらの変数を選択できるようになります。最終的なタグの設定は、次のようになります。

イベント トラッキング パラメータのすべてのフィールドを設定したら、[続行] をクリックします。

ステップ 3

次に、このタグを配信するトリガーを選択します。ここでは [クリック] を選択します。[クリック] を選択すると、既存のクリック トリガーを使用するか、新しいクリック トリガーを作成するかを選ぶポップアップ ボックスが表示されます。ここでは、新しいクリック トリガーを使用するため、既存のトリガーをすべてオフにしてから [新規] をクリックします。

トリガーを作成する新しいポップアップが開きます。[イベントを選択] フィールドでは、既に [クリック] が選択されています。次にこのトリガーのタイプを選択して設定します。トリガーのタイプには次の 2 つがあります。

リンククリック
含めることができるアンカータグ(例:<a href="#"> リンク </a>がある場合、通常リンククリックのトリガータイプを使用します。
クリック
<div> タグや <img> タグなど、その他の要素(例: ボタン: <div class="button">ボタン</div>)にはクリック トリガーを使用します。

アンカータグ内にアンカー以外の要素がある場合(例: <a href="#"><img class="image" src="#"></a>)は、タグを配信するかどうかの識別に何を使用するか、そしてどの要素にそのタグを含めるかを決める必要があります。それがクリック URL(つまりアンカーの href)であれば、リンククリックを使用します。あるいはクラスまたは子要素のその他の属性であれば、クリックを使用します。基本的に、クリックのトリガータイプではクリックされた最下位レベルの要素に関する情報が収集され、リンククリックでは(低いレベルの子要素がある場合であっても)クリックされたアンカータグに関する情報が収集されます。

この例では、リンククリックを使用します。

ナビゲーション バー要素を右クリックして [要素を検証] を選択すると、クリック URL に「Google+Redesign」が含まれているのがわかります。

次に、「Google+Redesign」はこのサイトのナビゲーション要素に固有のものであるため、[Click URL / 含む / Google+Redesign] という条件でトリガーが呼び出されるように設定します。

設定が完了したトリガーは、次のスクリーンショットのようになります。トリガーを保存します。

ステップ 4

完成したタグは次のように表示されます。

タグを保存し、プレビューとデバッグを行ってから公開します。

前へ: ユニバーサル アナリティクスのクロスドメイン トラッキング | 次へ: Google タグマネージャとカスタム ディメンション

この記事は役に立ちましたか?
改善できる点がありましたらお聞かせください。