{"id":22,"date":"2025-09-26T08:50:46","date_gmt":"2025-09-26T08:50:46","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/2025\/09\/26\/cookie-consent-notice\/"},"modified":"2025-09-27T07:12:46","modified_gmt":"2025-09-27T07:12:46","slug":"cookie-consent-notice","status":"publish","type":"post","link":"https:\/\/ska-blocks.com\/docs\/cookie-consent-notice\/","title":{"rendered":"Cookie consent notice"},"content":{"rendered":"\n<p>From <strong>ska-theme -&gt; General -&gt; Cookie notice<\/strong> option it&#8217;s possible to enable displaying a dialog that notifies users about cookies.<\/p>\n\n\n\n<p>The contents of the notice can be changed by editing the <strong>Appearance -&gt; Editor -&gt; Patterns -&gt; General -&gt; Consent dialog<\/strong> template part.<\/p>\n\n\n\n<p>By default the notice integrates with <strong>WP Consent API<\/strong> and <strong>Google Site Kit<\/strong> in &#8220;Consent mode&#8221;:<\/p>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<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\">\n<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>\n\n\n\n<a aria-current=\"page\" href=\"\" class=\"self-start text-sm wp-block-ska-text ska-text ska-link active\">Privacy policy<\/a>\n\n\n\n<div class=\"flex *:basis-full flex-row gap-3 wp-block-ska-element\">\n<button x-on:click=\"$store.skaConsent.reject()\" class=\"block mt-2 wp-block-ska-text ska-text ska-preset--ska-theme--button\">Reject<\/button>\n\n\n\n<button x-on:click=\"$store.skaConsent.consent({gsk:true})\" class=\"block mt-2 wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">Accept<\/button>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;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&quot;,&quot;css&quot;:&quot;.flex{display:flex}@media not all and (min-width:40rem){@media (orientation:portrait){.max-sm\\u005c:portrait\\u005c:right-0{right:var(--spacing-0)}}}@media not all and (min-width:40rem){@media (orientation:portrait){.max-sm\\u005c:portrait\\u005c:bottom-0{bottom:var(--spacing-0)}}}@media not all and (min-width:40rem){@media (orientation:portrait){.max-sm\\u005c:portrait\\u005c:left-0{left:var(--spacing-0)}}}.z-30{z-index:30}.flex-col{flex-direction:column}.gap-1{gap:var(--spacing-1)}.p-4{padding:var(--spacing-4)}.w-full{width:100%}@media not all and (min-width:40rem){@media (orientation:portrait){.max-sm\\u005c:portrait\\u005c:min-w-full{min-width:100%}}}.max-w-xs{max-width:var(--container-xs)}.bg-neutral-50\\u005c\/95{background-color:#fafafaf2}@supports (color:color-mix(in lab, red, red)){.bg-neutral-50\\u005c\/95{background-color:color-mix(in oklab,var(--color-neutral-50)95%,transparent)}}.rounded{border-radius:var(--radius)}@media not all and (min-width:40rem){@media (orientation:portrait){.max-sm\\u005c:portrait\\u005c:rounded-none{border-radius:0}}}.border{border-style:var(--tw-border-style);border-width:1px}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;hidden&quot;},&quot;skaBlocksAttributes&quot;:{&quot;record&quot;:{&quot;role&quot;:&quot;dialog&quot;,&quot;x-data&quot;:&quot;&quot;,&quot;x-cloak&quot;:&quot;&quot;,&quot;x-show&quot;:&quot;!$store.skaConsent.hasConsent&quot;}},&quot;skaBlocksSelectors&quot;:{&quot;max-sm:portrait&quot;:{&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;none&quot;}}},&quot;skaBlocksTopRightBottomLeft&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;b&quot;:&quot;0&quot;,&quot;l&quot;:&quot;0&quot;,&quot;r&quot;:&quot;0&quot;}}},&quot;skaBlocksMinWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;full&quot;}},&quot;a&quot;:[]}}},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;flex&quot;}}},&quot;skaBlocksZIndex&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;30&quot;}}},&quot;skaBlocksFlexDirection&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;col&quot;}}},&quot;skaBlocksGap&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;1&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;4&quot;}}},&quot;skaBlocksWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;full&quot;}}},&quot;skaBlocksMaxWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;xs&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;neutral-50\/95&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBoxShadow&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;md&quot;}}}} --&gt;\n&lt;div role=&quot;dialog&quot; x-data=&quot;&quot; x-cloak=&quot;&quot; x-show=&quot;!$store.skaConsent.hasConsent&quot; class=&quot;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&quot;&gt;\n&lt;!-- wp:paragraph {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;m-0 leading-snug&quot;,&quot;css&quot;:&quot;.m-0{margin:var(--spacing-0)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;0&quot;}}},&quot;skaBlocksLineHeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;snug&quot;}}}} --&gt;\n&lt;p class=&quot;m-0 leading-snug&quot;&gt;This website uses &lt;strong&gt;cookies&lt;\/strong&gt; to remember your &lt;strong&gt;preferences&lt;\/strong&gt;, measure audience &lt;strong&gt;engagement&lt;\/strong&gt; and site &lt;strong&gt;statistics&lt;\/strong&gt;.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;self-start text-sm&quot;,&quot;css&quot;:&quot;.self-start{align-self:flex-start}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#ska-link--privacy-policy&quot;,&quot;opensInNewTab&quot;:false},&quot;skaBlocksAlignSelf&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;start&quot;}}},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;sm&quot;}}},&quot;className&quot;:&quot;ska-link&quot;} --&gt;\n&lt;a href=&quot;#ska-link--privacy-policy&quot; class=&quot;self-start text-sm wp-block-ska-text ska-text ska-link&quot;&gt;Privacy policy&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;flex *:basis-full flex-row gap-3&quot;,&quot;css&quot;:&quot;.flex{display:flex}:is(.\\u005c*\\u005c:basis-full\\u003e*){flex-basis:100%}.flex-row{flex-direction:row}.gap-3{gap:var(--spacing-3)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;hidden&quot;},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;flex&quot;}}},&quot;skaBlocksFlexBasis&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;*&quot;:{&quot;@&quot;:&quot;full&quot;}}},&quot;skaBlocksFlexDirection&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;row&quot;}}},&quot;skaBlocksGap&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;3&quot;}}}} --&gt;\n&lt;div class=&quot;flex *:basis-full flex-row gap-3 wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;block mt-2&quot;,&quot;css&quot;:&quot;.block{display:block}.mt-2{margin-top:var(--spacing-2)}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;href&quot;:&quot;%privacy-policy-url%&quot;,&quot;customElement&quot;:&quot;&quot;,&quot;element&quot;:&quot;button&quot;},&quot;skaBlocksAttributes&quot;:{&quot;record&quot;:{&quot;x-on:click&quot;:&quot;$store.skaConsent.reject()&quot;}},&quot;skaBlocksVariation&quot;:&quot;ska-theme--button&quot;,&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;block&quot;}}},&quot;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;t&quot;:&quot;2&quot;}},&quot;t&quot;:&quot;sides&quot;}} --&gt;\n&lt;button x-on:click=&quot;$store.skaConsent.reject()&quot; class=&quot;block mt-2 wp-block-ska-text ska-text&quot;&gt;Reject&lt;\/button&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;block mt-2&quot;,&quot;css&quot;:&quot;.block{display:block}.mt-2{margin-top:var(--spacing-2)}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--primary-button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;href&quot;:&quot;%privacy-policy-url%&quot;,&quot;customElement&quot;:&quot;&quot;,&quot;element&quot;:&quot;button&quot;},&quot;skaBlocksAttributes&quot;:{&quot;record&quot;:{&quot;x-on:click&quot;:&quot;$store.skaConsent.consent({gsk:true})&quot;}},&quot;skaBlocksVariation&quot;:&quot;ska-theme--button&quot;,&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;block&quot;}}},&quot;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;t&quot;:&quot;2&quot;}},&quot;t&quot;:&quot;sides&quot;}} --&gt;\n&lt;button x-on:click=&quot;$store.skaConsent.consent({gsk:true})&quot; class=&quot;block mt-2 wp-block-ska-text ska-text&quot;&gt;Accept&lt;\/button&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<div role=\"dialog\" x-data=\"\" x-cloak=\"\" x-show=\"$store.skaConsent.hasConsent\" class=\"flex z-30 flex-col gap-1 p-4 mb-(--spacing-prose) w-full max-w-xs bg-neutral-50\/95 rounded border shadow-md wp-block-ska-element\">\n<div class=\"flex *:basis-full flex-row gap-3 wp-block-ska-element\">\n<button x-on:click=\"$store.skaConsent.revokeConsent()\" class=\"block mb-0! wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">Reset consent<\/button>\n<\/div>\n<\/div>\n\n\n\n<p>An Alpine.js store is used to manage the consent dialog.<\/p>\n\n\n\n<div class=\"mt-6 wp-block-ska-code not-prose ska-preset--ska-theme--code\"><header><span class=\"title\">Module arguments<\/span><span class=\"label language-typescript\">TypeScript<\/span><\/header><div class=\"content\"><pre class=\"code typescript language-typescript\"><code class=\"language-typescript\">export interface ConsentConfig {\n\t\/** Specify categories to toggle consent (WP Consent API). *\/\n\tcats?: 'all' | ('functional' | 'statistics-anonymous' | 'statistics' | 'preferences' | 'marketing')&#91;]\n\t\/** Instead of specifying categories manually, consent to all categories in Google Site Kit category map. *\/\n\tgsk?: boolean\n}<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<p>Consent with JavaScript:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><div class=\"content\"><pre class=\"code javascript language-javascript\"><code class=\"language-javascript\">window.ska_theme.Alpine.store('skaConsent').consent()<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<p>Retrieve consent status:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><div class=\"content\"><pre class=\"code javascript language-javascript\"><code class=\"language-javascript\">window.ska_theme.Alpine.store('skaConsent').hasConsent \/\/ true \/ false<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<p>Revoke consent and show consent dialog again:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><div class=\"content\"><pre class=\"code javascript language-javascript\"><code class=\"language-javascript\">window.ska_theme.Alpine.store('skaConsent').revokeConsent()<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<p><strong>Note<\/strong>: using <a href=\"https:\/\/alpinejs.dev\/magics\/store\" data-type=\"post\" data-id=\"860\" target=\"_blank\" rel=\"noreferrer noopener\">Alpine.js<\/a> in HTML attributes you can access the store via the <code>$store<\/code> magic shorthand:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><div class=\"content\"><pre class=\"code html language-html\"><code class=\"language-html\">&lt;button \n\ttype=\"button\"\n\tx-data \n\tx-on:click=\"$store.skaConsent.consent({gsk:true})\"\n>Consent&lt;\/button><\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Google Site Kit<\/h2>\n\n\n\n<p>Consent mode should be enabled on your site if at least one of the following applies:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The Analytics module is connected in Site Kit<\/li>\n\n\n\n<li>Google Ads is in use<\/li>\n<\/ul>\n\n\n\n<a aria-label=\"View image in full screen\" data-pswp-height=\"212\" data-pswp-width=\"1024\" data-ska-pswp=\"ska-pswp-1\" href=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2024\/03\/image-93-1024x212.png\" class=\"wp-block-ska-image image\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2024\/03\/image-93-1024x212.png\" alt=\"Google Site Kit consent mode\" width=\"1024\" height=\"212\" loading=\"lazy\"\/><\/a>\n\n\n\n<p>In order for consent mode to work, the <a href=\"https:\/\/wordpress.org\/plugins\/wp-consent-api\/\" target=\"_blank\" rel=\"noreferrer noopener\">WP Consent API<\/a> plugin must be installed as well.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Using WP Consent API<\/h2>\n\n\n\n<p>When WP Consent API plugin is detected and the &#8220;Cookie notice&#8221; option is enabled ska-theme automatically sets <code>wp_consent_type<\/code> to <code>optin<\/code> by doing the following:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><div class=\"content\"><pre class=\"code javascript language-javascript\"><code class=\"language-javascript\">\/\/ PHP filter:\nadd_filter('wp_get_consent_type', function() {\n\treturn 'optin';\n});\n\n\/\/ Enqueued JavaScript:\nwindow.wp_consent_type = 'optin'\ndocument.dispatchEvent(new CustomEvent('wp_consent_type_defined'))<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<p>The following filter can be used to disable that behavior:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><header><span class=\"title\">Prevent ska-theme from automatically entering into optin mode<\/span><span class=\"label language-php\">PHP<\/span><\/header><div class=\"content\"><pre class=\"code php language-php\"><code class=\"language-php\">add_filter('ska_theme_define_wp_consent_type', '__return_false');<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<p>By default the cookie notice &#8220;Accept&#8221; button (configured with <code>gsk: true<\/code>) grants consent to all properties in Google Site Kit consent map (<code>statistics<\/code>, <code>marketing<\/code>, <code>functional<\/code>, <code>preferences<\/code>):<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><div class=\"content\"><pre class=\"code javascript language-javascript\"><code class=\"language-javascript\">$store.skaConsent.consent({gsk:true})<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<p>Alternatively, categories can be specified as an array:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><div class=\"content\"><pre class=\"code javascript language-javascript\"><code class=\"language-javascript\">$store.skaConsent.consent({cats:&#91;'functional','analytics']})<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<p>or string <code>all<\/code> to consent to all WP Consent API categories (<code>statistics-anonymous<\/code>, <code>statistics<\/code>, <code>marketing<\/code>, <code>functional<\/code>, <code>preferences<\/code>) at once:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><div class=\"content\"><pre class=\"code javascript language-javascript\"><code class=\"language-javascript\">$store.skaConsent.consent({cats:'all'})<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<p>The above consent function passes the categories to WP Consent API by calling <code>wp_set_consent<\/code>. Alternatively you can omit any configuration and call custom code manually:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><div class=\"content\"><pre class=\"code javascript language-javascript\"><code class=\"language-javascript\">$store.skaConsent.consent(); wp_set_consent('statistics', 'allow')<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<p>Consent can be rejected by calling <code>reject()<\/code> which will simply hide the consent notice:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><div class=\"content\"><pre class=\"code javascript language-javascript\"><code class=\"language-javascript\">$store.skaConsent.reject()<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<p>By default WP Consent API consent cookies persist for 30 days, this can be modified with the following filter:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><header><span class=\"title\">WP Consent API cookie expiration<\/span><span class=\"label language-php\">PHP<\/span><\/header><div class=\"content\"><pre class=\"code php language-php\"><code class=\"language-php\">add_filter('wp_cookie_expiration', function($expiration) {\n\treturn 90;\n});<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<p>The ska-theme&#8217;s cookie notice will automatically use the same value.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Testing if the consent is working with Google Tag<\/h2>\n\n\n\n<p>When using <strong>Google Site Kit<\/strong> with <strong>Consent mode<\/strong> enabled and <strong>WP Consent API<\/strong>, you can test if your cookie banner is correctly granting permissions by checking the <code>dataLayer<\/code> array (which Google Tag uses) in your browser dev tools JavaScript console.<\/p>\n\n\n\n<p>Open your website in an <strong>incognito window<\/strong> and open the browser dev tools (F12) -&gt; Console tab and type in <code>dataLayer<\/code> to inspect the initial state of the array:<\/p>\n\n\n\n<a aria-label=\"View image in full screen\" data-pswp-height=\"340\" data-pswp-width=\"1024\" data-ska-pswp=\"ska-pswp-2\" href=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2024\/06\/image-1024x340.png\" class=\"wp-block-ska-image image\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2024\/06\/image-1024x340.png\" alt=\"dataLayer array in dev tools\" width=\"1024\" height=\"340\" loading=\"lazy\"\/><\/a>\n\n\n\n<p>By default the &#8220;consent&#8221; has been set to &#8220;denied&#8221; for all categories.<\/p>\n\n\n\n<p>Now press the &#8220;Accept&#8221; button on your cookie notice, then type <code>dataLayer<\/code> in the console again to see the changes:<\/p>\n\n\n\n<a aria-label=\"View image in full screen\" data-pswp-height=\"357\" data-pswp-width=\"984\" data-ska-pswp=\"ska-pswp-3\" href=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2024\/06\/image-1.png\" class=\"wp-block-ska-image image\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2024\/06\/image-1.png\" alt=\"Updated dataLayer array in dev tools with analytics_storage permissions\" width=\"984\" height=\"357\" loading=\"lazy\"\/><\/a>\n\n\n\n<p>You should see that the <code>dataLayer<\/code> array length is now longer and the last call was to update the consent &#8211; for this example the Consent button called <code>wp_set_consent('statistics', 'allow')<\/code> and that&#8217;s what triggered GSK to grant <code>analytics_storage<\/code> permissions.<\/p>\n\n\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n\t\/** Show cookie banner again on this page, for demo purposes. *\/\n\twindow.ska_theme.Alpine.store('skaConsent').revokeConsent()\n})\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Resetting the cookie notice<\/h2>\n\n\n\n<p>If you&#8217;ve made changes to the cookie notice such that it can grant additional new permissions, it can be &#8220;reset&#8221; by changing the &#8220;ID&#8221; that is used when storing the cookie notice state. When using a different ID the notice will be shown to all users again, even if they previously consented or rejected.<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><header><span class=\"title\">Changing cookie notice cookie name<\/span><span class=\"label language-php\">PHP<\/span><\/header><div class=\"content\"><pre class=\"code php language-php\"><code class=\"language-php\">add_filter('ska_theme_script_data', function($data) {\n\t$data&#91;'consentId'] = 'ska_consent_2'; \/\/ Default: 'ska_consent'\n\treturn $data;\n});<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>From ska-theme -&gt; General -&gt; Cookie notice option it&#8217;s possible to enable displaying a dialog that notifies users about cookies. The contents of the notice can be changed by editing the Appearance -&gt; Editor -&gt; Patterns -&gt; General -&gt; Consent dialog template part. By default the notice integrates with WP Consent API and Google Site&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-22","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":2,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/22\/revisions"}],"predecessor-version":[{"id":301,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/22\/revisions\/301"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=22"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=22"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}