GDPR Consent Banner

Tips and Tricks
#1

Hey there!

I just want to ask the community, how to you deal with cookie consent, consent mode v2 by google and GDPR in general.

I am currently working on a project where I use the gtag and as far as I know there is no real consent banner available that is not a paid plan. I found this: Cookie Consent by orestbida github.

May someone what to share their experience and the tools you work with.

Thank you

#2

Hi there :slight_smile:

My solution for Google consent v.2 with GTM:

For banner solution I’ve used this plugin:

Setup default consent state in header, before GTM tag - if the consent is granted default state is granted:

<script>
            // Define dataLayer and the gtag function.
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}

            // Set default consent to 'denied' as a placeholder
            // Determine actual values based on your own requirements
            let data = {
                'ad_storage': 'denied',
                'ad_user_data': 'denied',
                'ad_personalization': 'denied',
                'analytics_storage': 'denied'
            }
            
            {% if sgCookies['analytics'] %}
                data['analytics_storage'] = 'granted';
                data['ad_storage'] = 'granted';
            {% endif %}

            {% if sgCookies['marketing'] %}
                data['ad_storage'] = 'granted';
                data['ad_user_data'] = 'granted';
                data['ad_personalization'] = 'granted';
            {% endif %}

            {% if sgCookies['ad'] %}
                data['ad_storage'] = 'granted';
                data['ad_user_data'] = 'granted';
            {% endif %}

             gtag('consent', 'default',data);
        </script>

        <!-- Google Tag Manager -->
        <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
        <!-- End Google Tag Manager -->

And I added this small javascript to setup google consent v2:

$('.btn-accept-all').on('click',()=>{
        gtag('consent', 'update', {
          'ad_storage': 'granted',
          'ad_user_data': 'granted',
          'ad_personalization': 'granted',
          'analytics_storage': 'granted'
        });
        window.dataLayer.push({
          'event': 'consentSet'
        });
      })

I’ve used this tutorial:

There is also tutorial for gtag and GTM. Hope this helps.

1 Like
#3

Thank you very much for that answer.

I tried to use the small gdpr banner. But i use UIkit 3 as CSS Framework and I can’t seem to get it run. If I copy the components from the plugin folder to my partial theme folder, the plugin is not loading. Do you have also such experiences?

#4

Its a little bit complicated, because the plugin uses bootstrap as css framework. I am using bulma css framework, so I hardcoded the plugin file with the my styles - I know, its not the correct way it should be done, it will overwrite my changes after plugin update, but for me it was the fastest solution for now.

For better solution I’ve recommend to use this plugin with raw html option and create custom css styles/custom js functions to meet your requirements.

#5

Here is a link to the docs that covers customizing the default markup:

If styles are injected by the component, the component should offer some way to disable this so the styles/js can be replaced with a custom version.

#6

Thank you very much for that advice!

1 Like
#7

If you have working styles for UIKit I can include them in my Small GDPR plugin.

Jan

1 Like
#8

Great! Currently I am working on it, but if I am ready with it, I will come back to you!

Thank you!!!

#9

Did you have a live website showing your Google consent v.2 in action?

#10

Yes, but only in slovak language: https://babetkovo.sk/

1 Like