So erstellst du einfach ein Google Analytics Event-Tracking mit deinen Contact Form 7 Kontaktformularen

Es ist nun schon eine Weile her, seitdem Contact Form 7 die Möglichkeit entfernt hat, einen JavaScript-Code nach dem erfolgreichen Versand eines Kontaktformulars auszulösen.

Contact Form 7 hat aber einen kleinen JavaScript-Code zur VerfĂŒgung gestellt, mit dem man ein Skript ausfĂŒhren lassen kann. Die Voraussetzungen hierbei sind: Du benötigst einen FTP-Zugang auf deinen Web-Server und ein bisschen Know-How in JavaScript.

Du hast bereits einen FTP-Zugang von deinem Hoster erhalten? Sehr gut! Den Rest erklÀre ich dir in diesem Beitrag.

Solltest du kein Programmierer sein und dich nicht damit beschĂ€ftigen wollen, empfehle ich dir mein CF7 Event Tracker Plugin fĂŒr WordPress zu verwenden.

Was ist ein JavaScript EventListener?

Ein JavaScript EventListener ist recht einfach erklÀrt. Es achtet auf eine bestimmte Aktion, die ein anderes Script auslöst.

Dadurch wird es Web-Entwickler ermöglicht ein JavaScript auszufĂŒhren, sobald das Haupt-Skript eine bestimmte Stelle erreicht. Das ist vor allem fĂŒr AJAX-Funktionen sehr hilfreich.

AJAX bezeichnet eine Technologie in JavaScript, mit der man Inhalte wĂ€hrend der Laufzeit zur Webseite hinzufĂŒgen kann. Damit lassen sich auch Skripte zum speichern von Web-Applikationen realisieren, ohne die Seite neu laden zu lassen.

Wie wird ein JavaScript-Event ausgelöst?

Damit du verstehst wie ein EventListener funktioniert, möchte ich dir zunĂ€chst erklĂ€ren wie er in einem JavaScript eingefĂŒgt wurde.

Mit dem nachfolgenden Code kannst du auch deine eigenen EventListener in einem JavaScript programmieren, dass du fĂŒr andere Entwickler erstellt hast.

// So erstellst du ein neues Event
var myEvent = new Event( 'mycoolevent' );

// Und so wird das Event aufgerufen
document.dispatchEvent( myEvent );

Beachte bitte, dass diese Variante nicht im Internet Explorer funktioniert. Wenn du eine IE-UnterstĂŒtzung benötigst, kannst du folgenden (alten) Code verwenden:

// Erstelle ein neues Element
var myEvent = document.createEvent( 'Event' );
// ... und initialisiere es
myEvent.initEvent('mycoolevent', true, false);

// Der Aufruf ist gleich mit dem neuen JavaScript
document.dispatchEvent( myEvent );

Denke darĂŒber nach einen Honeypot fĂŒr Contact Form 7 zu integrieren. Dadurch kannst Spam-Mails ĂŒber dein Kontaktformular reduzieren.

Wie kann ich einen EventListener erstellen?

Ein EventListener ist recht einfach aufgebaut. Du musst nur den jeweiligen Event-Namen kennen. Diese findest du meistens in der Dokumentation des Skripts, dessen Ereignisse du verwenden möchtest.

Der Code ist bei beiden Methoden gleich:

document.addEventListener( 'build', function(e) {
	// Hier steht dein Code, der ausgefĂŒhrt wird, wenn das Ereignis ausgelöst wird
}, false );

Nun kennst du die Basics fĂŒr die Erstellung von EventListeners in JavaScript. Kommen wir als nĂ€chstes zu den Google Analytics Ereignissen.

 

Erstelle einen EventListener fĂŒr Contact Form 7

Irgendwo im JavaScript-Code des Contact Form 7 Plugins befinden sich EventListener, die erstellt und bei Bedarf ein fremdes Script auslösen.

Du musst nicht wissen, wo sich die Ereignisse befinden. Aber solltest wissen, welche Ereignisse es bei Contact Form 7 gibt.

Die Contact Form 7 Events in der Übersicht

In der Dokumentation des Formular-Plugins findest du alle JavaScript-Ereignisse, die du fĂŒr deine Erweiterung verwenden kannst.

