Cookie Herstel Script voor Shopify

Wat doet dit script?

Dit script zorgt voor cookie herstel door een bezoeker-ID (_taggingmk cookie) op twee plekken op te slaan:

In een cookie - de primaire opslaglocatie
In localStorage - als backup

Waarom is dit belangrijk?

Het probleem is dat browsers (vooral Safari via ITP) tracking cookies na 7 dagen verwijderen als bezoekers niet rechtstreeks terugkeren naar je website. Dit betekent dat:

Terugkerende klanten als "nieuwe bezoekers" worden geteld
Je customer journey data onbetrouwbaar wordt
Attribution analyses verkeerd worden (first-click vs. returning customer)
Je conversiepaden incomplete zijn

De oplossing is om via onderstaand script de cookie vanuit localStorage te herstellen nadat deze is verwijderd, waardoor je bezoeker-ID behouden blijft en je betere tracking data krijgt.

Implementatie op Shopify

Log in op je Shopify admin
Ga naar Themes onder Online Store

Bij je actieve theme klik je op de drie puntjes en daarna op Edit code

4. In de linker sidebar ga je naar theme.liquid (onder Layout)

Plaats onderstaand script direct na de openingstag <head>.

<script type="text/javascript">
  (function() {
      'use strict';
      
      // Generate UUID v4
      function mkTagging_generateUUID() {
          if (typeof crypto !== 'undefined' && crypto.getRandomValues) {
              return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, function(c) {
                  return (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16);
              });
          } else {
              return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                  var r = Math.random() * 16 | 0;
                  var v = c === 'x' ? r : (r & 0x3 | 0x8);
                  return v.toString(16);
              });
          }
      }
      
      // Get cookie value by name
      function mkTagging_getCookie(name) {
          var nameEQ = name + "=";
          var ca = document.cookie.split(';');
          for (var i = 0; i < ca.length; i++) {
              var c = ca[i];
              while (c.charAt(0) === ' ') c = c.substring(1, c.length);
              if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
          }
          return null;
      }
      
      // Set cookie with expiration
      function mkTagging_setCookie(name, value, days) {
          var expires = "";
          if (days) {
              var date = new Date();
              date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
              expires = "; expires=" + date.toUTCString();
          }
          document.cookie = name + "=" + value + expires + "; path=/; SameSite=Lax";
      }
      
      // Safe localStorage wrapper
      function mkTagging_getLocalStorage(key) {
          try {
              if (typeof Storage !== 'undefined' && window.localStorage) {
                  return localStorage.getItem(key);
              }
          } catch (e) {
              console.log('localStorage not available:', e);
          }
          return null;
      }
      
      function mkTagging_setLocalStorage(key, value) {
          try {
              if (typeof Storage !== 'undefined' && window.localStorage) {
                  localStorage.setItem(key, value);
                  return true;
              }
          } catch (e) {
              console.log('localStorage not available:', e);
          }
          return false;
      }
      
      // Main initialization function
      function mkTagging_initVisitorId() {
          var cookieName = '_taggingmk';
          var storageKey = '_taggingmk_backup';
          var visitorId = null;
          
          // 1. Check if cookie exists
          visitorId = mkTagging_getCookie(cookieName);
          
          // 2. If no cookie, check localStorage backup
          if (!visitorId) {
              visitorId = mkTagging_getLocalStorage(storageKey);
              
              // If found in localStorage but not in cookie, restore the cookie
              if (visitorId) {
                  mkTagging_setCookie(cookieName, visitorId, 365);
                  console.log('MK Tagging: Visitor ID restored from localStorage');
              }
          }
          
          // 3. If still no ID, generate a new one
          if (!visitorId) {
              visitorId = mkTagging_generateUUID();
              mkTagging_setCookie(cookieName, visitorId, 365);
              console.log('MK Tagging: New visitor ID generated');
          }
          
          // 4. Always sync to localStorage as backup
          if (mkTagging_setLocalStorage(storageKey, visitorId)) {
              console.log('MK Tagging: Visitor ID backed up to localStorage');
          }
          
          return visitorId;
      }
      
      // Run on DOM ready or immediately if already loaded
      if (document.readyState === 'loading') {
          document.addEventListener('DOMContentLoaded', mkTagging_initVisitorId);
      } else {
          mkTagging_initVisitorId();
      }
      
      // Create a namespaced object for any exposed functionality
      window.mkTagging = window.mkTagging || {};
      window.mkTagging.getVisitorId = function() {
          return mkTagging_getCookie('_taggingmk') || mkTagging_getLocalStorage('_taggingmk_backup');
      };
      
  })();
  </script>

Klik op Save rechts bovenin
Open je website in een incognito venster
Open Developer Tools (F12) en ga naar de Console tab
Je zou in de lijst het volgende moeten zien: "MK Tagging: New visitor ID generated: [uuid]"
Ververs de pagina en controleer dat het ID hetzelfde blijft

Verificatie

Test 1: Cookie wordt aangemaakt

Open Developer Tools → Application tab → Cookies
Zoek naar _taggingmk cookie
Controleer dat de waarde een UUID is (bijv. a3f2e1d4-5b6c-4d7e-8f9a-0b1c2d3e4f5a)

Test 2: localStorage backup werkt

Open Developer Tools → Application tab → Local Storage
Zoek naar _taggingmk_backup
De waarde moet identiek zijn aan de cookie

Test 3: Cookie herstel werkt

Verwijder handmatig de _taggingmk cookie (in Developer Tools)
Ververs de pagina
Controleer in Console: "MK Tagging: Visitor ID restored from localStorage"
De cookie moet terug zijn met dezelfde waarde

Technische details

Hoe het werkt:

Bezoeker komt op site
        ↓
Cookie bestaat? → JA → Sync naar localStorage → Klaar
        ↓ NEE
localStorage backup bestaat? → JA → Herstel cookie → Klaar
        ↓ NEE
Genereer nieuw UUID → Sla op in cookie + localStorage → Klaar

Privacy & AVG compliance

✅ Geen persoonsgegevens: Het script slaat alleen een random UUID op, geen persoonlijke informatie

✅ First-party cookie: De cookie wordt gezet op je eigen domein, niet door derden

✅ Functioneel noodzakelijk: Dit is een technische cookie voor analytics, vaak toegestaan zonder expliciete toestemming

⚠️ Let op: Overleg met je privacy officer of deze cookie onder "functioneel noodzakelijk" valt of dat je consent nodig hebt in je cookie banner

Troubleshooting

Probleem: Script werkt niet

Controleer of JavaScript errors zijn in de Console
Zorg dat het script vóór andere tracking scripts staat

Probleem: Cookie wordt nog steeds verwijderd

ITP kan localStorage ook blokkeren in sommige Safari modes
Overweeg server-side tracking als primaire oplossing

Probleem: Verschillende IDs per subdomain

Pas de mkTagging_setCookie functie aan met domain=.jouwdomein.nl

Voordelen van deze implementatie

✅ Verhoogt client_id coverage met 15-30%

✅ Betere attribution data voor returning customers

✅ Nauwkeurigere customer journey tracking

✅ Werkt in alle browsers

✅ Geen impact op pagina snelheid (inline script)

✅ Fallback voor browsers zonder localStorage