Console Log Like A Pro im GTM

Dieser Blogartikel taucht ein in fortgeschrittene und effiziente Console Logging-Techniken im Google Tag Manager (GTM). Im “Best practices” Kapitel gehe ich auf eine smarte Strukturierung und Platzierung der Logs ein, wobei das Kapitel “Advanced Logging” die Logs selbst optimiert.

Best practices für das Console Logging im GTM

Strukturiertes Logging

Strukturiertes Logging im GTM bezieht sich auf die systematische Organisation von Console Log-Nachrichten, um eine klare und effiziente Verfolgbarkeit zu gewährleisten. Durch die gezielte Nutzung von aussagekräftigen Tags und Strukturen in den Log-Einträgen können die Ursachen von Problemen leichter identifiziert werden und den Debugging-Prozess beschleunigen.

Wichtig ist, dass an entscheidenden Code-Stellen, bspw. Zwischenwerten, die weiter prozessiert werden, eine Ausgabe erfolgt. Ebenfalls wichtig ist, dass dort geloggt wird, wo man Fehler erwartet. Bspw. im catch Block eines try-catch Statements. Abgefangene Fehler sollten stets geloggt und nicht ohne eine Möglichkeit der Fehlerentdeckung abgefangen werden.

Kontextuelle Informationen

Kontextuelles Logging bezieht sich darauf, zusätzliche Informationen in Log-Nachrichten einzufügen, die den Kontext der GTM-Konfiguration oder benutzerdefinierter Funktionen klarer darstellen. Dies kann die Einbindung von relevanten Variablenwerten, Zuständen von Bedingungen oder spezifischen Informationen aus der GTM-Konfiguration umfassen. Das Ziel ist es, Log-Nachrichten nicht nur informativer zu gestalten, sondern auch mehr Einblicke in den Zustand und die Entscheidungen innerhalb des GTM-Workflows zu gewähren.

Konsistentes Logging

Ein konsistentes Logging-Format ist sehr hilfreich für eine effektive Fehlerdiagnose und das Verständnis des Code-Flusses im GTM. Durch die Einhaltung eines einheitlichen Stils in den Log-Nachrichten wird die Lesbarkeit verbessert und die Zusammenarbeit im Team erleichtert.

Praktische Empfehlungen:

Einheitliche Struktur: Definiere eine klare Struktur für Log-Nachrichten, die über alle GTM-Tags und benutzerdefinierten Funktionen hinweg konsistent bleibt. Zum Beispiel:

				
					
console.log('[Kategorie] - Nachricht: ', message);

Verwendung von Platzhaltern: Nutze Platzhalter für dynamische Inhalte, um die Flexibilität der Log-Nachrichten zu erhöhen. Zum Beispiel:

				
					
console.log('Verarbeite URL: %s', url);

Bedingte Console Logging Ausgaben

Bedingte Log-Nachrichten ermöglichen eine präzise Ausgabe von Log-Einträgen basierend auf vordefinierten Kriterien. Diese Technik dient dazu, den Debugging-Prozess zu optimieren und die Fokussierung auf relevante Teile des Codes zu erleichtern, insbesondere in komplexen GTM-Konfigurationen. Ziel ist es, durch bspw. if-Abfragen die Logs auf bestimmte Fälle zu reduzieren, um in der Konsole nicht zu viele Nachrichten zu haben.

Fortgeschrittene Console Logging Techniken

Zeitstempel und Performance-Messungen

Die Integration von Zeitstempeln und Leistungsmessungen in Log-Nachrichten im Google Tag Manager (GTM) ermöglicht eine detaillierte Analyse von zeitkritischen Aspekten während der Entwicklung.

Praktische Anwendung anhand des Beispiels einer Variable, die URLs prozessiert:

				
					// Beispiel: Zeitstempel für den Start der Verarbeitung
console.log('Starte Verarbeitung um: ' + new Date().toLocaleTimeString()  + ", " + new Date().getMilliseconds() + "." + performance.now().toString().split(".")[1] + " ms");

try {
  // Kritischer Codeabschnitt
  processURL(url);

  // Weitere Verarbeitung oder Tags hier...

				
					  // Beispiel: Zeitstempel für den Abschluss der Verarbeitung
  console.log('Verarbeitung abgeschlossen um: ' + new Date().toLocaleTimeString()  + ", " + new Date().getMilliseconds() + "." + performance.now().toString().split(".")[1] + " ms");
} catch (error) {
  // Fehler abfangen und loggen
  console.error('Fehler bei der URL-Verarbeitung:', error, 'URL:', url);
} finally {
  // Beispiel: Zeitstempel für die finale Ausführung
  console.log('Abschluss der Ausführung um: ' + new Date().toLocaleTimeString()  + ", " + new Date().getMilliseconds() + "." + performance.now().toString().split(".")[1] + " ms");
}

Die Einbindung von Zeitstempeln ermöglicht eine genaue Überwachung der zeitlichen Abläufe im GTM-Code. Durch das Loggen von Zeitstempeln vor, während und nach kritischen Codeabschnitten erhalten Entwickler einen klaren Überblick über die Performance und können potenzielle Engpässe identifizieren.

