UTM-parameters vastleggen en opslaan in aparte cookies

Deze aangepaste HTML-tag vangt UTM-parameters op van de huidige URL en slaat ze allemaal op als een aparte cookie. Hierdoor blijven de UTM-parameterwaarden ook na het huidige bezoek van de gebruiker bestaan en kunnen gebruikersgedrag en specifieke marketinginspanningen aan elkaar worden gekoppeld, zelfs als de gebruiker niet meteen converteert.

Usecase

UTM-parameters opslaan als cookies is handig als je de effectiviteit van verschillende marketingcampagnes over een langere periode wilt volgen. Als een gebruiker bijvoorbeeld op een link klikt in een e-mailcampagne, slaat deze tag de bijbehorende UTM-parameters op als cookies. Als die gebruiker dan later terugkomt en een aankoop doet, kun je de UTM-cookies lezen om die conversie toe te schrijven aan de oorspronkelijke e-mailcampagne.

Instructies

Om deze aangepaste HTML-tag in GTM te maken, kun je de volgende code gebruiken. Merk op dat dit de JavaScript document.cookie eigenschap gebruikt om cookies te maken:

<script>
(function() {
  var queryParams = location.search.substring(1).split('&');

  for (var i = 0; i < queryParams.length; i++) {
    var param = queryParams[i].split('=');

    if (param[0].startsWith('utm_')) {
      document.cookie = param[0] + '=' + decodeURIComponent(param[1]) + '; path=/';
    }
  }
})();
</script>

Dit script haalt eerst de querystring van de huidige URL op, verwijdert het initiële “?” teken, splitst de querystring op in individuele parameters en itereert over deze parameters. Voor elke parameter wordt gecontroleerd of de parameternaam begint met “utm_” en zo ja, dan wordt een cookie aangemaakt met dezelfde naam en de gedecodeerde waarde van de parameter.

Vergeet niet om de trigger voor deze tag zo te configureren dat hij afgaat op alle pagina “s of op de specifieke pagina” s waar je UTM-parameters wilt vastleggen.

De cookies die in het gegeven codefragment worden aangemaakt, verlopen wanneer de browsersessie eindigt. Dit komt omdat er geen expliciete levensduur is ingesteld, waardoor het “sessiecookies” zijn. Sessiecookies worden verwijderd wanneer de gebruiker zijn browser afsluit.

Als je wilt dat de cookies voor een bepaalde periode bewaard blijven (bijvoorbeeld 30 dagen), kun je een vervaldatum instellen door ; max-age=<seconds> of ; expires=<date> toe te voegen aan de cookie-string.

Hier lees je hoe je het script kunt aanpassen zodat de cookies 30 dagen blijven staan:

<script>
(function() {
  var queryParams = location.search.substring(1).split('&');
  var maxAge = 30 * 24 * 60 * 60;  // 30 days in seconds

  for (var i = 0; i < queryParams.length; i++) {
    var param = queryParams[i].split('=');

    if (param[0].startsWith('utm_')) {
      document.cookie = param[0] + '=' + decodeURIComponent(param[1]) + '; max-age=' + maxAge + '; path=/';
    }
  }
})();
</script>

Als we deze voorbeeld-URL nemen:

https://www.example.com/?utm_source=google&utm_medium=cpc&utm_campaign=spring_sale&utm_content=ad_version_1&utm_term=running+shoes

De cookies die zijn ingesteld door het meegeleverde script zouden er, gegeven de voorbeeld-URL, in een tabel ongeveer zo uitzien. Aangezien we de max-age op 30 dagen hebben ingesteld, kan dit attribuut in onze tabel worden opgenomen:

In deze tabel staat de kolom “Max-Age” voor de levensduur van de cookie vanaf het moment dat deze is ingesteld. Dit wordt uitgedrukt in zowel dagen als seconden (omdat max-age technisch wordt gedefinieerd in seconden). Al deze cookies verlopen 30 dagen nadat ze zijn ingesteld, tenzij de gebruiker ze verwijdert of de browser ze om de een of andere reden verwijdert.

Vergeet niet dat verschillende browsers verschillende gedragingen kunnen hebben voor cookies en dat gebruikers cookies handmatig kunnen verwijderen of helemaal kunnen blokkeren. Daarnaast zijn er voorschriften zoals GDPR en CCPA die eisen stellen aan toestemming en het gebruik van cookies, dus zorg ervoor dat je aan de voorschriften voldoet als je cookies op je site gebruikt.

Toegang tot en gebruik van UTM-cookies in verborgen formuliervelden

Zodra deze UTM-cookies zijn ingesteld, kun je hun waarden ophalen en gebruiken in je applicatie. Een veelvoorkomende toepassing is om deze waarden op te nemen in verborgen formuliervelden. Op deze manier, wanneer de gebruiker een formulier indient (bijvoorbeeld om zich in te schrijven voor een nieuwsbrief of een aankoop te doen), kunnen de formuliergegevens de UTM parameterwaarden bevatten. Dit kan helpen bij het toewijzen van conversies aan specifieke marketingkanalen of campagnes.

<script>
(function() {
  var utmParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_content', 'utm_term'];
  
  utmParams.forEach(function(param) {
    var value = getCookie(param);
    if (value) {
      document.getElementById(param).value = value;
    }
  });

  function getCookie(name) {
    var cookieArr = document.cookie.split(";");
    
    for(var i = 0; i < cookieArr.length; i++) {
      var cookiePair = cookieArr[i].split("=");
      
      if(name == cookiePair[0].trim()) {
        return decodeURIComponent(cookiePair[1]);
      }
    }
    return null;
  }
})();
</script>

In dit script declareren we eerst een array utmParams met de namen van de UTM-parameters waarin we geïnteresseerd zijn. Vervolgens gebruiken we een lus om deze parameters te doorlopen. Voor elke parameter roepen we de functie getCookie aan met de naam van de parameter. De functie getCookie haalt het cookie met de opgegeven naam op en geeft de waarde ervan terug.

Als er een waarde wordt gevonden, stelt het script de waarde van het corresponderende verborgen formulierveld in op de cookie-waarde met document.getElementById(param).value = value;.

De verborgen velden in het formulier zouden er eenvoudigweg zo uit kunnen zien:

<form id="myForm">
  <input type="hidden" id="utm_source" name="utm_source">
  <input type="hidden" id="utm_medium" name="utm_medium">
  <input type="hidden" id="utm_campaign" name="utm_campaign">
  <input type="hidden" id="utm_content" name="utm_content">
  <input type="hidden" id="utm_term" name="utm_term">
  <!-- Other form fields here -->
  <input type="submit" value="Submit">
</form>

Als de gebruiker nu het formulier verzendt, bevatten de formuliergegevens de waarden van de UTM-parameters, die vervolgens in je backendsysteem of database kunnen worden gebruikt om de formulierverzending toe te schrijven aan specifieke marketingkanalen of campagnes.

Is dit niet de macro die je zocht? Bekijk hieronder verwante macro’s of vraag er een aan.