GoogleTagManagerとGoogleAnalyticsを使用してフォームトラッキング分析を設定する方法

公開: 2022-04-12

コンバージョン率は、マーケティング効率の最も単純であると同時に最も重要な指標の1つです。購入、メールの申し込み、電話のリクエストなど、ターゲットアクションを完了したユーザーの数が表示されます。eコマースの売上を記録および分析するために、比較的簡単に設定できるGoogleAnalyticsがあります。ただし、サイトで送信されたフォームを追跡するには、さらに多くの労力が必要です。

これは、フォームがたまたまさまざまなタイプであり、サーバーにデータを送信するためにさまざまなテクノロジーを使用しているためです。データが正常に送信されると、一部のフォームフィールドが更新されます。その他はポップアップウィンドウを表示します。 3番目のタイプは、ユーザーをありがとうページにリダイレクトします。フォームトラッキングの方法は、使用するテクノロジーによって異なります。

この記事では、さまざまな方法でフォームデータを収集し、それをGoogleAnalyticsに転送する方法について説明します。

方法1.ありがとうページを分ける
方法2.Googleタグマネージャーでフォームトリガーを送信する
- 手順1.フォーム変数をアクティブ化する
- ステップ2.トリガーを調整します
- 手順3.トリガーが機能するかどうかを確認します
- ステップ4.タグを作成します
- ステップ5.GoogleAnalyticsでターゲットを設定します
方法3.GoogleTagManagerでの要素の可用性トリガー
方法4.AJAXを使用するフォームを追跡する
- 手順1.タグを作成して、フォームがどのように機能するかを確認します
- ステップ2.データレイヤー変数を作成します
- ステップ3.トリガーを作成します
方法5.トリガーとしてのDataLayerイベント
ユーザーがフォームへの入力に費やす時間

方法1.ありがとうページを分ける

フォームの入力後にユーザーが別のURLの別のページにリダイレクトされる場合、このURLへのアクセスを追跡することが、フォームの送信を追跡する最も簡単な方法です。 GoogleAnalyticsで「ランディングページ」タイプのターゲットを作成するだけで十分です。

ウェビナーの登録を追跡したいとします。登録に成功した後のありがとうページは次のようになります：https：//www.site.com/registration/thankyou

管理パネルの[表示設定]の[ターゲット]で、[ターゲット]をクリックし、[カスタム]をクリックします。 ターゲット名を指定し、ターゲットタイプを選択して、ありがとうページのアドレスを入力します。

考慮すべき重要事項：ありがとうページのURLは一意である必要があります。つまり、そのようなアドレスを持つページはサイトに1つだけ存在し、ユーザーはフォームに入力しないとこのページにアクセスできないようにする必要があります。そうしないと、GoogleAnalyticsは目標の達成に関する不正確なデータを記録する可能性があります。

読者へのボーナス

最高のOWOXBIマーケティングケース

今すぐダウンロード

方法2.Googleタグマネージャーでフォームトリガーを送信する

プログラマーが送信ボタンを使用してフォームからのデータ送信を正しく構成した場合、フォームトラッキングの送信には、組み込みのGoogleタグマネージャートリガーを使用できます。インターネット上のコメントから判断すると、このような状況に遭遇することはめったにありませんが、試してみる価値はあります。

このメソッドを使用すると、ユーザーがフォームに入力して送信すると、トリガーはgtm.formSubmitイベントをdataLayer配列に送信します。

注：設定に進む前に、サイトのすべてのページでGoogleタグマネージャーでページビュータグが有効になっていることを確認してください。

手順1.フォーム変数をアクティブ化する

この目的のために、GTMで[変数]メニューを開き、[構成]をクリックして、[フォーム]セクションですべての変数を選択します。

ステップ2.トリガーを調整します

トリガーを作成するには、フォームIDまたはフォームクラス属性が必要です。フォームを右クリックしてFirefoxの[アイテムの探索]またはChromeの[コードの表示]をクリックすると、HTMLコードでそれらを表示できます。

この例では、フォームIDはsend-request-formであり、トリガーを構成するときに使用します。

[トリガー]メニューに移動し、[新規]をクリックして、[トリガー設定]を開き、[フォームの送信]を選択します。

開いたウィンドウに、2つのチェックボックスが表示されます。