wpcf7invalid
Dieses Event wird ausgelöst, sobald ein Benutzer auf den "Senden"-Button klickt und mindestens eines der Felder nicht richtig ausgefĂŒllt wurde.
Wenn z.B. ein "Email"-Feld in deinem Kontaktformular hast und der Benutzer keine valide E-Mail eingetragen hat, wird dieses Skript ausgelöst.

wpcf7spam
Sobald der Besucher auf den "Senden"-Button klickt, werden die Daten des Formulars an ein PHP-Skript gesendet. Dieses Skript ĂŒberprĂŒft unter Anderem, ob die Felder auf Spam hinweisen.
Das Event "wpcf7spam" wird in diesem Fall ausgelöst.

wpcf7mailsent
Das Event "wpcf7mailsent" wird ausgelöst, wenn alle Felder von Contact Form 7 als valide erachtet werden, es keine Anzeichen auf Spam gibt und es erfolgreich an den Mail-Server ĂŒbergeben wurde.

wpcf7mailfailed
Dieses Event kann zum Beispiel auftreten, wenn du keine Berechtigung zum versenden einer E-Mail hast. Versuche ein Plugin wie WP Mail SMTP zu installieren und die SMTP-Daten deiner Email-Adresse zu hinterlegen.
Dein Hoster kann dir dabei helfen.

wpcf7submit
UnabhÀngig, ob die eingegebenen Felder valide sind oder nicht oder ob es sich bei der Anfrage um Spam handelt, wird das Event "wpcf7submit" ausgelöst.
Solltest du eine Funktion benötigen, die immer ausgelöst wird wenn der Benutzer auf den "Senden"-Button klickt, kannst du dieses Ereignis verwenden!

Ein Google Analytics Event bei einer CF7 Anfrage senden

Kommen wir nun zu dem wichtigsten Teil: Das Absenden eines Google Analytics Ereignisses.

FĂŒr die VerknĂŒpfung zwischen deiner Webseite und Google Analytics hast du hoffentlich schon gesorgt. Du kannst in deinem Google Analytics Konto unter "Verwaltung > Property > Tracking-Informationen > Tracking-Code" deinen Analytics Tracking Code abrufen, den du auf deiner Website einbinden kannst.

Nachdem du kontrolliert hast, ob dein Analytics-Script auf deiner Webseite implementiert ist (Schaue dir dazu den Quellcode deiner Webseite mit Strg + U an), kannst du einen der folgenden JavaScript-Codes auf deiner Webseite hinzufĂŒgen. Achte darauf, dass die Codes innerhalb eines <script>-Tags stehen.

