{"id":289,"date":"2017-02-14T16:14:55","date_gmt":"2017-02-14T15:14:55","guid":{"rendered":"http:\/\/www.dair-media.net\/blog\/?p=289"},"modified":"2017-03-19T22:44:05","modified_gmt":"2017-03-19T21:44:05","slug":"conversion-tracking-fuer-wordpress-kontaktformulare","status":"publish","type":"post","link":"https:\/\/www.dair-media.net\/blog\/conversion-tracking-fuer-wordpress-kontaktformulare\/","title":{"rendered":"Conversion-Tracking f\u00fcr WordPress Kontaktformulare"},"content":{"rendered":"

Immer mehr Unternehmen setzen f\u00fcr ihren Online-Auftritt auf WordPress. Dank der Vielzahl an Templates (\u201eThemes\u201c genannt) ist eine Website schnell aufgesetzt. Dann noch ein Formular f\u00fcr die Kontaktaufnahme und schon kann die Website starten. Wer dann die Conversions in Form von Kontakt-Anfragen messen m\u00f6chte, muss nat\u00fcrlich die Gedanken \u00fcber das Tracking machen.
\nEines der beliebtesten und verbreitetsten WordPress Plugins f\u00fcr Kontakt-Formulare ist \u201eContact Form 7\u201c (Website<\/a>). Daher stellen wir in diesem Beitrag eine einfache Methode vor, um Conversion-Tracking f\u00fcr WordPress und CF7 einzurichten.<\/p>\n

Herausforderung: Formular-Versand per Ajax-Aufruf<\/h2>\n

In der Grundeinstellung verschickt Contact Form 7 (CF7) die Formular-Daten per Ajax. Damit wird keine zus\u00e4tzliche Danke-Seite ge\u00f6ffnet, auf der das Conversion Tracking Code eingef\u00fcgt werden kann. Dies l\u00e4sst sich in den Einstellungen zwar \u00e4ndern, doch auf vielen Websites bleibt diese Option ungenutzt. Als AdWords Agentur m\u00fcssen wir also damit leben und das Tracking so einrichten, dass auch solche per Ajax abgeschickten Formulare erfasst werden k\u00f6nnen.<\/p>\n

Am einfachsten geschieht es, wenn das (erfolgreiche) Absenden des Formulars als ein Ereignis (Event) an Google Analytics \u00fcbermittelt wird. Dann kann dieses Event als ein Zielvorhaben definiert und sp\u00e4ter auch als Conversion in den zugeh\u00f6rigen AdWords Account importiert werden. Dies setzt nat\u00fcrlich voraus, dass Google Analytics auf der Website auch zum Einsatz kommt. Im Folgenden gehen wir davon aus, dass Google Analytics bereits in die Website integriert wurde \u2013 ob per Plugin oder \u00fcber den Tag Manager.<\/p>\n

Formular-Versand als Analytics-Event<\/h2>\n

Bei einem Formular z\u00e4hlt (in der Regel) ein erfolgreicher Versand als gew\u00fcnschte Aktion. Diesen vollst\u00e4ndigen Versand wollen wir also als Conversion erfassen. Wie bereits oben beschrieben, soll dabei ein Google Analytics Event [LINK] verschickt werden.<\/p>\n

UPDATE vom 17.03.2017<\/strong>: Der Autor vom CF7 hat die hier vorgestellte Methode als \u201edeprecated\u201c markiert. Die Funktion, die wir hier einsetzen, soll voraussichtlich Ende 2017 nicht mehr unterst\u00fctzt werden. Eine alternative L\u00f6sung erfordert entweder etwas mehr JavaScript Programmierung oder den Einsatz des Google Tag Managers.<\/p><\/blockquote>\n

Gl\u00fccklicherweise liefert CF7 eine Funktion, die genau dies m\u00f6glich macht. Bei dem Formular-Plugin ist es n\u00e4mlich m\u00f6glich, einen JavaScript-Code zu definieren, der ausgef\u00fchrt wird, nachdem ein Formular erfolgreich abgeschickt wurde (vgl. CF7 Dokumentation<\/a>). Genau hier setzten wir den Event-Aufruf f\u00fcr Analytics ein.<\/p>\n

Und so funktioniert es:<\/h3>\n

1.\u00a0\u00a0 \u00a0\u00d6ffenen Sie im WordPress Backend ein Formular, welches getrackt werden soll.
\n2.\u00a0\u00a0 \u00a0Auf dem Tab \u201eZus\u00e4tzliche Einstellungen\u201c gibt es ein Feld, in dem ein Code-Schnipsel zur Anpassung hinzugef\u00fcgt werden kann.
\n3.\u00a0\u00a0 \u00a0Hier kann nun das on_sent_ok Hook eingesetzt werden:<\/p>\n

on_sent_ok: \"alert('sent ok');\"<\/pre>\n
Statt eines Alerts setzen wir hier nat\u00fcrlich den Google Analytics Event ein. In seiner Grundform sieht dieser wie folgt aus (vgl. Google Dokumentation zu Event Tracking ,\u00a0 https:\/\/developers.google.com\/analytics\/devguides\/collection\/analyticsjs\/events):<\/p>\n
ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);<\/pre>\n
Ein einfacher Aufruf k\u00f6nnte also wie folgt aussehen:<\/p>\n
on_sent_ok: \"ga('send', 'event', 'Contact Form', 'Submit');\"<\/pre>\n
Da wir diesen Aufruf je Kontakt-Formular definieren, k\u00f6nnen wir hier auch noch den Formular-Namen als Label eintragen. Dies ist dann praktisch, wenn es mehrere Formulare auf der Website gibt und wir diese getrennt voneinander in Google Analytics betrachten wollen:<\/p>\n
on_sent_ok: \"ga('send', 'event', 'Contact Form', 'Submit Success', 'Kontakt');\"<\/pre>\n
So kann es dann am Ende aussehen:<\/p>\n
\"Conversion<\/a>
WordPress Contact Form 7: on_sent_ok<\/figcaption><\/figure>\n
Folgendes gilt zu beachten<\/h3>\n
Der JavaScript Code hinter on_sent_ok darf nur in einer Zeile stehen. Kompliziertere mehrzeilige Codes sind also nicht m\u00f6glich.<\/p>\n
Ein weiterer Stolperstein: In unserem Beispiel sind wir davon ausgegangen, dass der Google Analytics Tracking Code in seiner Standard-Variante integriert wurde und der zugeh\u00f6rige Tracking-Objekt den Namen \u201ega\u201c tr\u00e4gt. Je nach Konfiguration oder auch dem verwendeten Analytics-Plugin kann dieser einen anderen Namen tragen. Dann muss der Aufruf nat\u00fcrlich entsprechend angepasst werden. So verwendet zum Beispiel der \u201eGoogle Analytics by MonsterInsights\u201c Plugin als Tracker-Objekt \u201e__ gaTracker\u201c. Damit w\u00fcrde der Aufruf f\u00fcr das Analytics Event wie folgt aussehen:<\/p>\n
on_sent_ok: \" __gaTracker('send', 'event', 'Contact Form', 'Submit Success', 'Kontakt');\"<\/pre>\n
Jetzt muss nur noch dieses Ereignis als Zielvorhaben in Google Analytics eingerichtet werden. Mehr dazu unter https:\/\/support.google.com\/analytics\/answer\/1032415<\/a><\/p>\n
Hat Ihnen der Artikel gefallen? Teilen Sie ihn bitte.<\/div>