The Cookie consent component provides a clear and accessible method for informing users about cookie usage on a website, allowing them to manage their preferences. It aligns with privacy laws and best practices, ensuring user control over data collection.
Usage
Use the Cookie consent component to:
Provide users with clear information about cookie usage and its purposes
Allow users to accept, reject, or customise cookie preferences
Ensure compliance with privacy laws (e.g., GDPR, CCPA, PPIPA 1998)
Regularly review and update cookie practices to align with privacy laws
Do:
Use clear, concise, and easy-to-understand language to minimise cognitive load
Embed a permanent link or button for users to manage their cookie preferences
Do not:
Use the cookie banner for purposes unrelated to Cookie consent
Make it difficult for users to set their cookie preferences or reject non-essential cookies
Steps to set up
Assess cookies used on your website
Conduct a review of the cookies currently used on your site. Identify:
Essential cookies: Required for core functionality, security, and accessibility. These cannot be disabled.
Analytics cookies: Used to measure and analyse website traffic, user interactions, and performance.
Marketing cookies: Used for advertising, retargeting, and personalisation across digital platforms.
Functional cookies: Enable additional features, such as user preferences, language settings, and saved form data.
Authentication & session cookies: Used to manage user logins, maintain session states, and provide secure access to restricted areas.
Third-party cookies: Set by external services embedded on your website, such as social media platforms, embedded videos, or chat widgets.
Tracking & profiling cookies: Collect behavioural data to build user profiles and enhance targeted content delivery.
A cookie audit tool or browser developer tools can help in identifying existing cookies. Document each cookie’s purpose, expiration, and data retention policies to ensure compliance.
Consider what kind of cookie notice is required
To ensure transparency and compliance with privacy regulations, website owners should embed a Cookie Notice into the “How we use cookies” tab.
As part of this step, website owners should:
Assess all cookies used on your website, including essential, analytics, and third-party cookies
Categorise cookies based on their purpose and data collection impact.
Create a cookie notice ensuring transparency in cookie usage and compliance with Information Privacy Principle (IPP) 3.
Otherwise, further advice on cookies and Cookie Notices is available by contacting the Digital NSW Privacy Lead at [email protected].
Configure the Cookie Consent Component
You can download a cookie configuration template or use the example below as a starting point for your implementation.
Key configuration steps:
Define and configure cookie categories:
Create a cookie-consent-config.js file to specify cookie categories such as 'necessary', 'analytics', and any others relevant to your website.
Ensure each cookie is correctly categorised to reflect its purpose and legal requirements.
Add cookie groups to the configuration:
Include the cookie groups identified during your audit under the sections key in your configuration file.
Each script that sets cookies must be associated with a corresponding category by adding a data-category attribute to it in the <head>.
Example: If a script is responsible for setting analytics cookies, it should be marked as:
This ensures that cookies are only set after the user provides consent.
Customise the component to fit your needs:
Adjust the consent banner, preferences dialog, and other UI elements to align with your agency's design and accessibility standards.
You can modify text, button labels, styling, and behaviors to provide a user-friendly experience.
Create a Cookie Notice:
The "How we use cookies" tab must contain a clear and complete Cookie Notice.
See the Privacy section for further guidance and Cookie Notice templates.
Set cookie expiry based on provider and banner needs:
There are two layers of cookie expiries to consider:
Third-party provider cookies (e.g., The Trade Desk, Facebook, Google Analytics) have their own expiry settings, typically ranging from 30 days to 13 months. For example, TTD cookies commonly expire between 6-12 months.
Cookie consent banner expiry controls when users are prompted again. This is configurable via config.cookie.expiresAfterDays in the component configuration file and accepts a Number (integer) representing the number of days before the consent expires.
If the consent cookie expires, the banner will automatically appear again, prompting users to reselect their preferences.
The best practice is to set the consent expiry to match the shortest expiry among the site's cookies to ensure consistency and compliance.
Integrate the configuration file
Ensure the configuration file is included in your HTML <head> section:
Without this, the cookie consent functionality will not load.
Test locally and deploy
Before going live, test your implementation to ensure the cookie consent component functions as expected.
Run the website locally and verify that the banner loads correctly.
Ensure cookie preferences update properly when users accept, reject, or customise settings.
Use browser developer tools to confirm that cookies behave according to user selections.
Check that the Privacy Collection Notice link is accessible and correct.
Once tested, deploy the changes to your production environment.
Privacy
Data collection
Website cookies can collect various types of personal information, depending on their purpose and how they are configured. Examples of personal information that may be collected include:
Email address
Username
IP address
Geographic location
Session screen recording data
Personal information
If personal information is being collected via a cookie, your agency is required to satisfy the principle of open collection under Information Privacy Principle (IPP) 3.
The most common way of complying with IPP 3 is to provide a Privacy Collection Notice (PCN) (sometimes called a "Cookie Notice") to individuals at the point their information is collected.
The cookie consent component can be configured to include a PCN and meet IPP 3 requirements.
"How we use cookies" tab
As best practice, a dedicated standalone Cookie Notice may be maintained on your agency's website and linked within the "How we use cookies" tab.
The following templates have been created to serve as a guide for creating a Privacy Collection Notice/Cookie Notice:
As tracking technologies continue to evolve, periodic audits and proactive measures will be necessary to maintain privacy compliance and control over pixel deployment.
Privacy support
For further advice and support, website owners should refer to their own privacy, information governance, or information security teams in the first instance.
Otherwise, further advice on cookies and Cookie Notices is available by contacting the Digital NSW Privacy Lead at [email protected].
Customisation
The component is customisable via the configuration object, including:
Consent banner customisations
Set the title
Set the content HTML (including the ability to add links)
Option to display a confirmation message in the cookie banner
Customise whether the "Accept all" and "Reject all" buttons will show as well as their titles
Specify a custom offset value for the banner's position to prevent conflicts with other sticky components
Preferences dialog customisations
Enable or disable closing the dialog by clicking outside the dialog
Customise the cookie categories and descriptions shown in the preferences dialog
Add specific information for each cookie, including purpose and expiry
Customise whether the "Accept all" and "Reject all" buttons will show, as well as their titles
The "How we use cookies" tab is customisable and must be populated with a Cookie Notice. Website owners should create an appropriate Cookie Notice based on their classification. View the Cookie Notice templates here.
Pixel support
Tracking pixels introduce additional complexities, as they can be deployed in multiple ways. Some use cookies, while others do not, and some may be present unintentionally. Given the evolving nature of tracking mechanisms, mitigating unauthorised pixels is an ongoing challenge.
For websites intentionally deploying tracking pixels, we recommend:
Javascript wrapper: Wrap pixel scripts in a Javascript wrapper that allows users to toggle them on/off based on their consent preferences.
GTM pixel injection: Use Google Tag Manager (GTM) to deploy pixels, leveraging GTM's inbuilt consent monitoring functionality to ensure compliance.
Server-side pixels: Server-side pixel implementations require additional solutions to ensure compliance. Further investigation is needed to define best practices in this space.
Accessibility
The Cookie consent component meets WCAG 2.2 AA accessibility guidelines:
Keyboard navigability
High contrast for readability
Screen reader support
Dependencies
This component integrates with the vanilla-cookie-consent library for handling cookie preferences but is designed specifically for use within the NSW Design System. The component is styled and structured to meet NSW DS standards and ensures a seamless experience for users.