Tag Manager Container tauschen mit Requestly. So geht’s

Als Web-Analyst stehe ich immer wieder vor der Herausforderung den Tag Manager Container auf einer produktiven Website auszutauschen. Etwa, um etwas zu testen. Natürlich gibt es dazu verschiedene GTM-Injektor-Plug-ins für den Chrome-Browser. Allerdings bin ich bei den meisten immer wieder auf Probleme gestoßen.

Deshalb stelle ich dir in diesem Tutorial ein Browser-Plug-in mit dem Namen Requestly vor, das ich verwende.

Ich zeige dir, wie du damit einen Tag Manager Container auf einer produktiven Website lokal auf deinem Rechner austauschen kannst.

Inhaltsverzeichnis

• Funktionen des Requestly Plug-Ins
• Requestly Plug-In installieren
• Tag-Manager Container mit Requestly austauschen
  • Regel, um einen clientseitigen Tag Manager Container zu tauschen
  • Regel, um einen clientseitigen Tag Manager Container zu tauschen, der von einem Tag Manager Server geladen wird
• Tausch des Tag-Manager-Containers testen
• Zusammenfassung

Was ist das Requestly Plug-In?

Requestly ist mehr als nur ein Tool zum Tauschen des Tag-Manager-Containers. Es ist Proxy-Plug-in für den Chrome-Browser, mit dem du alle Netzwerkanfragen einer geladenen Seite ändern oder sogar blockieren kannst

Einige Anwendungsfälle für Requestly sind:

• Den Tag-Manager Container auf deiner produktiven Website lokal zu tauschen, um Tests durchzuführen

• Antworten von API-Calls zu simulieren

• Netzwerk-Requests einer Website komplett zu blockieren

• Netzwerk-Requests einer Website auf eine andere Adresse umzuleiten

• JavaScript oder CSS-Dateien auf einer produktiven Website lokal am eigenen Rechner zu injizieren.

Requestly funktioniert mit Regelsätzen. Mit einer Regel legst du fest, was Requestly unter welchen Bedingungen machen soll. In diesem Requestly Tutorial sehen wir uns den Anwendungsfall zum Austauschen eines Tag-Manager-Containers an.

Requestly Plug-In installieren

Installiere bitte zunächst das Requestly Plug-in aus dem Chrome Web-Store in deinen Chrome-Browser. Die Basis-Nutzung des Plug-ins ist ohne Kreditkarte möglich und kostenlos. Mit der kostenlosen Basis-Variante kannst du 5 Regeln erstellen, wobei 3 dieser Regeln gleichzeitig aktiv sein können. Für das Tauschen eines Tag-Manager-Containers reicht das aus.

Mit 5 Regeln komme ich leider nicht aus, deshalb habe ich die Basic Version für 180 Dollar im Jahr abonniert. Bisher war das Tool jeden Cent wert und hat mir viel Arbeit erspart.

Etwa beim Aufnehmen meines Tag Manager Kurses für Anfänger oder meines Kurses für den serverseitigen Tag Manager, die du beide auf Udemy findest. Mit Requestly habe ich für die Aufnahmen der Kurse den produktiven Tag-Manager-Container einer meiner Webseiten einfach durch einen anderen ersetzt.

Nachdem du Requestly installiert hast, klicke im Plug-In Menü des Chrome-Browsers auf das Plug-in. Daraufhin öffnet sich ein Pop-up.

Requestly Pop-up

In diesem Pop-up kannst du mit dem Schalter Requestly running das Plug-in ein- oder ausschalten. Durch einen Klick auf die Schaltfläche Open App wird die Konfigurationsoberfläche geöffnet.

In der Liste darunter siehst du die angepinnten Regeln, die du somit mit einem Klick schnell ein- oder ausschalten kannst. Dazu später mehr.

Tag-Manager Container mit Requestly austauschen

Wenn ich in diesem Beitrag davon schreibe, einen Tag-Manager-Container auszutauschen, meine ich immer nur auf deinem lokalen Rechner. Du kannst dieses Tool nicht dafür verwenden, um einen Tag-Manager-Container für alle Besucher und Besucherinnen zu tauschen.

Clientseitigen Tag Manager Container tauschen

Ich gehe in diesem Tutorial davon aus, dass wir einen beliebigen Tag-Manager-Container, der von der Domain www.googletagmanager.com geladen wird, gegen einen anderen Container austauschen möchten.

Öffne dazu im ersten Schritt bitte die Requestly App, in dem du im Requestly Browser-Pop-up rechts oben auf Open App klickst.

Klicke dann in der Requestly App rechts oben auf New Rule.

Regel-Typen in Requestly

Daraufhin wird ein Menü mit verschiedenen Regelarten angezeigt. Um den Tag-Manager-Container zu tauschen, verwenden wir die Replace String Regel.

Nun wird der Editor für Regeln angezeigt.

Regel Editor in Requestly

