Eine Einführung in Google Tag Manager

Avatar of David Attard
David Attard am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Das Folgende ist ein Gastbeitrag von David Attard. Ich wurde erst vor kurzem gewahr, dass Google Tag Manager *so etwas* ist, wusste aber nicht genau, was es ist, was es tut oder warum es mich interessieren sollte. Glücklicherweise hat sich David hier gemeldet, um es zu erklären, damit wir es jetzt alle verstehen können. Los geht's, David!

Waren Sie schon einmal Empfänger einer „dringenden“ Marketinganfrage, ein Google Analytics- oder anderes Skript auf der Website Ihres Unternehmens zu ändern? Und wie oft mussten Sie die Skripte während der Kampagne immer wieder ändern und neu schreiben?

Wir haben eine Lösung für Sie. Ihre dringenden Änderungsanfragen sind bald vorbei.

Hand hoch, alle, die jemals eines der folgenden Szenarien erlebt haben

Wir haben diese Marketingkampagne vor uns und brauchen wirklich dieses neue, andere Google Analytics-Skript auf unserer Website. Es unterscheidet sich von dem, das vom Unternehmen verwendet wird, damit wir bestimmte Teile der Websites selbst verfolgen können.

Oder etwas wie

Wir haben gerade eine neue Reihe von Landing Pages entwickelt, die ein benutzerdefiniertes Skript zusammen mit einem KissMetrics-Skript benötigen, und auf bestimmten Seiten möchten wir auch CrazyEgg hinzufügen.

Oder sogar

Ich weiß, wir haben Sie gebeten, dieses Skript hinzuzufügen, aber wir sind mitten in einer Kampagne und müssen dieses Skript DRINGEND optimieren, bevor unser Marketingbudget aufgebraucht ist.

Wenn Sie wie die meisten Webentwickler sind, die mit einem digitalen Marketingteam zusammenarbeiten, kommen Ihnen die oben genannten oder ähnliche Situationen wahrscheinlich bekannt vor. Google Tag Manager ist die Lösung, um ein System zu schaffen, das sowohl für Webentwickler als auch für Marketingteams funktioniert. In Entwicklersprache ist Google Tag Manager ein Skript, das das Einfügen von *anderen* Skripten in Ihre Website über eine benutzerfreundliche Oberfläche verwaltet.

Wir zeigen Ihnen, wie Google Tag Manager die Effizienz von Website-Entwicklern und Online-Marketingteams verbessern kann.

Warum brauchen Sie Google Tag Manager?

Jedes Unternehmen mit einem unabhängigen Marketingteam weiß, wie entscheidend digitales Marketing für seinen Erfolg ist. Es mangelt nicht an Werkzeugen zur Anpassung, Überwachung, Verbesserung und Analyse von Marketingkampagnen. Da die Marketingteams auf neue Werkzeuge reagieren, die in ihrer Branche aufkommen, um an der Spitze zu bleiben, werden Sie immer mehr Änderungen an der Website vornehmen. Verschiedene Skripte müssen zur Website hinzugefügt werden, um die neuen Werkzeuge zu integrieren.

Die meisten Entwicklungsänderungen müssen einen Genehmigungsprozess durchlaufen. Möglicherweise haben Sie verschiedene Genehmigungen, um von der Entwicklung, über die Staging-Umgebung bis hin zur Vorproduktionsprüfung zu gelangen. Dies ist, bevor wir zur Produktion übergehen können. Mit wachsender Unternehmensgröße werden all diese beweglichen Teile tendenziell schwerer und dauern länger. Aber in einer schnellen und agilen Welt sollten Dinge nicht Tage dauern.

Außerdem haben Entwickler wichtigere Dinge zu tun, als Marketing-Skripte zu aktualisieren.

Google Tag Manager ermöglicht es Benutzern, über eine Benutzeroberfläche zu definieren und zu entscheiden, welche Skripte („Tags“) unter welchen Umständen angezeigt werden. Dies entlastet erheblich den oben genannten Druck, weil

  1. Das Marketingteam hat die volle Kontrolle darüber, welche Tags unter den verschiedenen Bedingungen enthalten sind.
  2. Das Entwicklungsteam muss keinen benutzerdefinierten Code, keine Bedingungen und keine verschiedenen Versionen von Tags erstellen, um alle unterschiedlichen Umstände zu bewältigen, die von den Marketingteams gefordert werden.

