Fjerne sporingsparametere med Cloudflare Workers

Fjerne sporingsparametere med Cloudflare Workers

Sporingsparametere som utm_, gclid og fbclid URL-parametere kan brukes av markedsførere og bedrifter til å samle inn data og innsikt om sine nettkampanjer og brukeratferd. For Core Web Vitals kan de være et mareritt fordi de har en tendens til å ødelegge hurtigbufferfunksjonaliteten! Hvis du ønsker å rydde opp i disse sporingsparameterne uten å ødelegge analysene dine, tilbyr Cloudflare Workers en lettvekts og skalerbar løsning.

I dette blogginnlegget vil jeg gå gjennom et enkelt Cloudflare Worker-skript for å fjerne sporingsparametere fra innkommende forespørsler, samtidig som kjernefunksjonaliteten til nettstedet ditt bevares.

Hurtigbufferproblemet med sporingsparametere

Hvis hurtigbufring ikke er konfigurert riktig, vil URL-parametere forårsake cache-bom. Når hurtigbufringssystemer lagrer sider, er de avhengige av URL-en som hurtigbuffernøkkel. Hvis en URL inneholder sporingsparametere (som ?utm_source=google eller ?ref=partner), gjør disse parameterne URL-en unik, selv om innholdet er identisk. Uten riktig konfigurasjon tvinger denne unikheten serveren eller edge-hurtigbufferen til å omgå den hurtigbufrede versjonen av siden, noe som resulterer i en cache-bom. I stedet for å levere det allerede tilgjengelige innholdet, regenererer eller henter serveren det på nytt, noe som fører til bortkastede ressurser og tregere sidelastetider.

Hvorfor fjerner vi ikke bare alle URL-parameterne? Ikke alle cache-bom er dårlige – noen parametere endrer genuint sideinnholdet, som søkeforespørsler (?q=laptops) eller dynamiske filtre (?color=blue). Disse bommene sikrer at brukerne ser nøyaktige, personaliserte resultater.

Nøkkelen er å skille mellom parametere som påvirker innholdet og de som ikke gjør det. 

Cloudflare Workers

Cloudflare Workers lar deg fange opp og manipulere forespørsler ved kanten. Dette gjør det til et ideelt verktøy for å rydde opp i sporingsparametere før forespørsler treffer opprinnelsesserveren din. Slik implementerer du det:

Koden

Nedenfor er det komplette skriptet for å fjerne vanlige sporingsparametere:

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
}

Slik fungerer det

• Fange opp forespørsler: addEventListener('fetch')-funksjonen lytter etter innkommende HTTP-forespørsler.
• Parse URL-en: URL API-et parser forespørsels-URL-en, noe som gjør det enkelt å manipulere spørringsparametere.
• Identifisere sporingsparametere: Et regulært uttrykk (regex) matcher vanlige sporingsparametere som utm_, gclid, fbclid og andre.
• Fjerne treff: searchParams.forEach()-metoden itererer over alle spørringsparametere. Enhver parameter som matcher regex-en fjernes ved hjelp av url.searchParams.delete().
• Hente ren URL: Den modifiserte URL-en brukes til å hente responsen, som deretter returneres til brukeren. 

Utrulling

1. Logg inn på Cloudflare: Logg inn på Cloudflare-dashbordet ditt.
2. Opprett en Worker: Ikke naviger til nettstedet ditt ennå. Naviger til Workers-seksjonen og opprett en ny Worker.
   
3. Gi workeren et navn og deploy. Dette trinnet kan virke litt kontraintuitivt, men ikke bekymre deg. Bare gi din tomme 'hello world'-worker et navn og klikk deploy.
     
4. Rediger workeren din. På neste side klikker du på Edit Code 
   
5. Lim inn skriptet: Kopier og lim inn skriptet ovenfor i editoren. Klikk deretter deploy
   
6. Bind Workeren til en rute: Gå tilbake og naviger til nettstedet ditt i CloudFlare. Klikk på worker routes og deretter på 'Add Route'. Velg den nyopprettede workeren og bruk den på nettstedet ditt!
   

Fordeler

• Forbedret hurtigbufring: Renere URL-er sikrer mer effektiv bruk av edge- og nettleserhurtigbuffere.
• Full kontroll! Selv om mange hurtigbufringsløsninger har sin egen konfigurasjon, er det alltid bedre å ha full kontroll. På den måten fjerner vi ikke parameterne vi vil beholde, og sikrer at vi fjerner de som forstyrrer nettstedets hurtigbuffer

Tilpasning

Du kan enkelt endre regex-en for å inkludere eller ekskludere spesifikke parametere basert på dine behov. For eksempel, hvis du vil bevare visse utm_-parametere, kan du bare fjerne dem fra regex-en!

Hvordan finne hvilke URL-parametere du bør fjerne

Å finne ut hvilke URL-parametere du bør fjerne er enkelt hvis du bruker riktig verktøy. RUM-sporingsverktøy som CoreDash overvåker nettstedet ditt døgnet rundt og logger alle spørringsstrenger og deres innvirkning på ytelsen. I CoreDash navigerer du ganske enkelt til Largest Contentful Paint og ser resultatene etter spørringsstreng!