âšī¸Cookie Settings JS
Introduction
The cookie settings JavaScript is a lightweight script designed to support SiteBuilder Layouts which modify a cookie in order to store the user's cookie preferences.
Here we'll explain how you can use the features of this script while modifying a layout.
How it works
After the user first sets their preferences, these preferences will be stored in a cookie with the name: sg-cookie-policy-settings
which will expire after a year.
Loading the script asynchronously
The Liquid will ensure the script is only loaded once on the page.
Creating Controls to set the preferences
Use the data-sg-cookie
data attribute to set an element as a control that will modify the settings. The value of the data-attribute will be the value of the preferences cookie when set. Theoretically you can set it to any string, but normally you'll want to differentiate between a simple set of choices.
Since the script is loaded asynchronously, the controls won't have event listeners attached immediately. Meanwhile the user may be eager to access the rest of the site and may try to dismiss the popup as soon as possible. Therefore, we recommend you start the controls with styling which indicates that they are disabled. You can then use the data-sg-cookie-btn-enabled
data-attribute to store classes which you would like to use to style the button once it is enabled. The script will replace the value of the class attribute with the value of the data-attribute when the script is ready.
Using Buttons
Using form elements
Accessing the current settings value
Note in this example above, we also use Liquid context.cookies.sg-cookie-policy-settings
to set a default checked value to the radio currently active on page load.
Success event
Since this uses data-attributes, we don't have a callback function on success. Instead we set a custom event on the document:
Accessing event.details
will let you know the current state of the preferences, however, you could of course use JS to check the cookies directly.
The script does not actually remove google analytics cookies which are already set. Layouts will disable any analytics script wrapped inside their Liquid logic. If you do wish to delete analytics cookies directly, we recommend you do this in a function called after the success event.
Last updated