dataLayer Proxy: So kannst Du Events ändern, bevor der Google Tag Manager sie verarbeitet

Hast Du jemals festgestellt, dass in Deinen dataLayer Events wichtige Informationen fehlen?
Etwas, das Du zwar weißt, aber keinen einfachen Zugriff auf den Code hast, der das Event an das dataLayer sendet?

Hier kommt ein dataLayer Proxy ins Spiel.
Er ermöglicht es Dir, Events zu ändern, bevor sie an das dataLayer gesendet und vom Google Tag Manager verarbeitet werden.

Die folgende DataLayerProxy JavaScript-Klasse ist eine einfache Möglichkeit, eine oder mehrere Änderungen hinzuzufügen.

Hier sind zwei Beispiele für Änderungen, die Du mit dem Proxy hinzufügen könntest:

const dLProxy = new DataLayerProxy();

// Diese Änderung fügt jedem Event eine eindeutige Kennung hinzu. 
// Wir verwenden die Funktion crypto.randomUUID(), um eine eindeutige ID für jedes Event zu generieren.
dLProxy.addEventModification(event => {
	event.event_id = crypto.randomUUID();
	return event;
});

// Diese Änderung fügt jedem Event einen Zeitstempel hinzu. 
// Wir verwenden die Funktion new Date().toISOString(), um das aktuelle Datum und die aktuelle Uhrzeit im ISO 8601-Format zu erhalten.
dLProxy.addEventModification(event => {
	event.timestamp = new Date().toISOString();
	return event;
});

Wie Du sowohl beim Überprüfen des dataLayer in der JS-Konsole Deines Browsers als auch im Vorschau-Modus des GTM sehen kannst, werden die Änderungen angewendet:

Alles, was Du vorher tun musst, ist den folgenden Code direkt nach Deinem Google Tag Manager Container-Snippet und vor jedem anderen Code, der Events an das dataLayer sendet, zu Deiner Website hinzuzufügen.

class DataLayerProxy {
	constructor() {
		this.dataLayer = window.dataLayer || [];
		this.modifications = [];

		const handler = {
			apply: (target, thisArg, argumentsList) => {
				for (let i = 0; i < argumentsList.length; i++) {
					// Überprüfen, ob es sich um ein reguläres dataLayer Event handelt
					if (typeof argumentsList[i] === 'object' && argumentsList[i] !== null && 'event' in argumentsList[i]) {
						this.modifications.forEach(modification => {
							argumentsList[i] = modification(argumentsList[i]);
						});
					}
					// Überprüfen, ob es sich um ein gtag Event handelt
					else if (typeof argumentsList[i] === 'object' && argumentsList[i].length > 2 && typeof argumentsList[i][2] === 'object') {
						this.modifications.forEach(modification => {
							argumentsList[i][2] = modification(argumentsList[i][2]);
						});
					}
					// Überprüfen, ob es sich um ein benutzerdefiniertes Template-Event handelt
					else if (typeof argumentsList[i] === 'object' && 'h' in argumentsList[i] && typeof argumentsList[i].h === 'object' && 'event' in argumentsList[i].h) {
						this.modifications.forEach(modification => {
							argumentsList[i].h = modification(argumentsList[i].h);
						});
					}
				}
				return target.apply(thisArg, argumentsList);
			}
		};

		this.dataLayer.push = new Proxy(this.dataLayer.push, handler);
	}

	addEventModification(modification) {
		this.modifications.push(modification);
	}
}

Eventquellen

Der Proxy unterstützt drei verschiedene Arten von Events, die an das dataLayer gesendet werden:

1. Reguläre dataLayer.push() Events, einschließlich mehrerer Events in einem Push.
2. gtag() Events
3. Events, die über ein benutzerdefiniertes Template über die createQueue(“dataLayer”) API gesendet werden

Verwendung als benutzerdefiniertes HTML-Tag

Auch wenn es nicht unmöglich ist, würde ich davon abraten, den Proxy als benutzerdefiniertes HTML-Tag im Google Tag Manager zu verwenden.
Der Proxy müsste nicht nur vor allen anderen Tags, sondern auch bevor jegliche dataLayer Events tatsächlich gesendet werden, geladen werden.
Auf vielen Websites werden Events viel früher gesendet, als das GTM-Container-Snippet fertig geladen ist und das benutzerdefinierte HTML-Tag ausgeführt wird. Diese frühen Events würden nicht vom Proxy geändert werden.

Falls Du dennoch darauf bestehst, verwende einen Transpiler wie Babel, um die Klasse in ES5 zu konvertieren, da GTM’s benutzerdefinierte HTML-Tags modernen JavaScript nicht unterstützen.

Sollte ich das verwenden?

Wenn Du Zugriff auf den Code und/oder Entwickler hast, die Events an das dataLayer senden, solltest Du wahrscheinlich diesen Code ändern, anstatt Events nachträglich wie hier zu ändern.
Aber wenn Du weißt, was Du tust und eine gute Umgehungslösung schätzt, dann nur zu.

Danke

Danke an Simo Ahava für seinen Input zu diesem Thema – wer hätte gedacht, wie viele Möglichkeiten es gibt, Dinge in das dataLayer zu senden?
Falls Du an Themen wie diesen interessiert bist, ziehe in Betracht, dem Measure Slack beizutreten, einer großartigen Community von Analytics-Profis.