Feature request: add support for "Usercentrics Consent Management"

[mu88]

Hi,

First of all, thank you for your amazing work - I'd saved me from a lot of hassle 👏🏻

I'm regularly using the music live-stream from https://www.antenne.de/ which seems to use a not (yet) supported CMP called Usercentrics Consent Management:

Could this one be supported as well?

Thx!

[webracer999]

I found another site which also uses Usercentrics. I tried to create my own rule, but they use a apart-HTML-tag which causes a shadow DOM. As a result, I'm unable to create a corresponding CSS selector... :disappointed:

You can see an example of this on https://usercentrics.com/ itself.

https://www.antenne.de/ uses a div-tag, but it also generates a shadow DOM ...

[webracer999]

Oh, I was wrong, because I searched here with "apart" and not with "shadow dom". Consent-O-Matic supports shadow DOM! :smiley: (see #382)

But ... I'm not able to create a rule that works ... :disappointed:

My rule:

{
    "$schema": "https://raw.githubusercontent.com/cavi-au/Consent-O-Matic/master/rules.schema.json",
    "usercentrics": {
        "detectors": [
            {
                "presentMatcher": [
                    {
                        "type": "css",
                        "target": {
                            "selector": "#usercentrics-root"
                        }
                    }
                ]
            }
        ],
        "methods": [
            {
                "name": "SAVE_CONSENT",
                "action": {
                    "type": "click",
                    "parent": {
                        "selector": "#usercentrics-root"
                    },
                    "target": {
                        "selector": "button[data-testid=\"uc-deny-all-button\"]"
                    }
                }
            }
        ]
    }
}

Logging:

findElement: #usercentrics-root 0

When I enter in the console:

document.querySelector("#usercentrics-root")
// output: <div id="usercentrics-root" style="" data-created-at="1732900317516">

document.querySelector(" #usercentrics-root ").shadowRoot.querySelector("button[data-testid=\"uc-deny-all-button\"]")
// output: <button class="sc-dcJsrY gPjbGz" role="button" data-testid="uc-deny-all-button" style="margin: 0px 6px;">

PS: https://www.thalia.de/ also uses Usercentrics