How to implement Google Analytics GTAG GDPR compliant in Svelte

Question

so I was recently really struggling with a problem that I think most of you svelte developers are going to have sooner or later - especially if you want to roll out production apps in the EU.

Now I won't go into the intricacies of the GDPR, brutally simplified you need to have consent of your website visitor if you want to place cookies on there machine and use their data. Furthermore the Business Owner wants to analyze the metrics of incoming visitors and still the most powerful tool to do that is google analytics (and it's free aswell and no hosting required and so on).

So how would you implement the GTAG and the cookies that are being set by it in a GDPR compliant way.

Answer 1

First the GTAG Implementation: I created a simple svelte Modal component which uses a cookie to store the user's data preferences and includes the GTAG code. For the manual cookie preference placement I used the npm package "svelte-local-storage-store" and created a store with it.

  <script lang="ts">
    import { preferences } from '$lib/userStore';
    import { page } from '$app/stores';
    import { PUBLIC_GAMID } from '$env/static/public';

    if (typeof gtag !== 'undefined') {
        gtag('config', PUBLIC_GAMID, {
            page_title: document.title,
            page_path: $page.url.pathname
        });
    }
    function consentGranted() {
    console.log("AD Cookies placed");
        gtag('consent', 'update', {
            ad_storage: 'granted',
      analytics_storage: 'granted'
        });
    }

    function acceptGdpr() {
    console.log("GDPR accepted");
    
        preferences.set({ acceptAllCookies: true });
    consentGranted();
    }
</script>

{#if $preferences.acceptAllCookies == false}
    <input type="checkbox" id="my-modal-6" class="modal-toggle" />
    <div class="modal modal-bottom sm:modal-middle modal-open">
        <div class="modal-box">
            <h3 class="font-bold text-lg">Cookie and GDPR Consent</h3>
            <p class="py-4">
                You've been selected for a chance to get one year of subscription to use Wikipedia for free!
            </p>
            <button on:click={acceptGdpr} class="modal-action">
                <label for="my-modal-6" class="btn">Yay!</label>
            </button>
        </div>
    </div>
{/if}

<svelte:head>
    <script async src="https://www.googletagmanager.com/gtag/js?id=MEASUREMENT_ID">
    </script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('consent', 'default', {
            ad_storage: 'denied',
            analytics_storage: 'denied'
        });
        gtag('js', new Date());
        gtag('config', 'MEASUREMENT_ID');
    </script>
</svelte:head>

So in the code we first check whether gtag is not undefined which kind of seems to be like a common bug and is considered to be best practice. After that two functions are defined, one for the local preference cookie, the other one for updating the gtag parameters so that correct cookies are placed. Important here is the object that contains the fields ad_storage and analytics_storage, by changing their value to granted the cookie is getting placed on the user's machine. After that there is markup for the modal component which only should show if we do not have a user preference. The svelte:head part is important too. As far as I understand it svelte:head injects the subsequent code right into the document header. What is done in this tag is basically the code you get provided by google on your google analytics page. With the critical modification of setting

gtag('consent', 'default', {
            ad_storage: 'denied',
            analytics_storage: 'denied'
        });

This alters the script in a way that no cookies are placed which is very important because we are only allowed to place the cookies after we have gotten consent. There are many more parameters that can be set here but these are the most important ones. Refer to this api reference

Of course this is only a very basic version and you could make it much more granular but from this base the customization shouldn't be a hassle. I hope this helped you out! The GTAG basic implementation code was inspired by JoyOfCode, who by the way has great videos on svelte - so very much thanks to him too!

As a ressource I used https://developers.google.com/tag-platform/devguides/consent#gtag.js_1