Setting up a cookie banner

Setting up a Cookie Banner with giosg

Notice

Features documented here are only available for giosg script v2. If you are using the giosg script v1, please contact giosg support for more details on how to upgrade.

Introduction

In this tutorial, we will be integrating a cookie banner on our webpages. To enable us to do this, we will be using two possible solutions: HubSpot Cookie Banner or Cookiebot. You will find the solutions to these down below.

HubSpot Cookie Banner

Setup HubSpot

When you have no HubSpot account available and would like to proceed with implementing the HubSpot cookie banner, you will need to create a new HubSpot account. Documentation regarding creating a new HubSpot account can be found here.

When the account is created or you already are in possession of a HubSpot account, we can go on with setting up the cookie policy and banner.

Setting the correct settings

When logged in, navigate to the HubSpot settings. The settings can be found on the right clicking the white ⚙️ as shown in the picture below.

When you enter the settings pages, you should click on Privacy & Consent that is located in the left sidebar. This should bring up the Privacy & Consent settings for HubSpot.

Warning

Before enabling the below step, please make sure you fully understand which GDPR settings will be toggled on by default! A full list can be found here.

When your organization is located within the European Economic Area (EEA), it is recommended to enable the EU General Data Protection Regulation (GDPR) settings that are located in this settings page.

Click on Consent Options and add proper content for all consents and privacy messages that will be included when using HubSpot.

Then click on Cookies, add a policy when none exists or alter existing Default policy. If you want more information on how to set up the cookie policy, follow the guide on HubSpot Knowledge Base

You will also want to click the policy label and activate the following three settings:

1. Notify visitors that your site uses cookies;
2. Require opt-in;
3. Display cookies by category.

Then add the JavaScript to the page that is described below to enable the cookie banner.

Adding the required JavaScript on your site

<!-- HubSpot and giosg settings -->
<script type="text/javascript">
    _giosg(() => {
        var _hsp = (window._hsp = window._hsp || []);
        var _tcf = window.giosgTCApi;

        _hsp.push(['addPrivacyConsentListener', (consent) => {
            const _is_allowed = consent.allowed
            const visitorConsent = _tcf.getVisitorConsent();

            const prevConsent = consent.previousCategories;
            const currConsent = consent.categories;

            const _analyticsHasChanged = (prevConsent.analytics !== currConsent.analytics)
            const _advertisementHasChanged = (prevConsent.advertisement !== currConsent.advertisement)
            const _functionalityHasChanged = (prevConsent.functionality !== currConsent.functionality)

            if (_is_allowed) {
                visitorConsent.vendor = true
                // Required cookies for giosg.
                // An explanation for these consents can be found: https://docs.giosg.com/api_reference/transparency_consent/transparency_consent/#purpose-explanation.
                visitorConsent.purpose.consents[1] = true;
                visitorConsent.purpose.consents[4] = true;
                // Enable or disable the analytics cookies for giosg.
                if (_analyticsHasChanged) {}
                // Enable or disable the advertisement cookies for giosg.
                if (_advertisementHasChanged) {
                    visitorConsent.purpose.consents[2] = currConsent.advertisement;
                    visitorConsent.purpose.consents[7] = currConsent.advertisement;
                }
                // Enable or disable the extra functionalities cookies for giosg.
                if (_functionalityHasChanged) {
                    visitorConsent.purpose.consents[6] = currConsent.functionality;
                    visitorConsent.purpose.consents[10] = currConsent.functionality;
                }
                window.giosgTCApi.setVisitorConsent(visitorConsent);
            } else {
                // Disable all TC Purposes
                visitorConsent.vendor = false
                for (const purposeID in visitorConsent.purpose.consents) {
                    visitorConsent.purpose.consents[purposeID] = false;
                }
                window.giosgTCApi.setVisitorConsent(visitorConsent);
            }
        }]);

        _hsp.push(['showBanner']);
    });
</script>

You always want to let the user decide when and what cookies they want to accept/deny, you will want to add a button to your site to let the customers bring up the cookie consent bar again:

<!-- Start of HubSpot code snippet -->
<button type="button" id="hs_show_banner_button"
  style="background-color: #425b76; border: 1px solid #425b76;
         border-radius: 3px; padding: 10px 16px; text-decoration: none; color: #fff;
         font-family: inherit; font-size: inherit; font-weight: normal; line-height: inherit;
         text-align: left; text-shadow: none;"
  onClick="(function(){
    var _hsp = window._hsp = window._hsp || [];
    _hsp.push(['showBanner']);
  })()"
>
  Cookie Settings
</button>
<!-- End of HubSpot code snippet -->

Cookiebot Cookie Banner

Cookiebot's Cookie Banner has multiple solutions one can implement to show their cookie banner on your website.

Warning

Be aware that ALL cookies are blocked unless given permission when the strictest mode is setup (GDRP Compliant), which is the default.

You can sign up or log in to your Cookiebot account, you will need to add the domain name(s) you want to include to Cookiebot CMP. These websites will be scanned for all cookies available.

When this is done, you can setup the cookie consent banner and widget that you would like to display on your website(s). To change the default cookie consent banner you can log in and go to Settings and Dialog.

The default banner is configured with the strictest settings possible (suitable for cookie consent under GDPR and ePR). You will also have to edit the default banner text so it fits the (legal) requirements for your organization.

When everything is set up, you will need to add two different scripts:

• Cookie consent banner, this script loads your banner and blocks any scripts that has not had explicit permission to load.

Note

Replace the 00000000-0000-0000-0000-000000000000 with your cookiebanner UUID.

<script
    id="Cookiebot"
    src="https://consent.cookiebot.com/uc.js?cbid=00000000-0000-0000-0000-000000000000"
    type="text/javascript"
    async>
</script>

• The Cookie Declaration lists all cookies and trackers discovered by Cookiebot on your website and allows the user to withdraw (or change) a consent at any time.

Note

Replace the 00000000-0000-0000-0000-000000000000 with your cookiebanner UUID.

<script
    id="CookieDeclaration"
    src="https://consent.cookiebot.com/00000000-0000-0000-0000-000000000000/cd.js"
    type="text/javascript"
    async>
</script>

When these two have been added and the scan of your website is complete, you can check your scan report in Cookiebot to see if there are any unclassified cookies. When there are unclassified cookies, add a short purpose description to those.

Manual marking cookies

Warning

When you want to change the classification of the existing scripts, you can also use the data-cookieconsent to those scripts to change the classification.

The last thing you will need to do on your own website when you want complete control over the consents and script loading on your site, is adding a data-cookieconsent to the scripts you have available on your pages. There is three cookie categories: preferences, statistics and marketing. You will also need to change the script type to text/plain from text/javascript to make sure they do not autoload. Cookiebanner will load these scripts for you.

An example of updating the existing Google Analytics Tag:

<script type="text/plain" data-cookieconsent="statistics">
    (function(i,s,o,g,r,a,m){
    i['GoogleAnalyticsObject']=r;
    i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();
    a=s.createElement(o),m=s.getElementsByTagName(o)[0];
    a.async=1;
    a.src=g;
    m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-00000000-0', 'auto');
    ga('send', 'pageview');
</script>

Google Tag Manager (GTM)

A guide for adding this script to GTM can be found on the cookiebot support page.

Conclusion

In this tutorial we checked two different ways of adding a cookie banner to your own webpage.