Das klingt nach einer schlechten Idee

Wenn man dem Marketingteam erlaubt, an Ihrer schön codierten Website herumzubasteln, mag das wie eine schrecklich schlechte Idee klingen. Sie sind wahrscheinlich davon überzeugt, dass dies Ihrer Website allerlei Unheil bringen wird.

Kaputte Skripte werden die Funktionalität beeinträchtigen. Ich möchte niemanden, der kein Mitglied unseres Entwicklungsteams ist, in die Nähe unseres Codes lassen.

Oder ich höre Sie sagen

Was ist, wenn sie etwas „versehentlich“ ändern und zum alten Code zurückkehren müssen? Das muss ich immer wieder tun, bis sie es richtig machen.

Und was ist mit der Leistung der Website? Zu viele Tags werden die Leistung der Website verlangsamen und alles wird wieder beim Entwicklungsteam landen, um es zu beheben.

Dies sind alles berechtigte Einwände. Doch Google Tag Manager kümmert sich bereits um diese Bedenken. Wir werden sie unten behandeln.

Wie Google Tag Manager funktioniert

Was Sie als Minimum tun müssen, ist, sich für Google Tag Manager anzumelden und das GTM-Skript zu den Website-Seiten hinzuzufügen, auf denen Sie das Hinzufügen von Skripten ermöglichen möchten. Mein Vorschlag ist, GTM als Ihren einzigen Anlaufpunkt zu verwenden.

Zuerst erstellen Sie einen Container. Hier werden alle Tags eingefügt. Container können für Websites, iOS-Apps oder Android-Apps sein. Der Einfachheit halber beschränken wir unsere Beispiele auf Websites.

Sobald Sie den Container erstellt haben, erhalten Sie ein Skript, das Sie zu Ihrer Website hinzufügen müssen. Dies ist das *einzige* Skript, das Sie hinzufügen müssen. Der Rest der „Tags“ wird über diesen Tag zur Website hinzugefügt.

Sobald Sie diesen Tag hinzugefügt haben, können Sie jetzt Ihre Tags zur Website hinzufügen.

Es gibt etwa 20 integrierte Tags, die Sie über die GTM-Oberfläche hinzufügen können. Wenn das Produkt oder der Dienst, den Sie hinzufügen möchten, nicht enthalten ist, können Sie jeden beliebigen benutzerdefinierten Tag hinzufügen. Versuchen wir Google Analytics als unseren ersten Tag.

Integrierte Tags für verschiedene Dienste ermöglichen Anpassungen, wie sie für den jeweiligen Dienst erforderlich sind.

Wenn wir einen anderen Tag hinzufügen würden, würden Sie eine andere Reihe von Anpassungen sehen. Alles, was im nativen Skript angepasst werden kann, kann über den Google Tag Manager erfolgen. Das Folgende ist ein Beispiel für das Hinzufügen eines Google Adwords-Tags.

Sobald Sie den Tag nach Ihren Wünschen konfiguriert haben, können Sie festlegen, unter welchen Umständen der Tag ausgelöst wird („feuern“, d. h. einbezogen/verwendet wird). Sie können verschiedene Tags basierend auf unterschiedlichen Bedingungen oder verschiedenen Abschnitten Ihrer Website auslösen. Zum Beispiel können Sie einen bestimmten Tag für die Corporate-Seite Ihrer Website haben, verschiedene Tags für Vertriebs-Landingpages und wieder andere Tags für Dokumentations- und Supportseiten. Diese können sogar von verschiedenen Teams innerhalb des Unternehmens verwaltet werden.

Beginnen Sie langsam, die Vorteile der Verwendung des Google Tag Manager zu erkennen?

Selbst wenn Sie als Entwickler das Hinzufügen der Skripte übernehmen, können Sie zu schätzen wissen, dass Sie nicht die serverseitige Programmierung durchführen müssen, die erforderlich ist, um den Tag unter verschiedenen Szenarien auszulösen. Alles kann über die GTM-Oberfläche erfolgen.

Die Menge der verfügbaren Bedingungen, unter denen der Tag ausgelöst werden kann, reicht aus, um alle Arten komplexer Szenarien zu bewältigen, die Ihre Teams möglicherweise verlangen. Wir halten es vorerst einfach und lösen den Google Analytics-Tag unter „Alle Seiten“ aus.

