Error-Handling bei Javascript Code im GTM - Best Practices

Wie kann ich ein nachhaltiges und praktikables Error-Handling implementieren?

In diesem Artikel präsentiere ich bewährte Praktiken, um Störungen zu vermeiden und die Fehleranfälligkeit Ihrer Tracking-Skripte zu minimieren.

Do Not Repeat Yourself (DRY)

Das DRY-Prinzip ist nicht nur eine abstrakte Regel, sondern eine bewährte Methode, um Code im Allgemeinen weniger fehleranfällig zu gestalten. Konkret besagt das Prinzip, dass man Code nicht wiederholen, sondern stattdessen anhand einer zentralen Funktion referenzieren und ausführen soll. Das soll gewährleisten, dass Konfigurationen an einer zentralen Stelle erfolgen können und dadurch die Wartbarkeit deutlich gesteigert wird.

Auch im GTM gibt es die Möglichkeit, Custom Javascript Funktionen zu definieren, die man später in anderen Custom Javascript Funktionen aufruft. Das funktioniert mithilfe sogenannter Curry-Functions. Gemeint sind hier Funktionen, die im return Statement wieder eine Funktion ausgeben:

Diese Funktion kann anschließend in anderen Custom Javascript Funktionen aufgerufen werden, indem man die Variable wie üblich referenziert und mit runden Klammern als Funktion ausführt:

Näheres zu dieser Technik und auch weiteren Techniken für ein effizientes und schlankes GTM Setup, habe ich in diesem Blogartikel ausgeführt.

Errors abfangen mit try … catch statements

Auftretende Javascript Fehler können die Ausführung eines kompletten Code Blocks unterbinden. Da man das in den seltensten Fällen möchte, “catcht” man die Fehler und gewährleistet dadurch, dass der restliche Code weiterlaufen kann.

Der GTM selbst hat Mechanismen dafür, Fehler von Custom Javascript Variablen durch try-catch abzufangen, damit lediglich der Code der Variable vom Fehler betroffen ist und das restliche Skript weiterhin ausgeführt wird. Fehler in Custom Javascript Variablen betreffen dadurch erstmal nur die Variable selbst. Vorsicht ist allerdings bei Javascript in Custom HTML Tags geboten! Diese werden nicht automatisch per try-catch abgefangen! Es kann hier daher zu weitreichenden Defekten führen, wenn potentielle Fehler nicht gehändelt werden. Ein try-catch statement umgibt den ausführenden Code im Try-Block. Tritt hier ein Fehler auf, wird der Code innerhalb des Catch-Blocks ausgeführt und anschließend das restliche Skript. Folgendermaßen sieht das innerhalb eines Custom HTML Tags aus:

Auch in Custom Javascript Variablen ist das nicht nur empfehlenswert, sondern sollte definitiv noch um eine Komponente erweitert werden, die nicht bereits im GTM-Code implementiert ist: nämlich das Loggen oder Tracken des Fehlers.

Das erfolgt naturgemäß im Catch-Block. Achten Sie hierbei auf das “error” Argument, das im Catch-Statement übergeben wird. Dieses stellt das Error-Event dar und macht die Fehlermeldung greifbar. Diese kann und sollte man mindestens in der Konsole ausgeben:

Bisher gewährleisten wir zwei Dinge:

Ein Javascript-Fehler führt nicht zur Unterbrechung des gesamten Skripts, was die komplette Funktionalität einer Webseite oder Applikation gefährdet.
Das Ausgeben des Fehlers in der Konsole gibt uns zumindest die Chance, den Fehler zu erkennen und ihn danach zu beheben.

Den zweiten Punkt kann man allerdings noch weiter ausbauen und die Fehler systematisch reporten. Das gelingt beispielsweise durch einen Datalayer-Push, auf Basis dessen man ein Tag im GTM implementiert:

Das kann selbstverständlich beliebig erweitert werden mit nützlichen Informationen zur Identifizierung des Fehlers. Beispielsweise hilft auch der Name des Custom-HTML- oder Custom-Javascript-Elements sehr dabei, Fehler schnell und effizient auszumachen.

Fazit

Die effektive Organisation und Strukturierung des Codes im Google Tag Manager (GTM) spielt eine entscheidende Rolle für ein robustes Error-Handling. Die klare und modulare Code-Struktur verbessert nicht nur die Lesbarkeit, sondern erleichtert auch die Wartbarkeit.

Das “Do Not Repeat Yourself” (DRY)-Prinzip stellt sicher, dass Code weniger fehleranfällig wird. Im GTM können Curry-Functions verwendet werden, um zentrale Funktionen zu erstellen, die in verschiedenen Custom-Javascript-Funktionen aufgerufen werden können. Dies ermöglicht nicht nur eine effiziente Code-Wiederverwendung, sondern steigert auch die Wartbarkeit, indem Konfigurationen an einer zentralen Stelle erfolgen.

Beim Umgang mit JavaScript-Fehlern im GTM ist die Anwendung von try…catch-Statements entscheidend. Diese Mechanismen ermöglichen das Abfangen von Fehlern, um sicherzustellen, dass der restliche Code weiterhin ausgeführt wird. Ein systematisches Handling von Fehlern durch Logging oder Tracking verbessert hierbei die Fehlererkennung und -behebung.

Error-Handling bei Javascript Code im GTM - Best Practices

Management Summary

Wie kann ich ein nachhaltiges und praktikables Error-Handling implementieren?

Do Not Repeat Yourself (DRY)

Errors abfangen mit try … catch statements

Fazit

Gerne stehen wir für die Realisierung von komplexen Tracking-Strukturen zur Verfügung. Kontaktieren Sie uns: kontakt@e-dialog.group

Weitere Themen

sGTM & Telefontracking – Übergabe der First Person ID (FPID) an Matelso

Console Log Like A Pro im GTM

Effektive GTM-Nutzung mit Regex: So optimieren Sie Ihre Tracking-Implementierung!

Debugging Consent Mode in Google Tag Manager

Debugging Server Side Google Tag Manager

sGTM Migrator – Kann er das was er verspricht?

Conversions serverseitig erfassen – Ein rundum Blick

Die Macht der Lookup Tabellen im Google Tag Manager

GTM Advanced: Techniken für die Vereinfachung von Tracking Setups

Techniken für ein effizientes Tracking-Setup – Leitfaden

Tipps & Tricks bei GTM Versionskonflikten

Traffic Spitzen und Server Side GTM

Warum sollte ich ein Tag Management System nutzen?

Safari ITP 2.1: Wie beeinflusst das mein Tracking?

Ausschluss von URL Parametern vor der Datenerfassung in Google Analytics

ITP: Conversions unabhängig vom Browser richtig messen

Google Firebase Analytics » So funktioniert App Tracking NEU

Welche Reports und Insights bringt App Tracking mit Google Analytics?

App Tracking mit Google Analytics: Wie geht das?