Die Verwendung von performance.now() bietet eine noch präzisere Messung der Zeitspannen:

				
					var startzeit = performance.now();

// Auszuführender Code

var endzeit = performance.now();
console.log('Zeitspanne:', endzeit - startzeit, 'Millisekunden');

Die Messung der Zeitspannen ermöglicht eine detaillierte Analyse von Performance-Engpässen und unterstützt Entwickler dabei, den GTM-Code zu optimieren.

Diese Technik ist besonders nützlich für das Debugging von Race Conditions, bei denen es zu Konflikten kommen kann. Durch präzise Zeitmessungen können potenzielle Engpässe identifiziert und die Ausführung von GTM-Elementen optimiert werden.

CSS-Formatierung von Console Logs

Die CSS-Formatierung von Console Logs im Google Tag Manager (GTM) wird durch das %c-Zeichen in der Log-Nachricht eingeleitet. Dieses Zeichen signalisiert dem console.log Befehl, dass im Anschluss an den Ausgabewert ein CSS-Formatstring folgt, der die Darstellung der Log-Nachricht beeinflusst.

Ein Beispiel:

				
					// Beispiel: CSS-Formatierung für eine hervorgehobene Erfolgsmeldung
console.log('%cErfolg: Transaktion abgeschlossen', 'color: green; font-weight: bold;');

In diesem Beispiel wird der Text „Erfolg: Transaktion abgeschlossen“ mit einem grünen Farbstil und fetter Schrift formatiert. Durch die gezielte Anwendung von CSS-Formatierung können wichtige Log-Nachrichten herausgehoben und visuell betont werden, was die Lesbarkeit und Verständlichkeit während der Fehlersuche im GTM erheblich verbessert.

Weitere Console-Funktionen

Neben der bekannten console.log-Funktion gibt es weitere nützliche Console-Funktionen wie console.dir und console.table. Diese erweiterten Funktionen ermöglichen eine detailliertere Inspektion von Objekten und eine übersichtliche Darstellung von Tabellendaten in der Konsole.

Praktische Anwendung von console.dir:

				
					// Beispiel: Verwendung von console.dir für eine detaillierte Anzeige von Objekten
const auto = { Marke: 'Volkswagen', Modell: 'Golf', Baujahr: 2022 };
console.dir(auto);

Die console.dir-Funktion ermöglicht eine ausführliche Darstellung von Objekten in der Konsole, wodurch alle Eigenschaften und verschachtelten Strukturen übersichtlich angezeigt werden:

				
					Object
  Baujahr: 2022
  Marke: "Volkswagen"
  Modell: "Golf"
  __proto__: Object

Praktische Anwendung von console.table:

				
					// Beispiel: Verwendung von console.table für tabellarische Darstellung von Daten
const benutzerdaten = { Name: 'Max Muster', Alter: 30, Stadt: 'Beispielstadt' };
console.table([benutzerdaten]);

Die console.table-Funktion eignet sich ideal für die übersichtliche Darstellung von Daten in tabellarischer Form. In diesem Beispiel werden die Benutzerdaten als Tabelle angezeigt, was vor allem bei der Arbeit mit großen Datensätzen oder Arrays die Lesbarkeit erheblich verbessert:

				
					┌────────────┬─────────────────┬─────────┬─────────────────┐
│ (index)    │  Name           │ Alter   │    Stadt        │
├────────────┼─────────────────┼─────────┼─────────────────┤
│    0       │ 'Max Muster'    │  30     │ 'Beispielstadt' │
└────────────┴─────────────────┴─────────┴─────────────────┘

Fazit

Durch die klare Strukturierung von Log-Nachrichten, die Integration von kontextuellen Informationen und die Anwendung konsistenter Logging-Formate wird der Debugging-Prozess optimiert. Fortgeschrittene Techniken wie bedingte Log-Nachrichten, Zeitstempel, Performance-Messungen sowie die Nutzung von console.dir und console.table eröffnen neue Möglichkeiten für eine präzise Fehleranalyse und -behebung.

Für maßgeschneiderte Tracking-Lösungen und Realisierung komplexer Tracking-Strukturen stehen wir gerne jederzeit zur Verfügung! Kontaktieren Sie uns: kontakt@e-dialog.group

Console Log Like A Pro im GTM

Management Summary

Best practices für das Console Logging im GTM

Strukturiertes Logging

Kontextuelle Informationen

Konsistentes Logging

Bedingte Console Logging Ausgaben

Fortgeschrittene Console Logging Techniken

Zeitstempel und Performance-Messungen

CSS-Formatierung von Console Logs

Weitere Console-Funktionen

Fazit

Für maßgeschneiderte Tracking-Lösungen und Realisierung komplexer Tracking-Strukturen stehen wir gerne jederzeit zur Verfügung! Kontaktieren Sie uns: kontakt@e-dialog.group

Weitere Themen

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

Error-Handling bei Javascript Code im GTM – Best Practices

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?