web-dev-qa-db-de.com

Verfolgen Sie das Ereignis in Google Analytics, indem Sie auf Formular senden klicken

Ich muss ein Ereignis in Google Analytics nachverfolgen, wenn jemand ein Formular ausfüllt und auf Senden klickt. Die resultierende Seite ist eine Standard-Dashboard-Seite. Um also das Ereignis auf dieser Seite zu verfolgen, muss ich das Ereignis in der URL eingeben und dann die URL lesen und den JavaScript-Code für die Google Analytics-Ereignisverfolgung ausgeben basierend darauf. Dies ist jedoch eine häufig mit Lesezeichen versehene Seite und eine Seite, die erneut geladen, wieder angeklickt usw. wird. Daher würde ich Tracking-Ereignisse in der URL lieber nicht weitergeben und die Analyse vermasseln.

Stattdessen mache ich lieber etwas wie den folgenden jQuery-Code auf der Seite mit dem Formular:

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

Das Problem, das ich mit dem oben genannten befürchte, ist, dass ich einige Ereignisse verpasse, die verfolgt werden, da der Browser unmittelbar nach dem Aufrufen dieses Javascript das Formular absenden und eine andere Webseite aufrufen wird. Wenn das utm.gif-Tracking-Bild nicht rechtzeitig geladen wird, verpasse ich das Ereignis :(.

Ist meine Angst berechtigt? Wie stelle ich sicher, dass ich keine erfassten Ereignisse verpasse?

62
at.

Es gibt nur zwei Möglichkeiten, um zu 100% sicherzustellen, dass alle Formularübermittlungen (unter Benutzern, für die JS aktiviert ist und die GA nicht blockieren) wie folgt erfolgen:

  • Sie können AJAX einreichen und müssen sich dann keine Sorgen mehr um die Seitenänderung machen und haben somit die ganze Zeit der Welt, um GA AND zu verarbeiten Ihre neue Seite wird anstelle der alten geladen.
  • Sie können das Formular zwingen, seine Aktion in einem neuen Fenster zu öffnen, sodass alle Hintergrundprozesse auf der Hauptseite ausgeführt werden und die von Ihnen befürchteten Rennbedingungen vermieden werden.

Der Grund dafür ist, dass Google Analytics keine Rückruffunktion hat. Sie können also nie sicher sein, dass Sie alle der Übermittlungen erfassen, selbst wenn Sie eine Verzögerung von 10 Sekunden angeben.

Alternativ können Sie einfach einen GET-Wert an die übermittelte Seite übergeben und auf dieser Seite eine Überprüfung für den Wert einrichten. Wenn festgelegt, können Sie einen trackEvent-Aufruf senden.

17
Yahel

Verwenden Sie Google Analytics hitCallback

Sie können eine benutzerdefinierte Rückruffunktion für das Tracker-Objekt angeben.

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

Der Rückruf wird aufgerufen, nachdem der "Treffer erfolgreich gesendet wurde".

Wenn Sie einen Klick auf eine Senden-Schaltfläche verfolgen und das Formular anschließend senden möchten, können Sie den folgenden Code (verwendet jQuery) für Ihre Veranstaltung verwenden:

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

Oder als onclickone Liner für Ihre <input type="submit"> Element:

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

Was es tut, dass es das Ereignis verfolgt My category/My action verwendet jQuery, um das zugrunde liegende Formularelement der gerade gedrückten Senden-Schaltfläche zu finden, und sendet dann das gesamte Formular.

Siehe: Google Analytics - Senden von Daten an Google Analytics - Hit Callback (danke supervacuo)

[~ # ~] update [~ # ~] Wenn Sie modernen analytics.js-Code mit definierter ga () -Funktion verwenden, können Sie dies schreiben wie folgt:

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

return !window.ga;
144
flu

Für diejenigen, die sich mit Google Analytics Universal beschäftigen und einen Trick mit HitCallback machen (FX-Track-Ereignis nach der Validierung, aber vor dem Absenden des Formulars), bedenken Sie, dass google-analytics.js möglicherweise blockiert werden kann, jedoch die Funktion ga noch definiert ist wird nicht passieren.

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

Kann mit einer Validierung behoben werden, die prüft, ob ga geladen ist

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

Diese Frage ist jetzt ein paar Jahre alt, und es scheint, dass Google Analytics eine Möglichkeit geboten hat, dies ohne die oben angegebenen Hacks zu tun.

Aus dem google analytics docs :

Zusätzlich zu Befehlsarrays können Sie auch Funktionsobjekte in die _gaq-Warteschlange verschieben. Die Funktionen können beliebiges JavaScript enthalten und werden wie Befehlsarrays in der Reihenfolge ausgeführt, in der sie auf _gaq verschoben werden.

Sie können dies mit Mehrfachbefehlen kombinieren, um sicherzustellen, dass sie der Reihe nach hinzugefügt werden (und einen Anruf speichern).

$('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

Bei guter hitCallback-Lösung bevorzuge ich das Setzen eines Cookies und das Auslösen des Ereignisses ab der nächsten Seite. Auf diese Weise wird ein Fehler in GA meine Site nicht stoppen:

// 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

Wenn Sie sich nicht allzu sehr um 100% Genauigkeit kümmern, können Sie einfach eine Verzögerung von 1 Sekunde festlegen.

$('#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

So machen Sie Event Callbacks in gtag.js, um sicherzustellen, dass Google Analytics-Daten gesendet werden, bevor Sie die Seiten-URL ändern:

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

Quelle: https://developers.google.com/analytics/devguides/collection/gtagjs/sending-hits

2
Tom Söderlund

Okay, da wir zu Universal Analytics gewechselt sind, möchte ich dasselbe mit GTM und UA beantworten.


[~ # ~] gtm [~ # ~] :

Mit GTM können Sie Ereignisse in Google Analytics nachverfolgen, indem Sie auf Formular senden klicken.

  • Erstellen Sie ein UA-Tag und setzen Sie den Typ in GTM auf event.
  • Füllen Sie die gewünschte Ereignisaktion, Kategorie und Bezeichnung aus
  • Erstellen Sie den Trigger vom Typ Form Submission.
  • Stellen Sie mehr Bedingungen auf den gewünschten Button

Dies ist der beste, optimale und unkomplizierte Ansatz für das OP.

enter image description here

1
Tushar

Wenn es wichtig ist, dass jede Übermittlung nachverfolgt wird, setze ich normalerweise ein Cookie im Backend mit allen erforderlichen Daten. Richten Sie dann in GTM eine Regel ein, um ein Tag basierend auf dem Vorhandensein dieses Erstanbieter-Cookies auszulösen. Das Tag analysiert das Cookie nach den erforderlichen Werten und führt alle erforderlichen Aktionen aus, um das Cookie zu entfernen.

Ein komplexeres Beispiel ist die Kaufverfolgung. Sie möchten 5 verschiedene Tags abfeuern, wenn der Benutzer einen Kauf tätigt. Die Rennbedingungen und die sofortige Weiterleitung zu einer Begrüßungsseite machen es schwierig, sich auf ein einfaches "onSubmit" -Tracking zu verlassen. Also setze ich ein Cookie mit allen kaufbezogenen Daten und auf jeder Seite, auf der der Benutzer GTM findet, wird das Cookie erkannt, ein "Einstiegspunkt" -Tag ausgelöst, mit dem das Cookie analysiert wird. Alle Werte an dataLayer senden, das Cookie entfernen und dann schiebt das Tag selbst Ereignisse an dataLayer, wodurch die 5 Tags ausgelöst werden, für die Kaufdaten erforderlich sind (die sich bereits in dataLayer befinden).

0