Requirements


Solution


A really smooth open source solution named Klaro!

How it works


Basically you modify your <script> attributes (e.x. Google Analytics) from type="text/javascript" to type="text/plain" and from src= to data-src=.

This prevents the execution of any javascript code on your website and hence the creation of any cookie, where the user didn't provided its consent. At the time, the user gives the consent for a service you want to use, Klaro activates the <script> based on a data-name attribute for the selected service and updates the <script> attribute type="text/plain" back to type="text/javascript" , which leads in an execution of the contained javascript code.

Tutorial


1.) Define the configuration

You have to tell Klaro which services you use and what data-name they have.

Let's say, you just use Google Analytics on your website. Your config,js will look similar to this:

var klaroConfig = {

    version: 1,

    elementID: 'klaro',

    noAutoLoad: false,

    htmlTexts: true,

    embedded: false,

    groupByPurpose: true,

    storageMethod: 'cookie',

    cookieName: 'klaro',

    cookieExpiresAfterDays: 120,

    default: false,

    mustConsent: false,

    acceptAll: true,

    hideDeclineAll: false,

    hideLearnMore: false,

    noticeAsModal: false,

    translations: {
        zz: {
            privacyPolicyUrl: 'URL',
        },
        de: {
            consentModal: {
                title: '<h4>Services, die wir verwenden möchten</h4>',
                description:
                    'Hier können Sie einsehen und anpassen, welche Information wir über Sie sammeln.',
            },
            googleAnalytics: {
                description: 'Sammeln von Besucherstatistiken',
            },
            purposes: {
                analytics: 'Besucher-Statistiken',
            },
        },
        en: {
            consentModal: {
                title: '<h4>Services we would like to use</h4>',
                description:
                    'Here you can see and customize the information that we collect about you.',
            },
            googleAnalytics: {
                description: 'Collecting of visitor statistics',
            },
            purposes: {
                analytics: 'Analytics',
            },
        },
    },

    services: [
        {
            name: 'googleAnalytics', 
            title: 'Google Analytics',
            purposes: ['analytics'],
            cookies: [
                [/^_g.*/, '/', '.webflow.io'], // delete already set cookies at loading time of Klaro
            ],
            optOut: false,
        },
    ],
};