Wie wird die Ereignisverfolgung in Google Analytics beim Senden von Formularen eingerichtet?

Question

Ich versuche zu verfolgen, wenn ein Benutzer die Übermittlungsschaltfläche in einem Kontaktformular trifft.
Die URL der Seite ändert sich nicht, ihre statische.
Ich kann eine andere URL nach der Einreichung nicht verfolgen, die einzige Möglichkeit wäre zu verfolgen, wenn ein Benutzer die Schaltfläche absenden drückt.

Muss ich mein Analytics-Konto bearbeiten?
Wo füge ich das zusätzliche Javascript hinzu?
UA ist korrekt installiert (analytics.js)
Ich bin neu in GA und Javascript, also bitte brechen Sie es für mich auf.

Dank

Answer 1

I can't track a differnt URL after submission, the only option would be to track when a user hits the submit button. 

Das ist ein bisschen eine unlogische Schlussfolgerung ist. Selbst wenn sich die Url nicht ändert, passieren wahrscheinlich einige Dinge - bevor Sie es senden, gibt es wahrscheinlich eine Formvalidierung, und es gibt etwas Aktion hinter der Szene, um diese Form zu senden, wie z.B. einen Ajax-Aufruf.

Sie könnten Ereignis anhängen zu einem einreichen Handler Tracking:

<form onSubmit="ga('send','event','category','action','label')"> 
<input type="text" id="text" name="text"> 
<input type="submit"> 
</form> 

aber dies würde nur sagen, dass jemand den Absenden-Button schlagen, nicht, wenn sie in Form korrekt ausgefüllt oder wenn das Formular tatsächlich gesendet wurde .

Jetzt betrete ich Spekulationsland, weil ich nicht weiß, wie Ihre Form tatsächlich funktioniert - vielleicht können Sie uns eine URL zeigen oder mehr Informationen geben.

Aber vielleicht haben Sie eine Validierungsfunktion, die bei der Übermittlungsaktion des Formulars aufgerufen wird, um zu sehen, ob das Formular korrekt ausgefüllt ist. In diesem Fall wäre es ratsam, die Verfolgung in der Validierungsfunktion (schrecklich vereinfachtes Beispiel, nicht Produktionscode) zu tun:

<form onSubmit="validate()"><input type="text" id="text" name="text"><input type="submit"></form> 

<script> 
function validate() { 
var test = document.querySelector('#text').value 
if(test = "") { 
    ga('send','event','Form','Submit','Submitted, but not filled in'); 
    return false; 
} 
ga('send','event','Form','Submit','Submitted with correct values'); 
return true; 
} 
</script> 

Das ist ein bisschen besser, zumindest verfolgt sie den Unterschied zwischen korrekten Eingaben und ungültigen Eingaben.

Noch mehr Spekulation: Wenn Ihr Formular ohne Seite neu geladen wird, verwendet es wahrscheinlich einen Ajax-Aufruf, und es gibt eine große Wahrscheinlichkeit, dass jQuery verwendet wird (ich sage, dass a) es wirklich wahrscheinlich ist und b) es einfacher ist konstruiere ein Beispiel in jQuery. Dasselbe kann mit anderen Bibliotheken oder in nativem JS erreicht werden, aber das Beispiel erzeugt einen Fehler, wenn Sie jQuery nicht verwenden.

jQuery hat eine Sache namens "globale Ajax-Handler". "Global" bedeutet, dass es sich nicht um Callbacks für eine bestimmte Aktion handelt. Sie greifen bei jedem Aufruf einer Ajax-Funktion in den jQuerys-Ajax-Mechanismus ein. Das Folgende könnte funktionieren, wenn Sie nur ein AJA-Ereignis pro Seite haben (andernfalls benötigen Sie eine Logik, um das unterschiedliche AJAX-Ereignis zu unterscheiden, z. B. durch Überprüfen der URL, an die sie gesendet werden) und verfolgen, ob der AJAX-Aufruf erfolgreich ausgeführt wurde. wie wenn das Formular Daten an den Server und die Anfrage senden wurde ein 2xx-Statuscode zurück:

$(document).ajaxSuccess(function() { 
ga('send','event','Form','Submit','Yeah, form data sent to the server'); 
}); 

dies gilt jedoch nicht sagen, ob die Daten korrekt verarbeitet wurde.Für, dass Sie den Server zu einem Erfolg machen müssen Nachricht aussenden und überprüfen Sie die Antwort:

$(document).ajaxSuccess(function(event, xhr, settings) { 
    if (settings.url == "formprocessor.php") { 

     if(xhr.responseText.indexOf("success") > -1) { 
     ga('send','event','Form','Response Received','Form data processed '); 
     } else { 
     ga('send','event','Form','Response Received','Form data NOT processed '); 
     } 
    } 
}); 

Die globalen Ajax-Event-Handler an das Dokument angehängt ist - können Sie, dass überall auf Ihrer Seite setzen, wird es nichts, wenn ein tun Ajax-Ereignis wurde aufgerufen.

Nochmals Dies ist kein Produktionscode. Versuchen Sie nicht zu kopieren und einzufügen.

Das war sicherlich ein bisschen viel, wenn Sie neu sind, aber es sollte Ihnen zumindest helfen, die Frage zu verbessern und zu sehen, was für Dinge möglich sind. Wenn Sie eine URL für Ihr Formular freigeben können, kann ich die Antwort möglicherweise verbessern.