Wir können den Tag jetzt zur Website pushen, oder? Sie können, aber Sie können auch zuerst Schutzmaßnahmen ergreifen.

Neben der sofortigen Veröffentlichung ermöglicht Ihnen Google Tag Manager Folgendes:

  1. Vorschau und Debugging – dies prüft den Tag und die Skripte, um sicherzustellen, dass die Skripte fehlerfrei sind.
  2. Version erstellen – da die Skripte anfällig für mehrere Iterationen sind und einige davon möglicherweise zurückgesetzt werden müssen, können Sie eine Version des aktuellen Tags erstellen. Auf diese Weise können Sie bei Problemen zu einer früheren funktionierenden Version zurückkehren. Dies kann viele Kopfschmerzen, kaputte Websites, panische Administratoren und viele frustrierte Personen verhindern.
Hier haben wir einen fehlerhaften Tag verwendet, um Ihnen zu zeigen, wie GTM Sie stoppt, wenn es einen Fehler im Skript erkennt.

Es gibt auch eine Vorschau-Funktion, mit der Sie sehen können, wie die aktuelle Reihe von Tags auf Ihrer aktuellen Website aussehen wird. Wenn Sie die Website, auf der der Tag bereitgestellt werden soll, vom selben Browser aus besuchen, von dem aus Sie die Änderungen in Google Tag Manager vornehmen, sehen Sie eine Vorschau, wie das bereitgestellte Skript aussehen wird.

Mit „Vorschau teilen“ können Sie auch eine URL senden, die tatsächlich dieselbe Vorschau enthält, damit Sie sie mit Ihren Kollegen zur Genehmigung teilen können.

Sobald Sie mit den Änderungen zufrieden sind, können Sie Ihren neuen Tag auf der Live-Website veröffentlichen.

Das war's! Ihr erster Tag wird nun in Ihren Container (in unserem Fall Website) hochgeladen.

Erweiterte Nutzung von Google Tag Manager

Die Vorteile dieser Vorgehensweise gegenüber dem direkten Eingriff in den Code jedes Mal sollten aus dem obigen Beispiel ersichtlich sein.

Aber graben wir ein wenig tiefer.

Bei der Erstellung des obigen Beispiels haben wir kurz gezeigt, dass Sie Trigger verwenden können, um zu entscheiden, wann das Skript ausgelöst werden soll oder nicht. Einige unserer Skripte müssen wahrscheinlich auf jeder Seite angezeigt werden, aber wahrscheinlich nicht alle. Wenn Sie alle auf jeder Seite abladen, kann dies zu Leistungsproblemen führen.

Kurzer Einschub: Wir haben Beispiele für Skripte gesehen, die bis zu 500 KB groß sind, was überwältigend ist. Wir werden Sie nicht namentlich nennen – auch wenn Sie ein großes Unternehmen sind, das es besser wissen sollte. Wenn Sie in der Skript-Branche tätig sind, tun Sie allen einen Gefallen, wenn Sie sie schlank und straff halten. Hinweis: Nehmen Sie nicht Ihre gesamte Funktionalität in das Skript auf, unabhängig davon, ob ich sie aktiviert habe oder nicht.

Verwendung von Triggern zum Auslösen von Skripten

Nehmen wir an, Sie möchten ein bestimmtes Ereignis auslösen, ein Tracking-Pixel einfügen oder Besuchern, die konvertiert haben, eine Kundenumfrage anzeigen. Nehmen wir an, am Ende Ihres Verkaufsprozesses leiten Sie Ihre Kunden auf eine Dankesseite weiter. Bei der Einstellung des Triggers können wir auswählen, was den Trigger auslöst (und damit das Laden des Skripts).

Lassen Sie uns eine Google-Kundenumfrage erstellen, unsere Website-ID eingeben und dann „Einige Seiten“ anstelle des Triggers „Alle Seiten“ wählen. Sobald wir dies tun, wird uns eine „Seiten auswählen“-Benutzeroberfläche präsentiert, mit der wir die Trigger-Bedingungen definieren können.

Wir werden eine Regex verwenden, um die URL unserer Dankesseite abzugleichen, aber es gibt viele andere Bedingungen, die Sie verwenden können. Beachten Sie, dass Sie neben einer Regex auch CSS-Selektoren verwenden können. Sehen Sie sich die vollständige Dokumentation der Google Tag Manager-Trigger an.

