name: Cookie banner
description: Help users manage their personal data by telling them when you store cookies on their device.
body: |
By default the cookie banner is shown to all users with just a link to the settings page. If JavaScript is on this is enhanced to show accept/reject buttons if preferences aren't set, or to hide the banner if they are.
Setting `data-hide-cookie-banner="true"` on any link inside the banner will overwrite the default action and when clicked will dismiss the cookie banner for a period of 365 days (approx. 1 year).
If the examples below are not showing the banner, make sure the `cookies_preferences_set` cookie is not present or is set to false.
accessibility_criteria: |
Text in the cookie banner must be clear and unambiguous and should provide a way to dismiss the message.
shared_accessibility_criteria:
- link
accessibility_excluded_rules:
- 'duplicate-id' # a banner should have a unique id for a given page. However, this page contains multiple examples of the banner with the same id.
examples:
default:
data: {}
with_custom_content:
data:
title: "Can we store analytics cookies on your device?"
text: "This is some custom text in my cookie banner which lets users know what we're using cookies for. I can also include a link to the cookies page"
confirmation_message: "You’ve accepted all cookies."
with_multi_paragraph_custom_content:
data:
title: "Can we store analytics cookies on your device?"
text: ["This is some custom text in my cookie banner.","There are three paragraphs.","They are passed as an array"]
confirmation_message: "You’ve accepted all cookies."
with_custom_cookie_preferences_href:
data:
cookie_preferences_href: "/cookies"
in_services_asking_for_analytics_only:
description: Use this type of banner in your service if it only uses cookies for analytics.
data:
title: Can we store analytics cookies on your device?
text: Analytics cookies help us understand how our website is being used.
confirmation_message: You’ve accepted all cookies. You can `change your cookie settings` at any time.
services_cookies:
# yes and no must be quoted or are converted into booleans in the guide
"yes":
text: "Yes"
data_attributes:
track-category: cookieBanner
"no":
text: "No"
data_attributes:
"track-category": "cookieBanner"
cookie_preferences:
text: How we use cookies
href: "/cookies"
without_ga4_tracking:
description: |
Disables GA4 tracking on the banner. Tracking is enabled by default. This includes link tracking on the "You have accepted cookies" section, and allows the pageview event that is sent when GA4 initialises to record the presence of the cookie acceptance message.
data:
disable_ga4: true