web-dev-qa-db-ja.com

フォーム送信をクリックすると、Google Analyticsでイベントを追跡します

誰かがフォームに記入して送信をクリックしたときに、Googleアナリティクスでイベントを追跡する必要があります。表示される結果のページは標準のダッシュボードタイプのページなので、そのページでイベントを追跡するには、URLでイベントを渡してからURLを読み取り、GoogleアナリティクスイベントトラッキングJavaScriptコードを出力する必要がありますそれに基づいて。ただし、これは頻繁にブックマークされたページであり、リロード、クリックして戻るなどのページです。したがって、URLでトラッキングイベントを渡して分析を台無しにしたくないのです。

代わりに、フォームを使用してページ上で次のjQueryコードのようなことをしたいです。

$('#form_id').submit(function() {
  _gaq.Push('_trackEvent', 'my category', 'my action');
});

上記で私が恐れる問題は、そのjavascriptを呼び出した直後にブラウザがフォームを送信して別のWebページに移動するため、追跡されているイベントを見逃すことです。 utm.gif追跡画像が時間内にロードされない場合、イベントを見逃します:(。

私の恐怖は正当化されますか？追跡されているイベントを見逃さないようにするにはどうすればよいですか？

javascriptjquerygoogle-analyticsanalytics
62
at.

すべてのフォーム送信（JSを有効にしているユーザーとGAをブロックしていないユーザー）が100％であることを確認する方法は2つしかありません。

  • AJAXを送信すると、ページの変更を心配する必要がなくなり、世界中で常にGAを処理し、古いページの代わりにロードする新しいページ。
  • フォームのアクションを新しいウィンドウで強制的に開くことができるため、メインページ上のすべてのバックグラウンドプロセスが機能し、心配する競合状態を防ぐことができます。

これは、Googleアナリティクスにはコールバック関数がないため、10秒のラグを設定しても、送信のallを確実にキャプチャできないためです。

または、送信されたページにGET値を渡し、そのページで値のチェックを設定することもできます。設定されている場合、trackEvent呼び出しを送信できます。

17
Yahel

Google Analytics hitCallback を使用します

トラッカーオブジェクトでカスタムコールバック関数を指定できます。

_gaq.Push(['_set', 'hitCallback', function(){}]);

「ヒットが正常に送信された」後にコールバックが呼び出されます。

送信ボタンのクリックを追跡し、後でフォームを送信する場合は、イベントに次のコード（jQueryを使用）を使用できます。

var _this = this; // The form input element that was just clicked
_gaq.Push(['_set','hitCallback',function() {
    $(_this).parents('form').first().submit(); // Submit underlying form
}]);
_gaq.Push(['_trackEvent', 'My category', 'My action']);
return !window._gat; // Ensure that the event is bubbled if GA is not loaded

または、onclickoneライナーとして<input type="submit">要素：

onclick="var _this=this;_gaq.Push(['_set','hitCallback',function(){$(_this).parents('form').first().submit();}]);_gaq.Push(['_trackEvent','My category','My action']);return !window._gat;"

イベントを追跡することMy category/My action、jQueryを使用して、押したばかりの送信ボタンの基になるフォーム要素を見つけ、フォーム全体を送信します。

参照： Google Analytics-Google Analyticsへのデータ送信-ヒットコールバック （supervacuoに感謝）

[〜＃〜] update [〜＃〜]ga（）関数が定義された最新のanalytics.jsコードを使用している場合、これを記述できます。次のように：

var _this = this;
ga('send', 'event', 'My category', 'My action', {
    'hitCallback': function() {
        $(_this).parents('form').first().submit();
    }
});

return !window.ga;
144
flu

Googleアナリティクスユニバーサルを扱い、hitCallback（検証後、フォームの送信前にイベントを追跡する）で何らかのトリックを行う場合は、google-analytics.jsがブロックされる可能性があることに注意してください。ただし、ga関数は引き続き定義されます。起こりません。

ga('send', 'pageview', event, {
  'hitCallback': function() {
    _this.submit();
  }
})
return !window.ga;

Gaがロードされているかどうかを確認する検証で修正できます

ga('send', 'pageview', event, {
  'hitCallback': function() {
    _this.submit();
   }
})
return !(ga.hasOwnProperty('loaded') && ga.loaded === true)
12
Dmytro Pastovenskyi

この質問はもう数年前のもので、Googleアナリティクスは上記のハッキングなしでこれを行う方法を提供しているようです。

google analytics docs から：

コマンド配列に加えて、関数オブジェクトを_gaqキューにプッシュすることもできます。関数には任意のJavaScriptを含めることができ、コマンド配列のように、_gaqにプッシュされた順に実行されます。

これを複数コマンドプッシュと組み合わせて、確実に順番に追加されるようにします（呼び出しを保存します）。

$('input[type="submit"]').click(function(e) {
    // Prevent the form being submitted just yet
    e.preventDefault();

    // Keep a reference to this dom element for the callback
    var _this = this;

    _gaq.Push(
        // Queue the tracking event
        ['_trackEvent', 'Your event', 'Your action'],
        // Queue the callback function immediately after.
        // This will execute in order.
        function() {
            // Submit the parent form
            $(_this).parents('form').submit();
        }
    );
});
7
epocsquadron

HitCallbackソリューションは優れていますが、Cookieを設定し、次のページからイベントをトリガーすることを好みます。このようにGAで失敗してもサイトは停止しません：

// Function to set the event to be tracked:
function setDelayedEvent(category, action, label, value) {
  document.cookie='ev='+escape(category)+'!'+escape(action)+'!'+escape(label)+'!'+value
      +'; path=/; expires='+new Date(new Date().getTime()+60000).toUTCString();
}

// Code run in every page, in case the previous page left an event to be tracked:
var formErrorCount= formErrorCount || 0;
var ev= document.cookie.match('(?:;\\s*|^)ev=([^!]*)!([^!]*)!([^!]+)!([^!]+)(?:;|\s*$)');
if (ev && ev.length>2) {
  _gaq.Push(['_trackEvent', unescape(ev[1]), unescape(ev[2]),
     unescape(ev[3]), parseInt(ev[4])]);
  document.cookie='ev=; path=/; expires='+new Date(new Date().getTime()-1000).toUTCString();
}
6
jsalvata

約100％の精度に煩わされていない場合は、1秒の遅延を差し込むことができます。

$('#form_id').submit(function(e) {
  var form = this;
  e.preventDefault(); // disable the default submit action

  _gaq.Push('_trackEvent', 'my category', 'my action');

  $(':input', this).attr('disabled', true); // disable all elements in the form, to avoid multiple clicks

  setTimeout(function() { // after 1 second, submit the form
    form.submit();
  }, 1000);
});
6
lonesomeday

これは、ページURLを変更する前にGoogleアナリティクスデータが送信されるように、gtag.jsでイベントコールバックを行う方法です。

gtag('event', 'view_promotion', { myParameter: myValue, event_callback: function () {
    console.log('Done!');
    // Now submit form or change location.href
} });

ソース： https://developers.google.com/analytics/devguides/collection/gtagjs/sending-hits

2
Tom Söderlund

ユニバーサルアナリティクスに移行したので、GTMとUAを使用して同じことに答えたいと思います。

[〜＃〜] gtm [〜＃〜]：

フォーム送信をクリックすると、Googleアナリティクスでイベントを追跡することは、GTMを使用して非常に簡単です。

  • UAタグを作成し、GTMでタイプをeventに設定します。
  • 目的のイベントアクション、カテゴリ、ラベルを入力します
  • フォーム送信タイプのトリガーを作成します。
  • 希望するボタンをターゲットにするための条件を追加します

これは、OPにとって最適で最適なアプローチです。

enter image description here

1
Tushar

すべての送信を追跡することが重要な場合、通常、必要なすべてのデータを使用してバックエンドにCookieを設定します。次に、GTMでルールを設定して、このファーストパーティCookieの存在に基づいてタグを起動します。このタグは、必要な値についてCookieを解析し、必要な値をすべて実行して、Cookieを削除します。

より複雑な例は、購入追跡です。ユーザーが購入を実行するときに5つの異なるタグを起動します。競合状態とウェルカムページへの即時リダイレクトにより、単純な「onSubmit」トラッキングに依存することが難しくなります。したがって、すべての購入関連データを使用してCookieを設定し、ユーザーがGTMで終了するページでCookieを認識し、Cookieを解析する「エントリポイント」タグを発行し、すべての値をdataLayerにプッシュして、Cookieを削除し、タグ自体がイベントをdataLayerにプッシュし、購入データを必要とする5つのタグ（既にdataLayerにある）をトリガーします。

0
Alexander Filatov