A GDPR cookie-consent banner for Hugo

September 2018 · 10 minute read
The following assume basic knowledge of GDPR and cookies, Hugo installed and an existing Hugo project.

The General Data Protection Regulation (GDPR), adopted by the EU Parliament, effective since May 25 2018, carries provisions that require businesses collecting personal data, to protect the collected data and privacy of EU citizens for transactions that occur within EU member states, but also imposes regulations for the exportation of personal data outside the EU, if people within the member states are targeted. Within this context and because cookies can be used to uniquely identify a person, they are considered as personal data. Hence, all identifiers utilizing such cookies, such as analytics, advertising, chats, surveys, etc., are affected by the recent changes to EU regulations. According to the new directives, the user must have a choice to turn on/off the cookies used in each site and not just be informed about the use of cookies in a site. If the user agrees to cookies, this has to be a clear affirmative action, like an opt-in link. The users have to be able to revoke consent through the same action as when they gave consent, meaning the consent method must always be available to users.

Cookies are generally divided into necessary and unnecessary. The necessary cookies are those absolutely required to deliver the information requested by the user, while the rest of the cookies are considered unnecessary. Included in the unnecessary cookies are all identifiers used for analytics, advertising, third parties, including affiliates and those that identify a returning user to a website. The EU GDPR targets these “unnecessary” cookies category.

Based on the above if you use Google Analytics, Google Ads, Disqus or similar to your site, without explicit user consent and you target EU audience, you most probably do not comply to GDPR with whatever extensions that might have.

Hugo and GDPR

At present, Hugo provides a certain set of parameters and actions towards GDPR compliance, but most of the above described extended functionality is up to the individual to implement. On top of that, many of the available Hugo themes, do not use the standard Hugo internal templates, eg. for Google Analytics, but have created their own partials for these extensions, so that the GDPR-related control-parameters associated with the internal Hugo templates do not have any effect.

Up to now the simplest strategy widely used to many websites, including Hugo powered sites, is the addition of a purely informative banner somewhere within the viewport in each page, informing the user about the use of cookies in the website, which might or might not have a button to disperse the banner. The button might have text similar to “Accept”, “Got it!”, or other, but is not connected with functionality that records actual user consent and it basically just closes the banner. A very popular “cookie-consent” banner implementation is cookie consent by insites provided free.

Cookie consent by insites

The “Learn more” link in the banner, can lead to a page in your site with further relevant explanation, or to cookiesandyou site, also created by insites, explaining about cookies and how you can “defend” against them. This very popular banner implementation in its simplest form is only informative about the use of cookies in a web site. It has the ability to adjust to opt-in or opt-out banner, but this requires implementing the JavaScript functions to handle this functionality and also adjusting and/or modifying other scripts (eg. analytics) to work with and respect the cookie-consent. However, for proper compliance, a form of some kind must be created to allow the user to modify consent. So, there must be a link, button, etc., enabling this form, where users can change their initial decision and the site’s behavior has to be adjusted accordingly to respect users’ choices. In addition, depending on the number of different categories of cookies (necessary, performance, functional, etc.), used in a site, if there is no discrimination for these categories when the user is asked for consent, it will be either on or off for all unnecessary cookies. By providing discrete cookie-categories you can, for example, give users the choice to turn off tracking but allow everything else. Categorizing cookies is another task one must implement if using the cookie consent by insites, not to mention cookie-interaction with third-party plugins such as Disqus comments.

Another option could be to use cookie consent by OneTrust. OneTrust offers free cookie consent for one website, providing website scanning and auto-categorization of cookies. They also provide a customizable banner and a customizable cookie-preference center, which is a form where users can opt-in or -out to cookies in one or more cookie categories available in a website. The preferences form can be reused to change consent.

OneTrust preference center

Cookie preference center by OneTrust

OneTrust provides the script to insert the relevant banner to your website, code for a button which opens the preference-center once closed and code to add, if you wish, a dynamic list of your cookies to a page of your site.

Cookie-consent banner by OneTrust

There are many other choices for cookie consent handling, one can choose from like, TrustArc, Piwik, Cookiebot etc.

The fun part of the whole operation is trying to make everything play nice together and actually adjusting site’s behavior to users’ consent. At this point it is worth noting that after researching various approaches for actual cookie consent implementation (not only informative), I came across two excellent articles: a) “How to implement GDPR cookie consent notification with Google Tag Manager” and b) “Google Tag Manager Cookie Consent dialog”. These articles describe the implementation of a real cookie consent operation and procedure. The first article (Analyticsmania), along with the rest of the research is what drove me to choose OneTrust’s cookie consent.

