🔎 Event Tracking mit Google Analytics und Contact Form 7

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.