Einführung in den neuen Vorschaumodus des Google Tag Managers

Ich habe am Freitag (16.10.2020) ein paar Änderungen am Google Tag Manager (GTM) für einen Kunden vorgenommen und wollte diese im Vorschaumodus testen. Dabei passierte etwas ungewöhnliches und mir unbekanntes, ein neuer Tab öffnete sich im Browser und ich wurde nach einer URL gefragt. Nach anfänglicher Verwirrung, dem mehrmaligen Öffnen und Schließen des Tabs und dem Gedanken, ob ich nicht einfach die normale Vorschau bekommen kann, habe ich realisiert, dass das der neue Vorschaumodus von GTM ist.

Dieser Blogeintrag richtet sich an Personen, die regelmäßig mit dem Google Tag Manager arbeiten und sich einen Überblick über den neuen Vorschaumodus verschaffen wollen.

Die zugehörige URL gibt dort schon einmal interessante erste Einblicke. Nach dem Starten der Vorschau wird man zur URL “tagassistant.google.com” weitergeleitet. Der erfahrene GTM-Entwickler kennt den Begriff Tag Assistant vermutlich durch die gleichnamige Browser Erweiterung. Auf die Erweiterung komme ich später noch einmal zu sprechen, denn Sie scheint eine wichtige(-re) Rolle zu spielen.

Nach der Weiterleitung zu “tagassistant.google.com” muss die URL der Website, welche ich testen möchte, eingefügt werden:

Image for post
Image for post
Bild 1: Startseite von “tagassistant.google.com”

Hierbei kann ausgewählt werden, ob der URL im Vorschaumodus ein Query Parameter hinzugefügt werden soll (?gtm_debug=x). Damit können dann zum Beispiel in Google Analytics Daten herausgefiltert werden, die von einer URL mit diesem Parameter kommen. Nach der Auswahl und Bestätigung öffnet sich ein weiterer Tab mit der angegebenen Webseite. Gleichzeitig öffnet sich im vorherigen Tab ein Fenster, welches auf den ersten Blick sehr an die alte Vorschau mit ähnlichen Informationen erinnert. Tatsächlich sind viele Features im Vorschautab gleich geblieben, aber es kamen ein paar kleine und nützliche Features hinzu. Besonders ein Feature möchte hier hervorheben, zu dem komme ich aber erst zum Schluss.

Oben erscheint der Name der Property und die ID des Containers, links ist die Auflistung der auftretenden Events und auf der rechten Seite gibt es nähere Informationen zu jedem einzelnen Event (siehe Bild 2). So weit so normal.

Image for post
Image for post
Bild 2: Der neue Vorschaumodus

Zuallererst empfinde ich es als Vorteil, dass es jetzt ein eigenständiger Tab ist, sodass die Informationen, anders als davor, auf einer kompletten Seite angezeigt werden. Meistens bediene ich auf einem Bildschirm die Seite wobei auf dem zweiten Bildschirm die Informationen der Vorschau sichtbar sind. Das ermöglicht ein sehr schnelles und komfortables Debugging.

Der Aufbau der rechten Seite des Vorschau Tabs hat sich ein wenig verändert, bzw. verbessert. Oben steht zuerst noch einmal der Name des ausgewählten Events und darunter kommt die Sektion “API Call” die visualisiert, welcher DataLayer Push diesen Eintrag ausgelöst hat. Danach kommen die geläufigen Informationen mit ähnlichem Aufbau, die auch schon in der alten Vorschau ersichtlich waren.

Kommen wir noch einmal kurz zu der Browser Erweiterung Tag Assistant. Diese arbeitet mit dem neuen Vorschaumodus zusammen. Ist die Erweiterung nicht aktiviert, wird nach dem Start der Vorschau die zu testende Seite in einem neuen Pop-Up Fenster geöffnet und nicht in einem neuen Tab. Persönlich gefällt mir die Variante des zusätzlichen Tabs besser. Dann kann ich zum Beispiel die URL der Testseite komfortabel ändern oder den Tab in verschiedene Browserfenster schieben. Es gibt noch ein paar weitere Vorteile, die hier nachgelesen werden können.

