Cookie consent notice

From ska-theme -> General -> Cookie notice option it’s possible to enable displaying a dialog that notifies users about cookies.

The contents of the notice can be changed by editing the Appearance -> Editor -> Patterns -> General -> Consent dialog template part.

By default the notice integrates with WP Consent API and Google Site Kit in “Consent mode”:

This website uses cookies to remember your preferences, measure audience engagement and site statistics.

<!-- wp:ska/element {"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksZIndex":{"v":{"$":{"@":"30"}}},"skaBlocksFlexDirection":{"v":{"$":{"@":"col"}}},"skaBlocksGap":{"v":{"$":{"@":"1"}}},"skaBlocksPadding":{"v":{"$":{"@":"4"}}},"skaBlocksWidth":{"v":{"$":{"@":"full"}}},"skaBlocksMaxWidth":{"v":{"$":{"@":"xs"}}},"skaBlocksBackgroundColor":{"v":{"$":{"@":"neutral-50/95"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"DEFAULT"}}},"skaBlocksBorderWidth":{"v":{"$":{"@":"DEFAULT"}}},"skaBlocksBoxShadow":{"v":{"$":{"@":"md"}}},"skaBlocksAttributes":{"record":{"role":"dialog","x-data":"","x-cloak":"","x-show":"!$store.skaConsent.hasConsent"}},"skaBlocks":{"cx":"flex max-sm:portrait:right-0 max-sm:portrait:bottom-0 max-sm:portrait:left-0 z-30 flex-col gap-1 p-4 w-full max-sm:portrait:min-w-full max-w-xs bg-neutral-50/95 rounded max-sm:portrait:rounded-none border shadow-md","t":1709756495,"css":".z-30{z-index:30}.flex{display:flex}.w-full{width:100%}.max-w-xs{max-width:20rem}.flex-col{flex-direction:column}.gap-1{gap:var(\u002d\u002dska-spacing-1)}.rounded{border-radius:var(\u002d\u002dska-border-radius)}.border{border-width:1px}.bg-neutral-50\\/95{background-color:rgba(250,250,250,0.95)}.p-4{padding:var(\u002d\u002dska-spacing-4)}.shadow-md{\u002d\u002dtw-shadow:0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);\u002d\u002dtw-shadow-colored:0 4px 6px -1px var(\u002d\u002dtw-shadow-color),0 2px 4px -2px var(\u002d\u002dtw-shadow-color);box-shadow:var(\u002d\u002dtw-ring-offset-shadow,0 0 #0000),var(\u002d\u002dtw-ring-shadow,0 0 #0000),var(\u002d\u002dtw-shadow)}@media not all and (min-width: 640px){@media (orientation: portrait){.max-sm\\:portrait\\:bottom-0{bottom:var(\u002d\u002dska-spacing-0)}.max-sm\\:portrait\\:left-0{left:var(\u002d\u002dska-spacing-0)}.max-sm\\:portrait\\:right-0{right:var(\u002d\u002dska-spacing-0)}.max-sm\\:portrait\\:min-w-full{min-width:100%}.max-sm\\:portrait\\:rounded-none{border-radius:var(\u002d\u002dska-border-radius-none)}}}"},"skaBlocksSelectors":{"max-sm:portrait":{"skaBlocksBorderRadius":{"v":{"$":{"@":"none"}}},"skaBlocksTopRightBottomLeft":{"v":{"$":{"@":"","b":"0","l":"0","r":"0"}}},"skaBlocksMinWidth":{"v":{"$":{"@":"full"}},"a":[]}}}} -->
<div role="dialog" x-data="" x-cloak="" x-show="!$store.skaConsent.hasConsent" class="flex max-sm:portrait:right-0 max-sm:portrait:bottom-0 max-sm:portrait:left-0 z-30 flex-col gap-1 p-4 w-full max-sm:portrait:min-w-full max-w-xs bg-neutral-50/95 rounded max-sm:portrait:rounded-none border shadow-md wp-block-ska-element"><!-- wp:paragraph {"skaBlocks":{"cx":"m-0 leading-snug","t":1709756495,"css":".m-0{margin:var(\u002d\u002dska-spacing-0)}.leading-snug{line-height:1.375}"},"skaBlocksMargin":{"v":{"$":{"@":"0"}}},"skaBlocksLineHeight":{"v":{"$":{"@":"snug"}}}} -->
<p class="m-0 leading-snug">This website uses <strong>cookies</strong> to remember your <strong>preferences</strong>, measure audience <strong>engagement</strong> and site <strong>statistics</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:ska/text {"skaBlocksFontSize":{"v":{"$":{"@":"sm"}}},"skaBlocksAs":{"element":"a","href":"#ska-link\u002d\u002dprivacy-policy","opensInNewTab":false},"skaBlocks":{"cx":"text-sm","t":1709756495,"css":".text-sm{font-size:var(\u002d\u002dska-font-size-sm);line-height:var(\u002d\u002dska-font-size-sm-lh)}"}} -->
<a href="#ska-link--privacy-policy" class="text-sm wp-block-ska-text ska-text">Privacy policy</a>
<!-- /wp:ska/text -->