Im oberen Bereich unter If Request legen wir die Bedingungen für die Regel fest. In unserem Fall soll die Regel angewandt werden, wenn die URL des Netzwerk-Requests (zum Laden des Tag-Manager-Containers) die Zeichenfolge “id=GTM-” gefolgt von Buchstaben oder Ziffern enthält, etwa id=GTM-1ABCDEFG.

Dafür habe ich mit den Optionen URL und Regex einen regulären Ausdruck angegeben, der für jede beliebige Tag-Manager-Container-ID funktioniert:

/id=GTM[A-Z0-9]+/i

Falls du mit regulären Ausdrücken bis jetzt nicht so vertraut bist, findest du ein Regex Tutorial in meinem Blog.

Im Bereich Replace geben wir jetzt den Text des Netzwerk-Requests an, den wir ersetzen möchten. Das ist der URL-Parameter *id= *gefolgt von der ID des Tag-Manager-Containers, der aktuell auf der Seite eingebaut ist.

Rechts im Bereich With geben wir die neue ID des Tag-Manager-Containers zusammen mit dem URL-Parameter id= an.

Soll die Regel nur auf einer bestimmten Website angewendet werden, klicke bitte rechts auf Filters.

Dadurch erscheint ein Pop-up, in dem du den Hostnamen der Website angeben kannst, auf der die Regel angewandt werden soll und dass sie nur beim Laden von JavaScript angewendet werden soll.

Zusätzliche Filter in Requestly

Klicke danach bitte im Pop-up rechts unten auf Close.

Ganz oben hat Requestly der neuen Regel einen temporären Namen gegeben. Er beginnt mit replace-. Klicke bitte auf das Bleistift-Symbol rechts daneben, um der Regel einen neuen Namen zu geben und sie dann durch einen Klick rechts oben auf Save Rule zu speichern.

Nachdem du die Regel gespeichert hast, stelle bitte sicher, dass sie aktiviert ist. Gehe dazu bitte in den Bereich HTTP Rules und schiebe den Schalter unter Status für die entsprechende Regel nach rechts.

Regelübersicht in Requestly

Mit der Pin-Option am Anfang jeder Zeile kannst du Regeln festlegen, die im Browser-Pop-up angezeigt werden sollen. Das waren die Regeln, die du im Screenshot am Anfang des Artikels gesehen hast.

Regel, um einen clientseitigen Tag Manager Container zu tauschen, der von einem Tag Manager Server geladen wird

Das Austauschen eines Tag-Manager-Containers, der von einem serverseitigen Tag-Manager-Container geladen wird, funktioniert fast identisch.

Dazu brauchen wir allerdings zwei Regeln. Eine zweite Regel erstellst du, indem du unterhalb einer Regel auf Add New Rule klickst.

Regeln um einen Container von einem sGTM zu tauschen

Die erste Regel ist dabei genau so aufgebaut wie vorhin.

Da der clientseitige Tag Manager Container aber in der Regel von der Domain des serverseitigen Tag-Managers geladen wird, müssen wir in diesem Fall mit der zweiten Regel auch die Domain austauschen.

Die Regel dafür lautet:

• Wenn URL contains (enthält) Domain des serverseitigen Tag-Managers
• Ersetze die Domain des serverseitigen Tag-Managers durch die URL von der standardmäßig ein Tag-Manager Container geladen wird. (www.googletagmanager.com)

Verwende für die Regel bitte stets URL und nicht Host. Aufgrund von Änderungen im Chrome-Browser funktionieren Host-Regeln nicht immer. In so einem Fall bekommst du beim Speichern der Regel eine Fehlermeldung in Requestly.

Tausch des Tag-Manager-Containers testen

Um die Website mit dem neuen und getauschten Tag-Manager-Container aufzurufen, prüfe bitte zunächst, ob Requestly selbst und die entsprechende Regel aktiv sind.

Requestly-Regel aktivieren

Rufe dann bitte den Tag-Manager-Container auf, den du in der Website durch das Tauschen testen möchtest. Starte dann den Vorschau-Modus des Containers.

Sobald sich die Website in der Vorschau-Ansicht öffnet, siehst du rechts oben ein kleines Pop-up, das dir sagt, dass eine Regel von Requestly ausgeführt wird.

Requestly Pop-up, wenn eine Regel angewandt wird.

Wechselst du nun in das Tab des Tag-Assistant solltest du statt des in der Website verbauten Containers die ID des Containers sehen, den du durch Tausch eingefügt hast.

Getauschter Tag-Manager-Container im Tag-Assistant

Zusammenfassung

Requestly ist ein mächtiges Tool für Web-Analysten und Web-Entwickler. Du kannst damit Netzwerk-Requests lokal auf deinem Rechner verändern und so etwa einen Tag-Manager-Container austauschen. Außerdem kannst du Requests ganz blockieren oder sogar JavaScript oder CSS-Dateien lokal auf deinem Rechner in jede Website injizieren.

Für eine Handvoll Regeln ist Requestly kostenlos. Brauchst du mehr als eine Handvoll Regeln, bei denen auch mehrere Regeln gleichzeitig aktiv sein können, benötigst du ein Jahresabo. Und das zahlt sich aus.