Consenthandling

TL;DR:

import * as consenthandler from '@mod-publisher/js/analytics/consenthandler.es';
consenthandler.setup("<sitename>-consent", showCookieBanner);

Setup in JS:

import * as consenthandler from '@mod-publisher/js/analytics/consenthandler.es';

function showCookieBanner()
{
  //launch a banner..
  ackbutton.addEventListener("click", () => consenthandler.setConsent(["analytics","remarketing"]));
  denybutton.addEventListener("click", () => consenthandler.setConsent([]));
}

consenthandler.onConsent("analytics", loadAnalytics);
consenthandler.setup("<sitename>-consent", showCookieBanner);

setup sets up the cookie name (just use eg. the site name, but we require you to set up a cookie to properly work with multiple sites sharing an output host) and launches the callback if consent is unknown

setContent expects an array of consent flags. if it's just an all or nothing, just use ['all']. use an empty array [] if consent was denied

When the consent settings change, consenthandler will fire a wh:consent-change event with the list of consents in evt.detail.consent

To responds to positive consent, use consenthandler.onConsent(type, callback). Similar to onDomReady, the callback will also be invoked if consent is already known

To respond to any consent change, use consenthandler.onConsentChange(callback) to trigger a callback whenever the consent has changed. Please note that onConsentChange is invoked whether consent is accepted or denied, so always check the 'consent' property of the passed argument.

Consent status is also marked as property on the documentElement, eg you can test document.documentElement.dataset.whConsent for specific consent flags, "unknown" if the consent question is and "denied" if consent has been declined. This property is mostly intended for CSS selectors (eg html[data-wh-consent*="remarketing"] { ... })

You can also test for consent using consenthandler.hasConsent(consentflag)

Setting up consent overlays

Wrap consent-requiring elements inside a wh-requireconsent element, and insert a wh-requireconsent__overlay element at the top of this container.

Use the data-wh-consent-required attribute to specify the exact consent required

Example HTML:

<div class="wh-requireconsent" data-wh-consent-required="marketing">
  <div class="wh-requireconsent__overlay"></div>
  ... the elements requiring consent ...
</div>

Example CSS:

.wh-requireconsent
{
  position:relative;
  z-index:0;
}
.wh-requireconsent__overlay
{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index:1;
}

You may also want to implement a clickhandler on the consent overlay so users can change their consent preferences. The simplest approach is a redirect:

  dompack.register(".wh-requireconsent__overlay",
    node => node.addEventListener("click", () => location.href="/privacy/");

Testing/debugging

To reset the content setting, type this in the console:

whResetConsent();

If you use our testing GTM container GTM-TN7QQM, you will see the consent triggers in the console.

GTM compatibility

Make sure you use the publisher version of the gtm plugin in your siteprofile - in general, <gtm /> should have no xmlns= attribute.

<apply minservertype="production">
  <to type="all" />
  <gtm account="GTM-42PROD42" />
</apply>
<apply maxservertype="test"> <!-- use standard WH debug GTM container -->
  <to type="all" />
  <gtm account="GTM-TN7QQM" />
</apply>

You can avoid loading GTM until the consent choices have been made (eg until a cookiebar is answered)

<apply minservertype="production">
  <to type="all" />
  <gtm account="GTM-42PROD42" launch="manual" />
</apply>

but then you'll need to manually activate it in your consenthandler integration

import * as gtm from '@mod-publisher/js/analytics/gtm.es';

gtm.initOnConsent();
consenthandler.setup("<sitename>-consent", showCookieBanner);

In GTM, setup your triggers to activate on the proper consent settings:

Use "wh.consent equals denied" if you want to trigger when consent is not given. Note that "wh.consent" must be defined as a Datalayer variable.