Mehr als nur Tracking: 3 kreative Anwendungen des Google Tag Managers
Seit seiner Einführung in 2012 ist der Google Tag Manager mittlerweile zu einem Must-Have Tool im Online Marketing herangewachsen. Eine der wichtigsten Funktionen ist mit Sicherheit das Tracking von Leads, Konversionen und Retargeting Listen. Die Einrichtung und den grundlegenden Funktionsumfang des Tag Managers haben wir bereits in einem separaten Tag Manager Guide behandelt. Der Google Tag Manager kann jedoch noch viel mehr als Tracking und Retargeting. Im Folgenden haben wir ein paar kreative Tag Manager-Lösungen dokumentiert, die uns in der Vergangenheit schon sehr geholfen haben.
1. Google Analytics und Facebook Events
Fangen wir mit etwas Offensichtlichem an; die Erweiterung der schon vorhandenen Tracking Funktionen durch benutzerdefiniert Events für Facebook und Google Analytics.
Im besten Fall messen Sie Ihre wichtigsten KPIs bereits durch Enhanced Ecommerce, Zielvorhaben, Facebook Standardevents und Custom Conversions. Was aber, wenn Sie Microconversions messen wollen, die nicht durch einfache Bedingungen wie Nutzer befindet sich auf Seite X definieren lassen? In diesem Fall haben Sie mit dem Tag Manager genau das richtige Werkzeug zur Hand. Nehmen wir folgende zwei Beispiele: – Wie lässt sich messen, ob eine Person auf einen bestimmten Button oder Call To Action klickt? – Wie erfahre ich ob eine Person auf einer bestimmten Seite gescrollt, also den Content weitergelesen hat?
Beide Fälle lassen sich mit etwas Sicherheit in JavaScript oder unseren Guide zum Google Analytics Event Tracking realisieren. Noch einfacher ist es jedoch mit dem Tag Manager: Ist dieser einmal installiert, müssen Sie am Quellcode Ihrer Website überhaupt nichts ändern. Als erstes benötigen wir Trigger für die entsprechenden Ereignisse:
Trigger: Klick auf bestimmte Elemente
Wenn zum Beispiel mehrere Links oder Call To Actions auf einer Seite das gleiche Ziel haben, möchten Sie vielleicht wissen, welcher dieser Buttons geklickt wurde. Über normale Zielvorhaben ist dies nicht möglich. Das gleiche gilt für Links, die zu Overlays oder Modalen führen. Mit dem Google Tag Manager können Sie jedoch einen Trigger einrichten, der auf bestimmte Seitenelemente reagiert. Bei Links funktioniert dies wie folgt:
- Erstellen Sie einen neuen Trigger-Typ: Klick > „Nur Links“
- In den Einstellungen wählen Sie „Einige Klicks auf Links“
- Nun können Sie aus verschiedenen Bedingungen auswählen. Häufig eignen sich individuelle CSS-Klassen oder IDs, die nur bei entsprechendem Link vorkommen (Beispiel: Click Element > Übereinstimmung mit CSS-Selektor > .submit)
Trigger: Scrolltiefe
Wollen Sie wissen, wie weit ein Nutzer auf einer Seite gescrollt hat, ist dies sogar noch einfacher. Hierfür bietet der Tag Manager bereits eine Vorlage:
- Erstellen Sie einen neuen Trigger-Typ: „Scrolltiefe“
- Wählen Sie zwischen „vertikal“ und „horizontal“
- Geben Sie an, bei welchen Prozentsätze (bzw. Pixelzahlen) dieser Trigger ausgelöst werden soll.
Senden der Events an Google Analytics und Facebook
Sobald die Trigger funktionieren, können Sie entsprechende Tags erstellen, die automatisch bei jedem Auslösen die Trigger Events an Google Analytics und Facebook senden.
Für Google Analytics gibt es hier bereits eine Vorlage. Wählen Sie ein neues Tag, Typ: „Universal Analytics“ und stellen den Tracking-Typ auf „Ereignis“. Nun sollten Sie Ihr Ereignis noch durch Kategorie, Aktion, Label und Wert benennen und sind fertig.
Für Facebook Events gibt es keine Vorlage. Der Vorgang ist aber ähnlich einfach. Erstellen Sie ein neues Tag vom Typ Benutzerdefiniert > Benutzerdefiniertes HTML und füllen die Textbox mit folgendem Code:
fbq(‚track‘, ‚Lead‘, {
content_category: ‚Kontakt‘,
content_name: ‚Formular‘
});
</script>
Das ‚Lead‘ in der zweiten Zeile kann durch alle Facebook Standard Events ersetzt werden. content_category und content_name können frei definiert werden, bzw. gegen andere Parameter ausgetauscht werden.
2. Cookies setzen
Mit dem Google Tag Manager können Sie problemlos WENN-DANN-Beziehung auf einer bestimmten Seite definieren und ausführen. Was jedoch, wenn Sie Informationen verarbeiten wollen, die sich durch Handlungen auf mehreren Unterseiten zusammensetzen? Dies geht im Normalfall durch Datenschichtvariablen, ist jedoch häufig mit unverhältnismäßig großem Einrichtungsaufwand verbunden. In bestimmten Fällen geht dieses schneller, wenn wir einfach unsere eigenen Cookies setzen.
Zwei Beispiele:
- Kontaktanfragen nachdem Benutzer eine bestimmte Unterseite besucht haben: Häufig verfügen Websites über ein seitenübergreifendes Kontaktformular. Bieten Sie jedoch mehrere Services oder Produkte an, ist es mitunter interessant zu wissen, auf welchen Seiten der Nutzer vor dem Stellen der Anfrage war. So lassen sich auch einzelne Werbekampagnen besser messen.
- Eindeutige Ereignisse: Manchmal möchten Sie (Micro-)Conversionen nur bei der ersten Auslosung pro Nutzer verfolgen, damit ‚Vielklicker‘ Ihnen die Daten nicht verfälschen. Auch dies geht ganz einfach mit einem Cookie!
Cookies mit dem Tag Manager erzeugen
- Starten Sie ganz normal mit einem Trigger für das Ereignis, dass den Cookie erzeugen soll (z.B. den Besuch einer bestimmten Unterseite).
- Nun wählen als Tag-Typ: Benutzerdefiniert > Benutzerdefiniertes HTML und geben folgenden Code ein:
var cookieName = „Beispielname“; // Name des Cookies
var cookieValue = „true“; // Wert des Cookies
var expirationTime = 5400; // Zeit bis der Cookie verfällt in Sekunden
expirationTime = expirationTime * 1000;
var date = new Date();
var dateTimeNow = date.getTime(); date.setTime(dateTimeNow + expirationTime);
var expirationTime = date.toUTCString();
document.cookie = cookieName+“=“+cookieValue+“;expires=“+expirationTime+“; path=/; domain=.“ + location.hostname.replace(/^www\./i, „“);
</script>
Für einen einfachen Cookie, der nur den Wert „true“ oder „false“ übergibt, müssen Sie nur drei Werte manuell eingeben (Zeile 2 bis 4): Den Namen des Cookies, den Wert und wie lange der Cookie gültig sein soll.
Den fertigen Cookie später auslesen
Sobald der Cookie beim Nutzer erstellt wurde, kann dieser ganz einfach mit dem Tag Manager ausgelesen werden. Hierfür gibt es sogar eine Vorlage:
- Erstellen Sie eine neue Benutzerdefinierte Variable: „First-Party-Cookie“ und geben Sie den Namen Ihres Cookies ein (siehe Beispielcode, Zeile 2)
- Erstellen Sie einen neuen Trigger-Typ: „Seitenaufruf“
- Wählen Sie „Einige Seitenaufrufe“ und dann „Diesen Trigger auslösen, wenn ein Ereignis eintritt und alle diese Bedingungen erfüllt sind“: Die gerade erstellte Variable.
- Geben Sie eine Bedingung für den Wert ein.
Auf Basis dieses Triggers können Sie nun das gewünschte Tag auslösen. Anhand der Beispiele oben könnte dies so aussehen:
- Der Nutzer besucht eine spezifische Produktseite, der Cookie wird erstellt und sobald der Nutzer nun eine Kontaktanfrage stellt, erkennt der Tag Manager, dass der Nutzer vorher auf eben jener Produktseite war und löst ein spezifisches Tag aus.
- Der Nutzer löst eine (Micro-)Conversionen aus, der Cookie wird gesetzt und die Konversion gezählt. Sobald die gleiche Konversion jedoch wiederholt ausgelöst wird, zählt der Tag Manager die Konversion nicht mehr, weil der Cookie gesetzt wurde (Unique Conversion).
3. Seitenanpassungen
Mit dem Tag-Typ: Benutzerdefiniert > Benutzerdefiniertes HTML kann man nicht nur Tracking Codes erstellen und Cookies setzen, sondern auch direkt die Seite bearbeiten. Möchte man schnelle Änderungen an bestimmten Seitenelementen durchführen (oder testen), kann dies eine effektive Abkürzung (als Alternative zum Ticket bei der IT) sein.
Hier für gibt es zwei Methoden:
Seitenanpassungen mit CSS
Sie können direkt CSS in das Benutzerdefinierte HTML schreiben. Vergessen Sie die umklammernden <style>
und </style>Tags nicht und Ihr Code wird direkt erkannt.
Probieren Sie doch einfach mal folgenden Code auf Ihrer Seite:
.body {background-color: pink;}
</style>
Seitenanpassungen mit jQuery
Viel interessanter wird es jedoch wenn Sie über grundlegende jQuery-Kenntnisse verfügen. So können Sie auf einfachste Weise Elemente im DOM ansprechen, ändern oder neue hinzufügen.
Mit folgendem Code können Sie Text zur bestehenden h1 hinzufügen.
jQuery(‚h1‘).html(function(){
return jQuery(this).html() + ‚ – Wir sind ziemlich gut!‘;
});
</script>
Brauchen Sie Unterstützung bei diesem Thema?
Sprechen Sie uns unverbindlich an und lassen Sie sich von uns beraten.