Skip to main content

Add containertiming to both v1 and v2 consent banners

As suggested by Erwin Hofman’s post on LinkedIn, we should add the containertiming to the managed templates of the soon to be available v2 consent banner and existing v1 consent banners of Consent Studio Web CMP.

Linkedin post:

https://www.linkedin.com/posts/erwinhofman_rum-containertiming-api-share-7460973030924652544-Bz46


Details:
https://github.com/WICG/container-timing

https://developer.chrome.com/blog/container-timing-origin-trial

Status: Completed2 comments

Comments2

  • Thierry Maasdam

    Team•

    May 21

    The Consent Studio banner will carry the standard Element Timing and Container Timing attributes, with the identifier consent-banner. This applies to both our v1 and v2 banners, on every theme, on every customer site that loads the banner through Consent Studio.

    Nothing needs to change on your side.

    What this enables for RUMvision:

    • The banner becomes recognisable as a component in paint measurements, under a stable, unbranded name (consent-banner) so measurements stay comparable across sites.

    • The attribute is present in the HTML at the moment the browser first paints the banner, so the timing reflects when the banner actually appears, not a later "JavaScript modified it" moment.

    • No extra network requests, no added script, no tracking endpoint. It is purely a marker in the HTML; your RUM tool reads it.

    To verify, open a page with the banner visible and run this in DevTools:

    new PerformanceObserver(l => l.getEntries().forEach(e => console.log(e.identifier, e.startTime, e.element) )).observe({ type: 'container', buffered: true }); 

    You should see one entry with identifier consent-banner on the banner element.

    Container Timing is currently an experimental API in Chrome (origin trial m148 to m153); without a token on your origin the attribute is simply ignored. Element Timing works today in all Chromium browsers.

    Thanks to Erwin Hofman at RUMvision for the input and external validation.

  • Thierry Maasdam

    Team•

    May 15

    Some updates from our end:

    • Value: consent-banner (neutral, works in any RUM tool)

    • Attributes: both elementtiming + containertiming

    • v2 (managed): the attributes will be baked into the managed consent banner on the div.cs-banner__body element, which will be present during first paint

    • v2 headless: the attributes will be applied to cs-role="consent-banner"

    • v1: added to .cookie-banner__inner (the fallback will be .cookie-banner)