Choosing to integrate OneTrust’s cookie consent to Hugo, reduces the overhead a lot and adds an amount of flexibility to the final implementation. By flexibility, I mean that you can easily alter the type of consent you use in your website (informative/all-on, opt-in, opt-out). For example you may wish to initially start with an informative/all-on (non GDPR compliant) approach and in time move to an opt-in (GDPR compliant) approach. All the functionality of OneTrust’s banner and preference center will be the same and it is just a matter of your OneTrust account customization, how the final product will behave. If you would like to go with OneTrust’s offering you can start here, but be patient, as the account creation process is not immediate.

  • Request access to OneTrust’s platform. You will have to wait for a confirmation email which may take up to 2 work days.
  • Once you are grant access to the platform, on the “welcome screen” click on Cookie Consent & Website Scanning.

Cookie Consent & Website Scanning

  • Then, on the next page click Scan Website.

Scan website

  • Then add your website by clicking on the top-right-corner Add Website. Enter your main domain (eg. liatas.com). Optionally, click Advanced Settings and limit scan to 50 or 100 pages, to make the initial audit complete faster.

Add Website

  • Once the scan starts refresh the page every now and then until you see it has been completed. Then you can proceed to the Results page and after that click on the left-side menu Cookie Banner, to customize your banner.

Cookie banner customization

  • The preview on the right gives you a good image to how the banner will look like. There is also Live Preview available (although it did not work for me). Feel free to experiment with the various options, also have in mind that you can always come back later and make changes to the look and other options. When you believe you are satisfied with the banner customization click on Publish on the top-right corner, to store your settings.

Publish customizations

  • Then, proceed to cookie listing, by clicking on Cookie List on the left-side menu. There you will find categorized some or all the cookies OneTrust’s audit has found on your site. If you find uncategorized cookies you can add them to a category on the right using drag-and-drop. Default cookie categories are based on GDPR regulations, as I mentioned in the beginning of this article. To be fully compliant all cookies except the necessary ones must be deactivated when a user lands to one of your site’s pages.

Cookie list menu

  • The next step is to customize the preference center popup, by clicking on Preference Center on the left-side menu. There you will be able to adjust the style, add your logo, alter the contents and functionality of the preference center. When you finish your customization click on Publish to save your settings. This popup will be used to allow users to interact with your site’s cookie settings.

Preference center menu

  • You can proceed now to Script Integration item on the left-side menu, where you will find the scripts to integrate OneTrust’s cookie consent functionality to your site. For your initial integration work in your Hugo site it is better to use the Production Single Location, Download to Local, or Staging/Test scripts as the Production CDN script has slow response to changes. So, until you feel satisfied with all your previous customizations use a script with faster response to be able to immediately see the results.

OneTrust cookie consent integration scripts

  • In your Hugo site’s directory structure create a new partial onetrust.html. Copy and paste the OneTrust Cookies Consent Notice script and save the file. Then, paste the following script:
<!-- For working OneTrust Cookies Consent Notice in local server -->
{{- if .Site.IsServer -}}
  {{ partial "onetrust.html" . }}
{{- end -}}

either at top of the <head> section of your site, as suggested by OneTrust, or at bottom before the closing </body> tag. This is an intermediate step, for testing purposes, so either location will work. If you are considering of adding it strait to a production site, you can use the partial {{ partial "onetrust.html" . }} without the if statement at top of the <head> section of your site. However, it is better to test it locally, as you may need to modify your stylesheet(s) for various elements. Also, add the Cookie Setting Button script at an appropriate place in your site which must be visible in every page. The Cookie list script is an optional nice to have feature. Run hugo server to see the results of your new additions to your website. You will be able now, to further adjust styling to your needs.

Further actions

The banner and supporting popup preference center, as they are at the moment do not affect your site’s cookies by any way other than just adding consent-state cookies from OneTrust (may appear as Optanon). If, for example, you have Google Analytics script in your site either by using Hugo’s internal template or your own implementation, it will continue working as before. The two scripts must be connected in some way to allow OneTrust’s cookie consent to prevent or allow tracking though analytics. To be fully compliant, for this example, analytics should not be loaded before users clearly consent to their use. In analogy the same approach should be followed for all unnecessary cookies and their associated scripts.

This is not a trivial implementation especially if a site requires flexibility in modifications/additions and is loaded with various performance and functionality improving scripts/plugins. Since I always consider flexibility and future-proof additions, an excellent tool to combine all the above and much more is Google Tag Manager. Google Tag Manager offers an elegant solution that allows you to quickly and easily add/update tracking codes and related code fragments collectively known as “tags” on your website or mobile app.

Migrating from hard-coded Google Analytics and the rest of hard-coded scripts to Google Tag Manager will provide better control and consolidation of scripts removing clutter from source code, not to mention performance increase in various scopes. Utilizing Google Tag Manager in your Hugo site and integrating OneTrust’s cookie consent script in tags, is the subject of the follow-on article Hugo + Google Tag Manager.

Enjoy coding!

Above opinions and any mistakes are my own. I am not affiliated in any way with companies, or organizations mentioned above. The code samples provided are licensed under the Apache 2.0 License and rest content of this page is licensed under the Creative Commons Attribution 3.0 License, except if noted otherwise.
Tags: Hugo, GDPR, cookie, GTM

comments powered by Disqus