タグを待つ–このオプションを有効にすると、フォームに関連付けられているすべてのタグがアクティブになるか、指定した時間が経過するまで、フォームは送信されません。
検証を確認する–このオプションを有効にすることをお勧めします。 そうしないと、ユーザーが必須フィールドに入力していなくてもトリガーが起動します。

エラーチェックを有効にすると、追加の設定が表示されます。トリガーを有効にする場合は、フォームを含むページのURLを指定します。また、トリガーをアクティブにする場合は、上記のフォームIDを指定します。

リクエストの送信など、トリガーの便利でわかりやすい名前を考えて保存します。

手順3.トリガーが機能するかどうかを確認します

コンテナで変更を公開する前に、Googleタグマネージャのプレビューモードを使用してください。フォームのあるページを開き、記入して、[送信]をクリックします。デバッグコンソールに、gtm.formSubmitイベントが表示されます。

このイベントが表示されない場合、この追跡方法は機能しません。その場合は、この記事で説明されている他の方法のいずれかを試してください。

イベントが表示された場合でも、トリガーが正しく機能するかどうかを確認するために、もう1つのテストを実行する必要があります。フォームを開き、必須フィールドを空白のままにして、フォームを送信します。 gtm.formSubmitイベントがデバッグコンソールに再度表示された場合、組み込みのトリガーは正しく機能せず、役に立ちません。イベントが転送されなかった場合、それは素晴らしいことです！次の手順に進みます。

ステップ4.タグを作成します

次に、フォームが送信されたという情報をGoogleAnalyticsに送信するタグを作成する必要があります。これを行うには、[タグ]メニューに移動し、[新規]をクリックして、[タグ設定]を開き、[ Google Analytics –ユニバーサルAnalytics]を選択します。

わかりやすくするために、タグにトリガーと同じ名前を付けることができます。次に、次のフィールドに入力します。

タグタイプ–{{Googleアナリティクス設定}}を選択します
トラックタイプ–「イベント」を選択
カテゴリ–便宜上タグおよびトリガーと同じ
アクション–送信
ラベル–たとえば、{{フォームID}}）
非相互作用–「False」のままにします

タグをアクティブにする場合は、手順3で作成したトリガーを選択し、[保存]をクリックします。

それは準備ができています！ Googleタグマネージャープレビューモードを使用してフォームを送信するとき、またはGoogle Analyticsのリアルタイムイベントレポートを使用して、生成されたタグがどのように機能するかを確認できます。

ステップ5.GoogleAnalyticsでターゲットを設定します

変更を加えてコンテナを公開したら、フォームをコンバージョンとして送信することを検討するために、Googleアナリティクスでターゲットを設定する必要があります。これを行うには、GoogleAnalyticsのビュー設定で独自の新しい目標を追加します。 Googleタグマネージャでタグを設定したときと同じように、イベントタイプを選択し、[カテゴリ]、[アクション]、および[ショートカット]フィールドに入力します。

ターゲットを保存します。終わり。サイトのコードを変更せずにフォームトラッキングを設定しました。

方法3.GoogleTagManagerでの要素の可用性トリガー

フォームを送信した後、サイトに「ありがとう」または送信の成功に関するメッセージが表示されたウィンドウが表示された場合は、別の組み込みのGTMトリガーを試すことができます。特定のアイテムが画面（この場合はポップアップウィンドウ）に表示されたときに発生し、gtm.elementVisibilityイベントをdataLayerにディスパッチします。

このトリガーを設定するには、監視対象アイテムのCSSセレクターを知っている必要があります。このセレクターを見つけるには、ウィンドウを右クリックして[コードの表示]を選択します。 次の行を探しています。

CSSセレクターをコピーするには、行を右クリックして、[コピー] –[セレクターのコピー]を選択します。

この例では、セレクターは次のようになります。#webinar_marketing_automation>div。

次に、要素の可視性タイプを選択して、新しいトリガーを作成します。

次のフィールドに入力します。

トリガー名–たとえば、「ウェビナーの記録を取得」
選択方法–CSSセレクター
Element Selector –ポップアップウィンドウのHTMLコードからコピーした値を挿入します。
トリガールール–ページにフォームが1つある場合は、[ページごとに1回]オプションを残します。複数のフォームがあり、1つのメッセージがポップアップする場合は、「要素ごとに1回」を選択できます。