<!-- wp:ska/element {"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksFlexBasis":{"v":{"$":{"@":""},"*":{"@":"full"}}},"skaBlocksFlexDirection":{"v":{"$":{"@":"row"}}},"skaBlocksGap":{"v":{"$":{"@":"3"}}},"skaBlocksAppender":{"type":"hidden"},"skaBlocks":{"cx":"flex *:basis-full flex-row gap-3","t":1709756495,"css":".flex{display:flex}.flex-row{flex-direction:row}.gap-3{gap:var(\u002d\u002dska-spacing-3)}.\\*\\:basis-full \u003e *{flex-basis:100%}"}} -->
<div class="flex *:basis-full flex-row gap-3 wp-block-ska-element"><!-- wp:ska/text {"skaBlocksDisplay":{"v":{"$":{"@":"block"}}},"skaBlocksMargin":{"v":{"$":{"@":"","t":"2"}},"t":"sides"},"skaBlocksAs":{"href":"%privacy-policy-url%","element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-on:click":"$store.skaConsent.reject()"}},"skaBlocks":{"p":[{"id":"ska-theme:button","isStatic":true}],"cx":"block mt-2","t":1709756495,"css":".mt-2{margin-top:var(\u002d\u002dska-spacing-2)}.block{display:block}"},"skaBlocksVariation":"ska-theme:primaryButton"} -->
<button x-on:click="$store.skaConsent.reject()" class="block mt-2 wp-block-ska-text ska-text">Reject</button>
<!-- /wp:ska/text -->

<!-- wp:ska/text {"skaBlocksDisplay":{"v":{"$":{"@":"block"}}},"skaBlocksMargin":{"v":{"$":{"@":"","t":"2"}},"t":"sides"},"skaBlocksAs":{"href":"%privacy-policy-url%","element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-on:click":"$store.skaConsent.consent({gsk:true})"}},"skaBlocks":{"p":[{"id":"ska-theme:button","isStatic":true},{"id":"ska-theme:primaryButton","isStatic":true}],"cx":"block mt-2","t":1709756495,"css":".mt-2{margin-top:var(\u002d\u002dska-spacing-2)}.block{display:block}"},"skaBlocksVariation":"ska-theme:primaryButton"} -->
<button x-on:click="$store.skaConsent.consent({gsk:true})" class="block mt-2 wp-block-ska-text ska-text">Accept</button>
<!-- /wp:ska/text --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element -->

An Alpine.js store is used to manage the consent dialog.

Module argumentsTypeScript

interface ConsentConfig {
	/** Toggle consent with WP Consent API according to Google Site Kit consent map. */
	gsk?: boolean
}

Consent with JavaScript:

window.ska_theme.Alpine.store('skaConsent').consent()

Retrieve consent status:

window.ska_theme.Alpine.store('skaConsent').hasConsent // true / false

Revoke consent and show consent dialog again:

window.ska_theme.Alpine.store('skaConsent').revokeConsent()

Note: using Alpine.js in HTML attributes you can access the store via the $store magic shorthand:

<button 
	type="button"
	x-data 
	x-on:click="$store.skaConsent.consent({gsk:true})"
>Consent</button>

Google Site Kit

Consent mode should be enabled on your site if at least one of the following applies:

The Analytics module is connected in Site Kit
Google Ads is in use

In order for consent mode to work, the WP Consent API plugin must be installed as well.

Using WP Consent API

Once you have installed and activated the WP Consent API plugin the Consent dialog‘s “Accept” button will be granting consent to all properties in Google Site Kit consent category map.

When WP Consent API plugin is detected and the Cookie notice option is enabled ska-theme automatically sets wp_consent_type to optin by enqueuing the following JavaScript:

window.wp_consent_type = 'optin'
document.dispatchEvent(new CustomEvent('wp_consent_type_defined'))

The following filter can be used to disable that behavior:

Prevent ska-theme from automatically entering into optin modePHP

add_filter('ska_theme_define_wp_consent_type', '__return_false');

By default the cookie notice “Accept” button grants consent to all properties in GSK consent map (statistics, marketing, functional, preferences):

$store.skaConsent.consent({gsk:true})

For a custom implementation, that setting can be removed (in which case calling $store.skaConsent.consent() will simply hide the consent dialog but not grant any consent) and consent can be granted manually with the WP Consent API JS function:

Granting only statistics permissions

$store.skaConsent.consent() && wp_set_consent('statistics', 'allow')

Consent can be rejected by calling reject() which will hide the consent notice.

$store.skaConsent.reject()

By default WP Consent API consent cookies persist for 30 days, this can be modified with the following filter:

WP Consent API cookie expirationPHP

add_filter('wp_cookie_expiration', function($expiration) {
	return 90;
});

The ska-theme’s cookie notice will automatically use the same value.

Testing if the consent is working with Google Tag

When using Google Site Kit with Consent mode enabled and WP Consent API, you can test if your cookie banner is correctly granting permissions by checking the dataLayer array (which Google Tag uses) in your browser dev tools JavaScript console.

Open your website in an incognito window and open the browser dev tools (F12) -> Console tab and type in dataLayer to inspect the initial state of the array:

By default the “consent” has been set to “denied” for all categories.

Now press the “Accept” button on your cookie notice, then type dataLayer in the console again to see the changes:

Updated dataLayer array in dev tools with analytics_storage permissions

You should see that the dataLayer array length is now longer and the last call was to update the consent – for this example the Consent button called wp_set_consent('statistics', 'allow') and that’s what triggered GSK to grant analytics_storage permissions.