Cloudflare Workers ile İzleme Parametrelerini Temizleme

Cloudflare Workers ile İzleme Parametrelerini Temizleme

utm_, gclid ve fbclid gibi izleme URL parametreleri, pazarlamacılar ve işletmeler tarafından çevrimiçi kampanyaları ve kullanıcı davranışları hakkında veri ve içgörü toplamak için kullanılabilir. Core Web Vitals için bu parametreler bir kabus olabilir çünkü önbellekleme işlevselliğini bozma eğilimindedirler! Analitiklerinizi bozmadan bu izleme parametrelerini temizlemek istiyorsanız, Cloudflare Workers hafif ve ölçeklenebilir bir çözüm sunar.

Bu blog yazısında, sitenizin temel işlevselliğini korurken gelen isteklerden izleme parametrelerini temizlemek için basit bir Cloudflare Worker betiğini anlatacağım.

İzleme Parametrelerinin Önbellekleme Sorunu

Önbellekleme düzgün yapılandırılmamışsa URL parametreleri önbellek kaçırmalarına neden olur. Önbellekleme sistemleri sayfaları depolarken, önbellek anahtarı olarak URL'ye güvenirler. Bir URL izleme parametreleri içeriyorsa (?utm_source=google veya ?ref=partner gibi), bu parametreler içerik aynı olsa bile URL'yi benzersiz kılar. Uygun yapılandırma olmadan, bu benzersizlik sunucuyu veya uç önbelleği sayfanın önbelleğe alınmış sürümünü atlamaya zorlar ve bu da önbellek kaçırmasına neden olur. Zaten mevcut olan içeriği sunmak yerine, sunucu içeriği yeniden oluşturur veya tekrar getirir, bu da kaynak israfına ve daha yavaş sayfa yüklenme sürelerine yol açar.

Neden tüm URL parametrelerini kaldırmıyoruz? Tüm önbellek kaçırmaları kötü değildir—bazı parametreler sayfa içeriğini gerçekten değiştirir, örneğin arama sorguları (?q=laptops) veya dinamik filtreler (?color=blue). Bu kaçırmalar, kullanıcıların doğru ve kişiselleştirilmiş sonuçları görmesini sağlar.

Önemli olan, içeriği etkileyen parametrelerle etkilemeyenleri birbirinden ayırt etmektir. 

Cloudflare Workers

Cloudflare Workers, istekleri uçta yakalamanıza ve değiştirmenize olanak tanır. Bu, izleme parametrelerini istekler kaynak sunucunuza ulaşmadan önce temizlemek için ideal bir araç olmasını sağlar. İşte nasıl uygulayacağınız:

Kod

Aşağıda yaygın izleme parametrelerini temizlemek için tam betik bulunmaktadır:

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
}

Nasıl Çalışır

• İstekleri Yakalama: addEventListener('fetch') fonksiyonu gelen HTTP isteklerini dinler.
• URL'yi Ayrıştırma: URL API'si istek URL'sini ayrıştırır ve sorgu parametrelerini kolayca değiştirmeyi sağlar.
• İzleme Parametrelerini Tanımlama: Bir düzenli ifade (regex) utm_, gclid, fbclid ve diğerleri gibi yaygın izleme parametrelerini eşleştirir.
• Eşleşmeleri Kaldırma: searchParams.forEach() yöntemi tüm sorgu parametreleri üzerinde yineleme yapar. Regex ile eşleşen herhangi bir parametre url.searchParams.delete() kullanılarak kaldırılır.
• Temiz URL'yi Getirme: Değiştirilen URL, yanıtı getirmek için kullanılır ve ardından kullanıcıya döndürülür. 

Dağıtım

1. Cloudflare'a giriş yapın: Cloudflare kontrol panelinize giriş yapın.
2. Bir Worker Oluşturun: Henüz sitenize gitmeyin. Workers bölümüne gidin ve yeni bir Worker oluşturun.
   
3. Worker'a isim verin ve dağıtın.  Bu adım biraz mantık dışı görünebilir ama endişelenmeyin. Boş 'hello world' worker'ınıza isim verin ve dağıt'a tıklayın.
     
4. Worker'ınızı düzenleyin. Sonraki sayfada Kodu Düzenle'ye tıklayın 
   
5. Betiği Yapıştırın: Yukarıdaki betiği kopyalayıp editöre yapıştırın. Ardından dağıt'a tıklayın
   
6. Worker'ı bir Rotaya Bağlayın: Şimdi geri dönün ve CloudFlare'da sitenize gidin. Worker rotalarına ve ardından 'Rota Ekle'ye tıklayın. Yeni oluşturulan worker'ı seçin ve sitenize uygulayın!
   

Faydalar

• Geliştirilmiş Önbellekleme: Daha temiz URL'ler, uç ve tarayıcı önbelleklerinin daha etkili kullanılmasını sağlar.
• Tam kontrol! Birçok önbellekleme çözümünün kendi yapılandırması olsa da tam kontrole sahip olmak her zaman daha iyidir. Bu şekilde tutmak istediğimiz parametreleri çıkarmaz ve site önbelleğine müdahale edenleri kaldırdığımızdan emin oluruz

Özelleştirme

İhtiyaçlarınıza göre belirli parametreleri dahil etmek veya hariç tutmak için regex'i kolayca değiştirebilirsiniz. Örneğin, belirli utm_ parametrelerini korumak istiyorsanız, bunları regex'ten kaldırmanız yeterlidir!

Hangi URL parametrelerinin temizleneceğini nasıl bulabilirsiniz

Doğru aracı kullanırsanız hangi URL parametrelerini temizleyeceğinizi bulmak kolaydır. CoreDash gibi RUM izleme araçları sitenizi 7/24 izler ve tüm sorgu dizelerini ve bunların performans üzerindeki etkisini kaydeder. CoreDash'te sadece Largest Contentful Paint'e gidin ve sonuçları sorgu dizesine göre görüntüleyin!