Alle akzeptieren. Seitenaufruf. Cookies und localStorage löschen. Nur eine Kategorie akzeptieren. Seitenaufruf. Cookies und localStorage löschen. Alle ablehnen. Seitenaufruf. Cookies und localStorage löschen… und so weiter. Bis alles funktioniert.
Wer (gewissenhaft) Consent Banner einbindet, kennt diese Endlosschleifen in denen das Tracking-Setup in verschiedensten Szenarien auf seine korrekte Funktionalität geprüft werden muss. Nur dadurch wird am Ende sichergestellt, dass es keine Fälle gibt bei denen Cookies gesetzt werden obwohl keine Zustimmung vorliegt oder aber Daten nicht erhoben werden, obwohl man eigentlich dürfte.
Ich hatte mich gefragt, wie man sich die Arbeit hier erleichtern kann. An dieser Stelle sollen zunächst die Erleichterungen beim Debuggen von Usercentrics Bannern dokumentiert werden.
Usercentrics Konsolenbefehle zur Steuerung des Banners
Um die Funktionen von Usercentrics zu testen, stellt der Anbieter eine API bereit, die das Leben eines Web-Analysten erheblich erleichtert. Diese findet sich unter https://usercentrics.com/docs/web/features/api/control-ui/.
Mit Hilfe der API lassen sich schnell Interaktionen simulieren oder die CMP zurücksetzen. Dazu öffnet man einfach die Entwickler Konsole im Browser (das funktioniert meistens mit F12) und gibt dann folgende Befehle ein:
-
UC_UI.showFirstLayer(): Zeigt den ersten Screen des Consent Banners an.
-
UC_UI.showSecondLayer(): Zeigt den zweiten Screen des Consent Banners an auf dem man einzelne Kategorien oder Services akzeptieren oder ablehnen kann.
-
UC_UI.acceptAllConsents(): Alles akzeptieren.
-
UC_UI.denyAllConsents(): Alles ablehnen.
-
UC_UI.clearStorage(): Cookies und localStorage löschen (dadurch werden vorangegangene Entscheidungen gelöscht, dies gleicht einem Reset der eigenen Einstellungen)
Eine Liste aller API-Befehle bekommt man, wenn man nur UC_UI eingibt und den Befehl mit der Enter-taste bestätigt:
Mit diesen Funktionen lässt sich ein Tracking-Setup wesentlich effizienter Debuggen, als wenn diverse Szenarien ständig neu zusammenklicken muss.
Mit Bookmarklets noch schneller werden
Nun kann man sich auch das wiederholende eintippen der Befehle in der Console ersparen, indem man Bookmarklets erstellt und dort die jeweiligen Befehle hinterlegt. Dann genügt ein Klick auf das Bookmarklet und Usercentrics zeigt den ersten Layer oder vergisst meine bisherige Identität. Bookmarketlets sind im Grunde Lesezeichen im Browser, die aber nicht wie üblich eine URL aufrufen, sondern JavaScript ausführen.
Um ein Bookmarklet anzulegen kann man beispielsweise mit einem Rechtsklick in die Lesezeichenliste die Option „Add page…“ öffnen. Alternativ zieht man sich einfach irgendeine Seite im Browser in die Lesezeichen und bearbeitet diese. Oder man ruft im Chrome Browser die URL „chrome://bookmarks/“ auf und fügt dort ein neues Lesezeichen hinzu. Ihr werdet euren Weg hier finden. 😉
Nun muss beim neuen Bookmarklet der folgende Code hinterlegt werden.
UC_UI.showFirstLayer()
javascript:(function(){try{UC_UI.showFirstLayer();}catch(e){console.error('Error calling UC_UI.showFirstLayer:',e);}})();
UC_UI.showSecondLayer()
javascript:(function(){try{UC_UI.showSecondLayer();}catch(e){console.error('Error calling UC_UI.showSecondLayer:',e);}})();
UC_UI.acceptAllConsents()
javascript:(function(){try{UC_UI.acceptAllConsents();}catch(e){console.error('Error calling UC_UI.acceptAllConsents:',e);}})();
UC_UI.denyAllConsents()
javascript:(function(){try{UC_UI.denyAllConsents();}catch(e){console.error('Error calling UC_UI.denyAllConsents:',e);}})();
UC_UI.clearStorage()
javascript:(function(){try{UC_UI.clearStorage();}catch(e){console.error('Error calling UC_UI.clearStorage:',e);}})();
Wenn man sich dann den einmaligen Aufwand macht und alle Bookmarklets anlegt, dann hat man die perfekten Helfer zum Debugging der Usercentrics Banner direkt in der Lesezeichenliste.
Wenn man nun noch einen Schritt weiter gehen möchte, kann man sich diese Bookmarks auch noch auf Shortcuts legen und dann kommt man ganz ohne Maus-Klicks hin. 😉
So! Turbo fürs Debuggen von Usercentrics enabled! 🙂