Trackingparameters verwijderen met Cloudflare Workers

Trackingparameters verwijderen met Cloudflare Workers

Trackingparameters zoals utm_, gclid en fbclid URL-parameters kunnen door marketeers en bedrijven worden gebruikt om data en inzichten te verzamelen over hun online campagnes en gebruikersgedrag. Voor Core Web Vitals zijn ze een nachtmerrie, omdat ze de caching-functionaliteit vaak verstoren! Als je deze trackingparameters wilt opschonen zonder je analytics te breken, bieden Cloudflare Workers een lichtgewicht en schaalbare oplossing.

In deze blogpost doorloop ik een eenvoudig Cloudflare Worker script om trackingparameters van inkomende requests te verwijderen, terwijl de kernfunctionaliteit van je site behouden blijft.

Het Cachingprobleem met Trackingparameters

Als caching niet correct is geconfigureerd, veroorzaken URL-parameters cache misses. Wanneer cachingsystemen pagina's opslaan, vertrouwen ze op de URL als een cache key. Als een URL trackingparameters bevat (zoals ?utm_source=google of ?ref=partner), maken deze parameters de URL uniek, zelfs als de content identiek is. Zonder de juiste configuratie dwingt deze uniciteit de server of edge cache om de gecachte versie van de pagina te omzeilen, wat resulteert in een cache miss. In plaats van de reeds beschikbare content te serveren, regenereert of haalt de server deze opnieuw op, wat leidt tot verspilde resources en tragere laadtijden.

Waarom verwijderen we niet gewoon alle URL-parameters? Niet alle cache misses zijn slecht — sommige parameters veranderen daadwerkelijk de pagina-inhoud, zoals zoekopdrachten (?q=laptops) of dynamische filters (?color=blue). Deze misses zorgen ervoor dat gebruikers accurate, gepersonaliseerde resultaten zien.

De sleutel is om onderscheid te maken tussen parameters die de content beïnvloeden en parameters die dat niet doen.

Cloudflare Workers

Met Cloudflare Workers kun je requests onderscheppen en manipuleren aan de edge. Dit maakt het een ideaal hulpmiddel om trackingparameters op te schonen voordat requests je origin server bereiken. Zo implementeer je het:

De Code

Hieronder staat het volledige script om veelvoorkomende trackingparameters te verwijderen:

addEventListener('fetch', event => {
  event.respondWith(fetchCleanUrl(event.request))
})

async function fetchCleanUrl(request) {
  const url = new URL(request.url)

  // Define a regex to match utm_, gclid, and fbclid query parameters
  const regex = /^(utm_|gad_|gclid|fbclid|srsltid|msclkid|dclid|referrer)/

  // Remove matching query parameters
  url.searchParams.forEach((value, key) => {
    if (regex.test(key)) {
      url.searchParams.delete(key)
    }
  })

  // Fetch the response from the modified URL
  const response = await fetch(url.toString(), request)

  return response
}

Hoe het werkt

• Onderschep Requests: De addEventListener('fetch') functie luistert naar inkomende HTTP requests.
• Parse de URL: De URL API parst de request URL, wat het eenvoudig maakt om query parameters te manipuleren.
• Identificeer Trackingparameters: Een regular expression (regex) matcht veelvoorkomende trackingparameters zoals utm_, gclid, fbclid en andere.
• Verwijder Matches: De searchParams.forEach() methode itereert over alle query parameters. Elke parameter die overeenkomt met de regex wordt verwijderd met url.searchParams.delete().
• Fetch de opgeschoonde URL: De aangepaste URL wordt gebruikt om de response op te halen, die vervolgens wordt teruggestuurd naar de gebruiker. 

Deployment

1. Meld je aan bij Cloudflare: Log in op je Cloudflare dashboard.
2. Maak een Worker aan: Navigeer nog niet naar je site. Ga naar de Workers-sectie en maak een nieuwe Worker aan.
   
3. Geef de worker een naam en deploy.  Deze stap lijkt misschien wat contra-intuïtief, maar geen zorgen. Geef je lege 'hello world' worker een naam en klik op deploy.
     
4. Bewerk je worker. Klik op de volgende pagina op Edit Code 
   
5. Plak het Script: Kopieer en plak het bovenstaande script in de editor. Klik vervolgens op deploy.
   
6. Koppel de Worker aan een Route: Ga nu terug en navigeer naar je site in Cloudflare. Klik op worker routes en vervolgens op 'Add Route'. Selecteer de zojuist aangemaakte worker en pas deze toe op je site!
   

Voordelen

• Verbeterde Caching: Schonere URL's zorgen voor effectiever gebruik van edge en browser caches.
• Volledige controle! Hoewel veel caching-oplossingen hun eigen configuratie hebben, is het altijd beter om volledige controle te hebben. Op die manier strippen we niet de parameters die we willen behouden en zorgen we ervoor dat we degenen verwijderen die de site cache verstoren.

Customization

Je kunt de regex eenvoudig aanpassen om specifieke parameters op te nemen of uit te sluiten, afhankelijk van je behoeften. Als je bijvoorbeeld bepaalde utm_ parameters wilt behouden, kun je ze gewoon uit de regex verwijderen!

Hoe je URL-parameters vindt om te verwijderen

Ontdekken welke URL-parameters je moet verwijderen is eenvoudig als je het juiste gereedschap gebruikt. RUM Tracking tools zoals CoreDash monitoren je site 24/7 en loggen alle query strings en hun impact op de performance. Navigeer in CoreDash simpelweg naar Largest Contentful Paint en bekijk de resultaten per query string!