Start > Knowhow > Online marketing > Mehr als nur Tracking: 3 kreative Anwendungen des Google Tag Managers

Mehr als nur Tracking: 3 kreative Anwendungen des Google Tag Managers

Mehr als nur Tracking: 3 kreative Anwendungen des Google Tag Managers
TrafficDesign
https://www.trafficdesign.de/sites/all/themes/trafficdesign/images/trafficdesign-250.png

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.

Google Tag Manager: 3 kreative Anwendungen

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:

  1. Erstellen Sie einen neuen Trigger-Typ: Klick > "Nur Links"
  2. In den Einstellungen wählen Sie "Einige Klicks auf Links"
  3. 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)

Ein Tag Manager Trigger mit CSS-Selektor

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:

  1. Erstellen Sie einen neuen Trigger-Typ: "Scrolltiefe"
  2. Wählen Sie zwischen "vertikal" und "horizontal"
  3. 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:

<script>
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

  1. Starten Sie ganz normal mit einem Trigger für das Ereignis, dass den Cookie erzeugen soll (z.B. den Besuch einer bestimmten Unterseite).
  2. Nun wählen als Tag-Typ: Benutzerdefiniert > Benutzerdefiniertes HTML und geben folgenden Code ein:
<script>
  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:

  1. Erstellen Sie eine neue Benutzerdefinierte Variable: "First-Party-Cookie" und geben Sie den Namen Ihres Cookies ein (siehe Beispielcode, Zeile 2)
  2. Erstellen Sie einen neuen Trigger-Typ: "Seitenaufruf"
  3. 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.
  4. Geben Sie eine Bedingung für den Wert ein.

Eine selbst erstelle Cookie Variable im Tag Manager

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).
Tipp: Den fertigen Cookie können Sie mit der Chrome Erweiterung EditThisCookie ganz einfach selber testen. Alternativ können Sie alle aktuellen Cookies in den Chrome DevTools im Menu "Application" einsehen und editieren. 

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:

<style>
  .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. 

<script>
  jQuery('h1').html(function(){
    return jQuery(this).html() + ' - Wir sind ziemlich gut!';
  });
</script>

Anpassung einer Überschrift mit dem Tag Manager und jQuery

Welche kreativen Möglichkeiten den Google Tag Manager zu verwenden verwenden Sie bereits?

Wir freuen uns über Ihre Vorschläge und Fragen.

https://www.trafficdesign.de/sites/default/files/styles/twittercard/public/tagmanger-creativ_0.jpg?itok=2MaVdfhD
Fanden Sie den Artikel hilfreich?
Durchschnitt: 4.8 (6 votes)
Rene Beineke
Suchmaschinen- und Facebook-Ritter aus Leidenschaft. In meiner Freizeit esse ich gerne Brokkoli und klettere Steine hoch.

Kostenlose Erstanalyse

Tragen Sie Ihre Website ein und erhalten Sie eine kostenlose Einschätzung Ihres Online Marketing Potenzials.

Oder schicken Sie uns eine Kontaktanfrage

Fragen oder Probleme zu diesem Thema?

Einfach kommentieren und wir helfen Ihnen kostenlos und zeitnah weiter.

Kommentar verfassen

Vergessen Sie nicht Ihr Neukundenangebot!

Zurück zum Angebot

Nicht mehr anzeigen