次に、[DOMの変更を登録する]チェックボックスをオンにします。
アクティベーション条件のトリガー–「一部の可視性イベント」を選択すると、ポップアップメッセージまたはテキストが表示されるページを指定できます。
トリガーを保存します。

Element Availabilityトリガーを作成した後、方法2で詳細に説明したのと同じ設定を調整する必要があります。

フォーム送信データをGoogleAnalyticsに送信する新しいタグをGTMに追加し、作成したトリガーをそれに添付します。
フォームが送信されたときにタグがどのように機能するかをプレビューします。
Google Analyticsで、コンバージョンを追跡するようにイベントターゲットを設定します。

方法4.AJAXを使用するフォームを追跡する

WebサイトのフォームがAJAXテクノロジーを使用している場合、データはブラウザーからサーバーにバックグラウンドで転送され、ページは再読み込みされません。送信するAJAXフォームの追跡を構成するには、Lunametricsの次のスクリプトを使用できます。

    <script id="gtm-jq-ajax-listen" type="text/javascript"> (function() { 'use strict' var $; var n = 0; init(); function init(n) { // Ensure jQuery is available before anything if (typeof jQuery !== 'undefined') { // Define our $ shortcut locally $ = jQuery; bindToAjax(); // Check for up to 10 seconds } else if (n < 20) { n++; setTimeout(init, 500); } } function bindToAjax() { $(document).bind('ajaxComplete', function(evt, jqXhr, opts) { // Create a fake element for magically simple URL parsing var fullUrl = document.createElement('a'); fullUrl.href = opts.url; // IE9+ strips the leading slash from a.pathname because who wants to get home on time on Friday anyways var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname; // Manually remove the leading question mark, if there is one var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search; // Turn params and headers into objects for easier reference var queryParameters = objMap(queryString, '&', '=', true); var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':'); // Blindly push to the dataLayer because this fires within GTM dataLayer.push({ 'event': 'ajaxComplete', 'attributes': { // Return empty strings to prevent accidental inheritance of old data 'type': opts.type || '', 'url': fullUrl.href || '', 'queryParameters': queryParameters, 'pathname': pathname || '', 'hostname': fullUrl.hostname || '', 'protocol': fullUrl.protocol || '', 'fragment': fullUrl.hash || '', 'statusCode': jqXhr.status || '', 'statusText': jqXhr.statusText || '', 'headers': headers, 'timestamp': evt.timeStamp || '', 'contentType': opts.contentType || '', // Defer to jQuery's handling of the response 'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '') } }); }); } function objMap(data, delim, spl, decode) { var obj = {}; // If one of our parameters is missing, return an empty object if (!data || !delim || !spl) { return {}; } var arr = data.split(delim); var i; if (arr) { for (i = 0; i < arr.length; i++) { // If the decode flag is present, URL decode the set var item = decode ? decodeURIComponent(arr[i]) : arr[i]; var pair = item.split(spl); var key = trim_(pair[0]); var value = trim_(pair[1]); if (key && value) { obj[key] = value; } } } return obj; } // Basic .trim() polyfill function trim_(str) { if (str) { return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); } } })(); /* * v0.1.0 * Created by the Google Analytics consultants at http://lunametrics15.staging.wpengine.com * Written by @notdanwilkerson * Documentation: http://lunametrics15.staging.wpengine.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/ * Licensed under the Creative Commons 4.0 Attribution Public License */ </script>
<script id="gtm-jq-ajax-listen" type="text/javascript"> (function() { 'use strict' var $; var n = 0; init(); function init(n) { // Ensure jQuery is available before anything if (typeof jQuery !== 'undefined') { // Define our $ shortcut locally $ = jQuery; bindToAjax(); // Check for up to 10 seconds } else if (n < 20) { n++; setTimeout(init, 500); } } function bindToAjax() { $(document).bind('ajaxComplete', function(evt, jqXhr, opts) { // Create a fake element for magically simple URL parsing var fullUrl = document.createElement('a'); fullUrl.href = opts.url; // IE9+ strips the leading slash from a.pathname because who wants to get home on time on Friday anyways var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname; // Manually remove the leading question mark, if there is one var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search; // Turn params and headers into objects for easier reference var queryParameters = objMap(queryString, '&', '=', true); var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':'); // Blindly push to the dataLayer because this fires within GTM dataLayer.push({ 'event': 'ajaxComplete', 'attributes': { // Return empty strings to prevent accidental inheritance of old data 'type': opts.type || '', 'url': fullUrl.href || '', 'queryParameters': queryParameters, 'pathname': pathname || '', 'hostname': fullUrl.hostname || '', 'protocol': fullUrl.protocol || '', 'fragment': fullUrl.hash || '', 'statusCode': jqXhr.status || '', 'statusText': jqXhr.statusText || '', 'headers': headers, 'timestamp': evt.timeStamp || '', 'contentType': opts.contentType || '', // Defer to jQuery's handling of the response 'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '') } }); }); } function objMap(data, delim, spl, decode) { var obj = {}; // If one of our parameters is missing, return an empty object if (!data || !delim || !spl) { return {}; } var arr = data.split(delim); var i; if (arr) { for (i = 0; i < arr.length; i++) { // If the decode flag is present, URL decode the set var item = decode ? decodeURIComponent(arr[i]) : arr[i]; var pair = item.split(spl); var key = trim_(pair[0]); var value = trim_(pair[1]); if (key && value) { obj[key] = value; } } } return obj; } // Basic .trim() polyfill function trim_(str) { if (str) { return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); } } })(); /* * v0.1.0 * Created by the Google Analytics consultants at http://lunametrics15.staging.wpengine.com * Written by @notdanwilkerson * Documentation: http://lunametrics15.staging.wpengine.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/ * Licensed under the Creative Commons 4.0 Attribution Public License */ </script>

このコードは、フォームが実際にAJAXを使用しているかどうかを確認し、Googleタグマネージャーで変数とトリガーを作成します。

手順1.タグを作成して、フォームがどのように機能するかを確認します

Googleタグマネージャで、[タグ]を開き、[新規]、[タグ設定]の順にクリックして、[カスタムHTML ]を選択します。 上記のコードをコピーして、テキストボックスに貼り付けます。すべてのページをトリガーとして指定します。

次に、GTMプレビューをオンにし、フォームページを開き、フォームに記入して送信します。

デバッグコンソールにajaxCompleteイベントが表示された場合（上のスクリーンショットのように）、フォームはAJAXを使用しており、この追跡方法が適しています。その場合は、さらにお読みください。

ステップ2.データレイヤー変数を作成します

プレビューコンソールでajaxCompleteイベントをクリックし、[データレイヤー]タブを開くと、フォームが送信された後にデータ層配列に渡される情報が表示されます。

このコードの応答行に関心があります。フォームが正常に送信されたことを示すテキストが含まれています。

この行は、Googleタグマネージャーで変数とトリガーを作成するために使用できます。 GTMで[変数]セクションを開き、[作成]をクリックして、[変数の構成]画面で[データレイヤー変数]を選択します。 [データレイヤー変数名]フィールドに、attributes.response（2つの変数に同じ名前を付けることができます）を入力し、設定を保存します。

なぜresponseの代わりにattributes.responseを入力するのですか？ 属性は、応答キーとその値を含むオブジェクトであるためです。そうすることで、GTMが関心のあるデータへの正確なパスを指すようにします。

変数を作成したら、それをチェックする必要があります。この目的のために、プレビューモードでフォームを送信してください。 ajaxCompleteイベントをクリックし、Googleタグマネージャーの[変数]タブを開きます。 attributes.response変数と、フォームの正常な送信に関するテキストが表示されている場合は、すべてが正しく構成されていることを意味します。

ステップ3.トリガーを作成します

[トリガーの構成]セクションで、[作成]、[トリガーの構成]の順にクリックし、 [ユーザー]イベントの種類を選択します。 「イベント名」フィールドにajaxCompleteを指定します。次に、トリガーをアクティブ化するための条件として、[いくつかのカスタムイベント]を選択し、条件を登録します。attributes.response変数には、{フォームの正常な送信に関するカスタムテキストを入力}が含まれます。

その後、残っているのは次のとおりです。

フォーム送信情報をGoogleAnalyticsに送信し、作成されたトリガーをそれに添付する新しいイベント追跡タグをGTMに追加します。
プレビューモードを使用して、フォームを送信するときにタグがどのように機能するかを確認します。
GoogleAnalyticsでコンバージョンを追跡するためのイベントターゲットの設定。

これらの設定については、上記の「方法2」のセクションで詳しく説明しました。Googleタグマネージャーでフォームトリガーを送信します。

方法5.トリガーとしてのDataLayerイベント

dataLayer .pushメソッドを使用してフォームを追跡することは、私たちの見解では、最も信頼性が高く、用途の広いソリューションです。唯一の欠点は、コードを理解していない場合、開発者の助けが必要になることです。

開発者向けの技術仕様を準備する
フォームが正常に送信された後、dataLayerに転送する設定のリストを作成します。開発者に、監視するフォームを含むすべてのページにこのコードを追加するように依頼します。

dataLayer.push（{
'イベント'：'フォーム'、
'変数'：'値'
}）

どこ：

イベントはイベントの名前です。都合の良いイベントに置き換えることができます。
変数は、イベントと一緒に転送するすべての変数のセットです。

プログラマーがすべてのフォームに対してdataLayer.pushメソッドを構成した後、それがどのように機能するかを確認できます。この目的のために、Googleタグマネージャーにプレビューを含め、ウェブサイトのフォームに記入してください。デバッグコンソールで、新しいイベントが発生するはずです（この例では、OWOXと呼ばれます）。イベントをクリックしてdataLayerタブに移動すると、データ配列に転送されるすべてのパラメーターが表示されます。

上記のスクリーンショットのイベントの例（ブログからPDFファイルをダウンロード）では、GTMを使用して追跡を構成する方法を検討しています。

まず、必要なすべてのユーザー変数（eventCategory、eventAction、eventLabelなど）を作成します。次に、[ユーザー定義変数]セクションの[変数タイプ]を選択し、中かっこで変数名を入力します。{{eventCategory}}：

次に、タイプカスタムイベントのトリガーを作成します。設定で、イベント名を指定し、すべてのカスタムイベントで発生するトリガーを設定します。

次に、イベントをGoogleアナリティクスに転送するタグを作成します。タグタイプをGoogleAnalytics– Universal Analyticsに設定し、トラッキングタイプをイベントに設定します。

さらに、次のフィールドに入力します。

カテゴリ– {{eventCategory}}
アクション– {{eventAction}}
ラベル– {{eventLabel}}

次に、変数{{Google Analytics設定}}と、前の手順で作成したトリガーを選択します。

すべての準備が整いました。残っているのは、タグがGTMプレビューモードとリアルタイムのGoogleAnalyticsレポートで機能するかどうかを確認することだけです。

ユーザーがフォームへの入力に費やす時間

フォームに正常に入力したユーザーの数を確認できるようになったので、フォームに入力していないユーザーがどのような問題に遭遇したかを確認すると便利です。

開発者は、フォーム分析に必要なすべてのパラメーターの名前と値をdataLayerに追加する必要があります。これは、追跡に役立ちます。

ページを開いてからフィールドをアクティブ化するまでの時間
フィールドのアクティブ化からフィールドの非アクティブ化までの時間
最初のフィールドのアクティブ化からフォームの最初の送信までの時間
最初のフィールドがアクティブ化されてからフォームが正常に送信されるまでの時間
最初のフィールドのアクティブ化からフォーム送信の失敗までの時間
フォームの送信に成功したことについてサーバーから応答を受け取る時間
フォームの送信に失敗したことについてサーバーから応答を受け取る時間
フォームのアクティブ化からユーザーがフォームを離れるまでの時間（フォームを正常に送信せずに）

Google Analyticsでこのデータの収集を設定すると、たとえばOWOX BIを使用して、そのデータをGoogleBigQueryにインポートできるようになります。次に、無料のOWOX BI BigQueryレポートアドオンを使用して、Googleスプレッドシートで任意のフォーム分析レポートを作成できます。

これらのレポートは、フォームの使いやすさの問題を見つけて修正し、コンバージョン率を高めるのに役立ちます。

このようなレポートの例と、それらが回答できる質問を次に示します。

1.どのフォームフィールドを操作する場合、ユーザーは最も頻繁にエラーに遭遇しますか？

2.ユーザーはフォームへの記入にどのくらいの時間を費やしますか？

3.ユーザーはフォームに記入するのにどのくらいの時間を費やし、それは何に依存しますか？

PSフォーム分析の設定とビジネス用のカスタムメトリックシステムの作成についてサポートが必要な場合は、contact @ owox.comに電子メールを送信するか、OWOXWebサイトの連絡フォームに記入してください。