In den nachfolgenden Codes, musst du ein paar Platzhalter austauschen. Die Werte kannst du nach belieben anpassen. Achte bitte nur darauf, dass du die entsprechenden Formate verwendest.

  • KAMPAGNE:
    Eine Kampagne kann zum Beispiel "Anfrageformular" lauten. Achte bitte darauf, dass du deinen Wert in AnfĂŒhrungszeichen (") oder Hochkommas (') eintrĂ€gst. Dieser Wert ist ein sogenannter "String", also eine Zeichenkette bestehend aus Buchstaben, Zahlen und Sonderzeichen.
  • AKTION:
    Die Aktion soll die Kampagne genauer spezifizieren. Als Beispiel kannst du "Dienstleistung" eintragen. Solltest du Dienstleistungen und Waren ĂŒber ein Anfrageformular verkaufen wollen, kannst du in Google Analytics genau nachvollziehen wie viele Anfragen fĂŒr die jeweilige Kategorie versendet wurden. Dieser Wert ist ebenfalls ein "String".
  • LABEL:
    Mit dem Label kannst du die Anfrage noch genauer spezifizieren. Bei einer Dienstleistung kann der eindeutige Name (z.B. "Web-Programmierung") enthalten sein. Bei einem Produkt kannst du zum Beispiel "WordPress-Plugin XY" eintragen.
  • WERT:
    Der Wert kann z.B. der Preis einer Dienstleistung oder eines Produkts sein. Achte darauf, dass du einen "Float"-Wert mit 2 Nachkomma-Stellen verwendest (z.B. "1.99", "100.00", etc. Bitte keine AnfĂŒhrungszeichen (") oder Hochkommas (') verwenden. Zahlen werden immer ohne AnfĂŒhrungszeichen eingefĂŒgt.)

Alle anderen Felder solltest du nicht bearbeiten. Diese sind fĂŒr das Event-Tracking von Google notwendig.

 
Google Analytics Tag Manager

Der Tag-Manager ist die neueste Variante von Google Analytics. Solltest du Google Analytics erst vor kurzem auf deiner Webseite eingefĂŒgt haben, wirst du höchstwahrscheinlich diesen Code benötigen.

Achte in deinem Tracking-Code auf die Funktion "gtag", um sicher zu sein, dass du wirklich den Google Tag Manager verwendest.

Alternativ kannst du in der Entwickler-Konsole des Browsers (F12) unter "Konsole" den Befehl "gtag" eingeben. Sollte ein roter Fehler erscheinen, weißt du dass du den Tag Manager nicht verwendest. In diesem Fall kannst du dir einen der nachfolgenden Codes ansehen.

document.addEventListener( 'wpcf7mailsent', function(e) {
	gtag('event', 'AKTION', {
		'event_category': 'KAMPAGNE',
		'event_label': 'LABEL',
		'value': 'WERT'
	});
}, false );
Google Analytics Universal Tracking

Viele Webseiten verwenden noch das etwas veraltete Google Analytics Universal Tracking (ga). Mit folgendem Code kannst du dafĂŒr ein Ereignis auslösen.

Solltest du dir nicht sicher sein, ob du das Universal Tracking verwendest, kannst du wie beim Test des Tag Managers in die Entwickler-Konsole wechseln und "ga" eintragen.

document.addEventListener( 'wpcf7mailsent', function(e) {
	ga(
		'send',
		'event',
		'KAMPAGNE',
		'AKTION',
		'LABEL',
		'WERT'
	);
}, false );
Google Analytice Classic Tracking

Das ist das Àlteste Script von Google Analytics, dass aber nach wie vor auf einigen Webseiten zu finden ist. Solltest du die Möglichkeit haben, empfehle ich dir das Script zu aktualisieren.

Sollte beim Test in der Entwickler-Konsole (wie bei Universal Tracking und Tag Manager) ein Fehler in Rot ausgegeben werden, wenn du "_gaq" eingibst, hast du wohl kein Google Analytics auf deiner Webseite installiert.

document.addEventListener( 'wpcf7mailsent', function(e) {
	_gaq.push([
		'_trackEvent',
		'KAMPAGNE',
		'AKTION',
		'LABEL',
		'WERT'
	]);“
}, false );

Das Event-Tracking lÀsst sich hervorragend mit dem JavaScript Lazy-Loading kombinieren. Dadurch sparst du beim initialen Aufruf deiner Webseite Ressourcen.

Das Tracking im Contact Form 7 Formular testen

Nachdem du das Script zu deiner Webseite hinzugefĂŒgt hast, solltest du es unbedingt testen.

Das Testing ist fĂŒr 2 Erkenntnisse wichtig. Zum einen möchtest du natĂŒrlich deine Anfragen in Google Analytics sehen können. Zum anderen solltest du nach jeder Änderung dein Kontaktformular prĂŒfen, um sicherzustellen dass deine Besucher auch Anfragen versenden können.

 

Melde dich dazu in deinem Google Analytics Konto an und wechsle zum MenĂŒ "Echtzeit > Ereignisse" in der linken Sidebar.

Als nÀchstes kannst du das Kontaktformular testen. Es spielt keine Rolle welche Eingaben du machst.

Nachdem du auf den "Senden"-Button geklickt hast, kannst du wieder zurĂŒck zu Google Analytics wechseln. Innerhalb der nĂ€chsten Minute sollte automatisch ein neuer Eintrag mit deinem Event erscheinen. In diesem Fall hast du alles richtig gemacht.

Sollte der Eintrag nicht erscheinen, empfehle ich dir den Beitrag noch einmal genauer durchzulesen. Vielleicht hast du einen Schritt ĂŒbersehen oder nicht richtig durchgefĂŒhrt.

 

Codepalm
Event-Tracking mit Google Analytics und Contact Form 7