Implementing a custom cookie consent banner - restarone/violet_rails GitHub Wiki

Change management procedure

The cookie consent banner needs to be staged so that the client can review it first. If the client approves of it, it can be promoted to production. The change management procedure is outlined below.

The cookie consent buttons control accepting and rejecting cookies

<button class="cookie-consent-button" data-value="true">Accept All</button>
<button class="cookie-consent-button" data-value="false">Reject All</button>

Staging

Create a snippet cookie-consent-staging and include the default cookie consent markup in it. You can find the default markup here: https://github.com/restarone/violet_rails/blob/master/db/migrate/20220824121504_add_cookies_consent_ui_to_subdomain.rb. Note that you have to remove all the backslashes \ from the markup.

cookie-consent-snippet

Create a default-staging layout using this template: https://github.com/restarone/violet_rails/issues/1057. Include the cookie-consent-staging snippet in the layout. Then create a staging page, for example, root-staging (based on the root page) and set its layout to default-staging.

default-staging

Customizing the cookie consent banner:

customizing-cookie-consent

You may choose to change the href values of Accept All and Reject All to # since the original values will not work in staging. Make sure to change them back when promoting to production.

Showing the cookie consent banner properly in admin

Include all custom styles within <style> tags or as inline styles as part of the cookie consent banner markup to ensure that the banner shows up properly in admin. Do not include custom styles in the default layout stylesheet because it does not get applied in admin.

Production

Go to App Settings and enable Tracking. Copy-paste the content of cookie-consent-staging snippet. Make sure that Accept All and Reject All buttons have the correct href value (in case you changed it in staging).

cookie-consent-production-1 cookie-consent-production-2

⚠️ **GitHub.com Fallback** ⚠️