Ein weiterer Vorteil, wenn man die Erweiterung aktiviert, hängt auch gleichzeitig mit dem meiner Meinung nach besten neuen Feature der neuen Vorschau zusammen, welches schon weiter oben angekündigt wurde. Das gesamte Verhalten von Page Reloads und der Verwaltung von mehreren Seiten hat sich extrem verbessert. Erstens bekommt der Tab mit der Testseite ein zufälliges Symbol im Seitentitel, dieses Symbol erscheint dann auch in der Auflistung der Events auf der Vorschauseite. Somit kann schnell zugeordnet werden, welche Seite im Browser momentan im Debug Modus läuft. Öffnet man von der Testseite eine neue Seite (in der gleichen Domain) in einem neuen Tab, wird der neuen Seite ein neues Symbol, sowohl im Seitentitel als auch im GTM zugewiesen. Damit fließen die Informationen beider Seiten in ein Vorschaufenster und die Informationen beider Seiten können einfach anhand der Symbole unterschieden werden (siehe Bild 3).

Image for post
Image for post
Bild 3: Liste der Events in unterschiedlichen Vorschaufenstern

Weiterhin werden bei einem Besuch einer neuen Seite nicht die vorherigen Tracking Ergebnisse verworfen, sondern sie bleiben erhalten. Somit kann ich zum Beispiel bei einem Product Click das Verhalten des Events einfach nach dem Erreichen der Produktdetailseite anschauen (siehe Bild 2). Vorher war das auch möglich, aber längst nicht so elegant und einfach (Produkt in einem neuen Tab öffnen, DataLayer Pushes abspeichern, Tag Assistant Erweiterung nutzen, …). Nach jedem Pageload wird auf der linken Seite der Seitentitel und das Symbol angezeigt und darunter die geworfenen Events auf der Seite untereinander aufgelistet. Die Informationen zu einer Seite können auch zusammengeklappt werden, um Informationen von unwichtigen Seiten auszublenden (siehe Bild 3).

Der neue Modus hat aber auch Schwächen. Das Aktualisieren der laufenden Vorschau mit den neuen Änderungen im GTM ist nicht mehr so elegant möglich. Man muss den Browser Tab mit den Vorschau Informationen schließen und im GTM erneut auf Vorschau klicken, erst dann werden die Änderungen übernommen. Weiterhin funktioniert ein neues Feature des GTMs meiner Meinung nach noch nicht wie beabsichtigt. Wenn ich eine Webseite öffne auf deren GTM-Implementierung ich Zugriff habe, dann wird in der unteren rechten Ecke ein kleines Pop-Up Fenster angezeigt, dass ich diese Seite auch im Vorschaumodus öffnen kann (siehe Bild 4).

Image for post
Image for post
Bild 4: Pop-Up für den möglichen Vorschaumodus

Klicke ich auf den angezeigten Button zum Start der Vorschau, kann der Tag Assistant den Container von der Seite nicht automatisch zuordnen und demzufolge die Vorschau nicht starten. Daraufhin werde ich wieder zur Seite mit der URL “tagassistant.google.com” weitergeleitet.Wenn ich dann den gewollten Container ausgewählt habe, öffnet sich wiederum ein neuer Tab mit der Seite im Vorschaumodus.

Zusammenfassend lag der Gedanke bei dem neuen Vorschaumodus meiner Meinung nach dabei, den alten Modus mit der Chrome Erweiterung Tag Assistant zu verbinden. Dass z.B. die Events bei einem Seitenwechsel bestehen bleiben, fehlte bei der alten Vorschau, war aber bei der Erweiterung vorhanden, jedoch nicht so elegant aufbereitet.

Mein erster Eindruck des neuen Modus ist positiv. Besonders der Verbleib der Tracking-Informationen nach einem Page Reload und der separate Tab für den Vorschaumodus sind zwei neue Funktionen, die ich als sehr nützlich empfinde. Ich bin ebenfalls gespannt, welche Änderungen Google am neuen Tag Assistant in der Zukunft vornimmt, denn der Modus ist noch in der Beta Version.

By Alexander Junke.

Written by

Agency of Business Intelligence specialists, based in Coburg, DE. Building modern, customized and cloud-based data warehouse solutions. https://www.datadice.io/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store