Für die Messung von individuellen Events auf Seiten ersparen die CSS-Selektoren den Eingriff in das HTML. Der Debug-Modus macht es einfach, die korrekte Wahl des Selektors zu überprüfen und so mögliche Fehler direkt zu ermitteln.
Wie du die gewählten CSS Selektoren schnell und einfach überprüfst, zeigen wir dir im Folgenden.
1. Öffne die Entwickler-Konsole deines Browsers mit F12 oder über die Einstellungen deines Browsers und klicke auf den Tab Console.
2. Aktiviere den Debug-Modus, indem du folgenden Befehl in die Console eingibst und mit Enter bestätigst:
_etracker.tools.enableDebug();_etracker.tools.enableDebugMode()
3. Lade im Anschluss die Seite neu.
4. Jetzt sind die Voraussetzungen geschaffen, um zu überprüfen, ob der CSS Selektor korrekt gewählt wurde. Gib hierzu folgenden Befehl in die Console ein:
_etracker.tools.checkCSSSelector('AUSGEWÄHLTER SELECTOR')
Der Befehl könnte beispielsweise so aussehen:
_etracker.tools.checkCSSSelector('body > div.page-wrap > footer > div > div.footer--columns.block-group > div.footer--column.column--hotline.is--first.block > div.column--content > p > a')
Die Antwort der Console lautet immer undefined.
Ist der der ausgewählte CSS Selektor korrekt, erscheint er automatisch im sichtbaren Bereich deiner Ansicht, ist rot umrandet und blinkt:
Ist der ausgewählte CSS Selektor nicht korrekt und wird nicht gefunden, erscheint die Meldung is not a valid selector in der Konsole:
In diesem Fall sollte ein anderer CSS Selektor ausgewählt und auf Richtigkeit überprüft werden.
Im Anschluss sollte der Debug-Modus durch das Löschen der Cookies oder durch den Befehl _etracker.tools.disableDebug();_etracker.tools.disableDebugMode() wieder deaktiviert werden.