Rimozione dei parametri di tracciamento con Cloudflare Workers

Rimozione dei parametri di tracciamento con Cloudflare Workers

I parametri di tracciamento come utm_, gclid e fbclid possono essere utilizzati dai marketer e dalle aziende per raccogliere dati e insight sulle loro campagne online e sul comportamento degli utenti. Per i Core Web Vitals possono essere un incubo perché tendono a interrompere la funzionalità di caching! Se stai cercando di ripulire questi parametri di tracciamento senza danneggiare le tue analitiche, Cloudflare Workers offre una soluzione leggera e scalabile.

In questo articolo del blog, ti guiderò attraverso un semplice script Cloudflare Worker per rimuovere i parametri di tracciamento dalle richieste in arrivo, preservando al contempo la funzionalità principale del tuo sito.

Il problema del caching con i parametri di tracciamento

Se il caching non è configurato correttamente, i parametri URL causeranno cache miss. Quando i sistemi di caching memorizzano le pagine, si basano sull'URL come cache key. Se un URL include parametri di tracciamento (come ?utm_source=google o ?ref=partner), questi parametri rendono l'URL unico, anche se il contenuto è identico. Senza una configurazione appropriata, questa unicità costringe il server o l'edge cache a bypassare la versione memorizzata nella cache della pagina, risultando in un cache miss. Invece di servire il contenuto già disponibile, il server lo rigenera o lo recupera di nuovo, portando a uno spreco di risorse e a tempi di caricamento della pagina più lenti.

Perché non rimuoviamo semplicemente tutti i parametri URL? Non tutti i cache miss sono negativi—alcuni parametri cambiano genuinamente il contenuto della pagina, come le query di ricerca (?q=laptops) o i filtri dinamici (?color=blue). Questi miss assicurano che gli utenti vedano risultati accurati e personalizzati.

La chiave è differenziare tra i parametri che influenzano il contenuto e quelli che non lo fanno. 

Cloudflare Workers

I Cloudflare Workers ti consentono di intercettare e manipolare le richieste sull'edge. Questo li rende uno strumento ideale per ripulire i parametri di tracciamento prima che le richieste raggiungano il tuo server di origine. Ecco come implementarlo:

Il codice

Di seguito è riportato lo script completo per rimuovere i parametri di tracciamento comuni:

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
}

Come funziona

• Intercettare le richieste: La funzione addEventListener('fetch') ascolta le richieste HTTP in arrivo.
• Analizzare l'URL: L'API URL analizza l'URL della richiesta, facilitando la manipolazione dei parametri della query.
• Identificare i parametri di tracciamento: Un'espressione regolare (regex) corrisponde ai parametri di tracciamento comuni come utm_, gclid, fbclid e altri.
• Rimuovere le corrispondenze: Il metodo searchParams.forEach() itera su tutti i parametri della query. Qualsiasi parametro che corrisponde alla regex viene rimosso utilizzando url.searchParams.delete().
• Recuperare l'URL pulito: L'URL modificato viene utilizzato per recuperare la risposta, che viene poi restituita all'utente. 

Distribuzione

1. Accedi a Cloudflare: Accedi alla tua dashboard di Cloudflare.
2. Crea un Worker: Non navigare ancora sul tuo sito. Passa alla sezione Workers e crea un nuovo Worker.
   
3. Assegna un nome al worker e distribuiscilo.  Questo passaggio potrebbe sembrare un po' controintuitivo ma non preoccuparti. Dai semplicemente un nome al tuo worker vuoto 'hello world' e clicca su deploy.
     
4. Modifica il tuo worker. Nella pagina successiva clicca su Edit Code 
   
5. Incolla lo script: Copia e incolla lo script precedente nell'editor. Quindi clicca su deploy
   
6. Associa il Worker a una Route: Ora torna indietro e naviga sul tuo sito in CloudFlare. Clicca su worker routes e poi su 'Add Route'. Seleziona il worker appena creato e applicalo al tuo sito!
   

Vantaggi

• Caching migliorato: URL più puliti garantiscono un uso più efficace delle edge e browser cache.
• Controllo totale! Sebbene molte soluzioni di caching abbiano la propria configurazione, è sempre meglio avere il controllo totale. In questo modo non rimuoviamo i parametri che vogliamo mantenere e ci assicuriamo di rimuovere quelli che interferiscono con la cache del sito

Personalizzazione

Puoi modificare facilmente la regex per includere o escludere parametri specifici in base alle tue esigenze. Ad esempio, se vuoi preservare alcuni parametri utm_, puoi semplicemente rimuoverli dalla regex!

Come trovare quali parametri URL rimuovere

Trovare quali parametri URL rimuovere è facile se usi lo strumento giusto. Strumenti di RUM Tracking come CoreDash monitorano il tuo sito 24/7 e registrano tutte le query string e il loro impatto sulle prestazioni. In CoreDash naviga semplicemente su Largest Contentful Paint e visualizza i risultati per query string!