Entfernen von Tracking-Parametern mit Cloudflare Workers

Entfernen von Tracking-Parametern mit Cloudflare Workers

Tracking-Parameter wie utm_, gclid und fbclid URL-Parameter können von Vermarktern und Unternehmen verwendet werden, um Daten und Erkenntnisse über ihre Online-Kampagnen und das Benutzerverhalten zu sammeln. Für Core Web Vitals können sie ein Albtraum sein, da sie dazu neigen, die Caching-Funktionalität zu beeinträchtigen! Wenn Sie diese Tracking-Parameter bereinigen möchten, ohne Ihre Analysen zu beeinträchtigen, bietet Cloudflare Workers eine leichtgewichtige und skalierbare Lösung.

In diesem Blogbeitrag werde ich ein einfaches Cloudflare Worker-Skript durchgehen, um Tracking-Parameter aus eingehenden Anforderungen zu entfernen und gleichzeitig die Kernfunktionalität Ihrer Website zu erhalten.

Das Caching-Problem mit Tracking-Parametern

Wenn Caching nicht richtig konfiguriert ist, verursachen URL-Parameter Cache-Misses. Wenn Caching-Systeme Seiten speichern, verlassen sie sich auf die URL als Cache-Schlüssel. Wenn eine URL Tracking-Parameter enthält (wie ?utm_source=google oder ?ref=partner), machen diese Parameter die URL eindeutig, auch wenn der Inhalt identisch ist. Ohne ordnungsgemäße Konfiguration zwingt diese Eindeutigkeit den Server oder Edge-Cache, die zwischengespeicherte Version der Seite zu umgehen, was zu einem Cache-Miss führt. Anstatt den bereits verfügbaren Inhalt bereitzustellen, generiert oder ruft der Server ihn erneut ab, was zu verschwendeten Ressourcen und langsameren Seitenladezeiten führt.

Warum entfernen wir nicht einfach alle URL-Parameter? Nicht alle Cache-Misses sind schlecht – einige Parameter ändern tatsächlich den Seiteninhalt, wie z. B. Suchanfragen (?q=laptops) oder dynamische Filter (?color=blue). Diese Misses stellen sicher, dass Benutzer genaue, personalisierte Ergebnisse sehen.

Der Schlüssel liegt darin, zwischen Parametern zu unterscheiden, die den Inhalt beeinflussen, und solchen, die dies nicht tun. 

Cloudflare Workers

Cloudflare Workers ermöglichen es Ihnen, Anforderungen am Edge abzufangen und zu manipulieren. Dies macht es zu einem idealen Werkzeug, um Tracking-Parameter zu bereinigen, bevor Anforderungen Ihren Ursprungsserver erreichen. So implementieren Sie es:

Der Code

Unten ist das vollständige Skript zum Entfernen gängiger Tracking-Parameter:

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

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

  // Definieren Sie einen Regex, um utm_, gclid und fbclid Query-Parameter abzugleichen
  const regex = /^(utm_|gad_|gclid|fbclid|srsltid|msclkid|dclid|referrer)/

  // Passende Query-Parameter entfernen
  url.searchParams.forEach((value, key) => {
    if (regex.test(key)) {
      url.searchParams.delete(key)
    }
  })

  // Die Antwort von der modifizierten URL abrufen
  const response = await fetch(url.toString(), request)

  return response
}

Wie es funktioniert

• Anforderungen abfangen: Die addEventListener('fetch') Funktion lauscht auf eingehende HTTP-Anforderungen.
• Die URL parsen: Die URL-API parst die Anforderungs-URL, was die Manipulation von Query-Parametern erleichtert.
• Tracking-Parameter identifizieren: Ein regulärer Ausdruck (Regex) gleicht gängige Tracking-Parameter wie utm_, gclid, fbclid und andere ab.
• Treffer entfernen: Die searchParams.forEach() Methode iteriert über alle Query-Parameter. Jeder Parameter, der dem Regex entspricht, wird mit url.searchParams.delete() entfernt.
• Bereinigte URL abrufen: Die modifizierte URL wird verwendet, um die Antwort abzurufen, die dann an den Benutzer zurückgegeben wird. 

Bereitstellung

1. Bei Cloudflare anmelden: Melden Sie sich bei Ihrem Cloudflare-Dashboard an.
2. Einen Worker erstellen: Navigieren Sie noch nicht zu Ihrer Website. Navigieren Sie zum Bereich Workers und erstellen Sie einen neuen Worker.
   
3. Benennen Sie den Worker und stellen Sie ihn bereit.  Dieser Schritt mag etwas kontraintuitiv erscheinen, aber keine Sorge. Benennen Sie einfach Ihren leeren 'hello world' Worker und klicken Sie auf Bereitstellen.
     
4. Bearbeiten Sie Ihren Worker. Klicken Sie auf der nächsten Seite auf Code bearbeiten 
   
5. Fügen Sie das Skript ein: Kopieren Sie das obige Skript und fügen Sie es in den Editor ein. Klicken Sie dann auf Bereitstellen
   
6. Binden Sie den Worker an eine Route: Gehen Sie nun zurück und navigieren Sie zu Ihrer Website in CloudFlare. Klicken Sie auf Worker-Routen und dann auf 'Route hinzufügen'. Wählen Sie den neu erstellten Worker aus und wenden Sie ihn auf Ihre Website an!
   

Vorteile

• Verbessertes Caching: Sauberere URLs sorgen für eine effektivere Nutzung von Edge- und Browser-Caches.
• Volle Kontrolle! Während viele Caching-Lösungen ihre eigene Konfiguration haben, ist es immer besser, die volle Kontrolle zu haben. Auf diese Weise entfernen wir nicht die Parameter, die wir behalten möchten, und stellen sicher, dass wir diejenigen entfernen, die den Site-Cache stören

Anpassung

Sie können den Regex einfach ändern, um bestimmte Parameter basierend auf Ihren Bedürfnissen einzuschließen oder auszuschließen. Wenn Sie beispielsweise bestimmte utm_ Parameter beibehalten möchten, können Sie diese einfach aus dem Regex entfernen!

So finden Sie heraus, welche URL-Parameter entfernt werden sollen

Herauszufinden, welche URL-Parameter entfernt werden sollen, ist einfach, wenn Sie das richtige Werkzeug verwenden. RUM-Tracking-Tools wie CoreDash überwachen Ihre Website rund um die Uhr und protokollieren alle Query-Strings und deren Auswirkungen auf die Leistung. Navigieren Sie in CoreDash einfach zu Largest Contentful Paint und sehen Sie sich die Ergebnisse nach Query-String an!