Wie Sie sehen können, wird unser Tag nun nur noch ausgefüllt, wenn eine Dankesseite angezeigt wird. Sie können viel spezifischer als Seiten werden. Unten sind die Möglichkeiten, die Sie in Bezug auf Trigger verwenden können

  • Klicks – dies ermöglicht Ihnen, einen Tag auszulösen, wenn der Benutzer auf einen Link oder ein Element der Seite klickt
  • Formularübermittlung – dies löst den Tag aus, wenn Ihr Besucher ein Formular übermittelt hat
  • Verlaufänderung – wenn sich die URL ändert oder wenn Sie einen virtuellen Seitenaufruf verfolgen müssen, z. B. beim Auslösen von Tags in Ajax-Anwendungen
  • JavaScript-Fehler – dies wird ausgelöst, wenn ein nicht abgefangener JavaScript-Fehler auftritt
  • Timer – ermöglicht es Ihnen, Ereignisse basierend auf einem bestimmten Zeitintervall zu senden, um eine gewünschte Häufigkeit zu erreichen
  • Benutzerdefinierte Ereignisse – Sie können die GTM-Daten-Schicht verwenden, um programmgesteuert ein Ereignis auszulösen

Verwendung von Google Tag Manager-Variablen

Wie bei jedem Dienst, der sich als flexibel und anpassbar rühmt, unterstützt GTM die Verwendung von Variablen. Wie bei normalen Codevariablen ist dies einfach ein Wert, der zur Laufzeit befüllt oder definiert wird.

In Tags können Sie Variablen verwenden, um Dinge wie Transaktionscodes zu definieren. Alles von der ID des gekauften Produkts bis zum Benutzernamen, der E-Mail oder anderen Benutzerdaten. Wir geben ein kurzes Beispiel, wie transaktionale Daten in einem realen Szenario als Variable verwendet werden.

Variablen können auch in Triggern verwendet werden, um beispielsweise die URL der Seite zu definieren, auf der ein Seitenaufruf-Trigger-Ereignis ausgelöst werden soll. Nehmen wir an, wir wollen den Umsatz steigern, indem wir einen Aktionsrabatt für diejenigen anbieten, die mehr als 100 US-Dollar ausgeben. Für Kunden, die bereits 100 US-Dollar ausgegeben haben, ist der Versand ihrer nächsten Bestellung kostenlos.

Unser Plan ist es, eine Adwords Remarketing-Kampagne speziell für die Kunden auszulösen, von denen wir wissen, dass sie bereits 100 US-Dollar ausgegeben haben. Wir werden den Remarketing-Code nur auslösen, wenn der Transaktionswert des Warenkorbs mehr als 100 US-Dollar beträgt. Wir können eine GTM-Variable definieren, die den Transaktionsbetrag aus einer JavaScript-Variable liest, die den Wert auf der Seite enthält.

Wenn die Seite geladen wird, wird die GTM-Variable ausgewertet und ausgeführt. Sie passt zum Trigger nur, wenn der Transaktionsbetrag mehr als 100 US-Dollar beträgt, und injiziert dann Ihren Remarketing-Tag.

Dies ist nur ein Szenario, in dem Variablen und Trigger kreativ eingesetzt werden können. Wir überlassen es Ihnen, dieses Denken auf die Bedürfnisse Ihres Unternehmens anzuwenden.

Abschließende Gedanken

In diesem Beitrag haben wir versucht, eine Reihe von Anwendungsfällen von Google Tag Manager hervorzuheben. Meiner Meinung nach gibt es erhebliche Vorteile bei der Verwendung von GTM.

Wir haben gesehen, dass es für einen Benutzer schwierig ist, die Funktionalität der Website zu „brechen“, wenn neue Tags eingeführt werden. Die Vorschau- und Debugging-Funktionen heben potenzielle Probleme hervor, bevor sie live gehen. Selbst wenn problematische Skripte live gehen, ist es einfach, zu früheren Versionen zurückzukehren.

Obwohl die Leistung ein potenzielles Problem sein könnte, glauben wir, dass, wenn das digitale Team von einem Entwickler unterstützt wird, Trigger verwendet werden können, um sicherzustellen, dass Leistungseinbußen nur dort auftreten, wo sie notwendig sind. Schließlich sind einige Skripte notwendig!