Takip kodu, her oturumun arkasındaki kuruluşu tanımlayan, edge önbellekli birinci taraf bir yoldan sunulan birkaç kilobaytlık küçük bir asenkron betiktir. Doğru yüklendiğinde varlığını hiç fark etmezsiniz. Yanlış yüklendiğinde ise yükleyicinin gecikmeli yüklenen (lazy-loaded) bir bileşenin içinde kaldığını keşfetmeden önce, tanımlanan şirketlerin neden eksik olduğunu hata ayıklayarak bir hafta harcarsınız. Bu kılavuz, o bir haftayı kaybetmenizi önler.
Herhangi bir şey yapıştırmadan önce üç ilke
- Yükleyici kod, site genelindeki HTML head bölümünde yer almalıdır. Alt bilgide (footer), belirli bir sayfa şablonunda veya yalnızca pazarlama sayfalarında oluşturulan bir bileşende değil. Her sayfada, head içinde.
- Yükleyici varsayılan olarak asenkrondur (async). Çalıştırılma zamanını değiştiren bir defer/async eklemesi yapmayın; sunulan nitelikler test ettiğimiz niteliklerdir.
- Tam olarak bir kez yükleyin. Aynı sayfadaki iki yükleyici kopyası verilerinizi iki katına çıkarmaz; istekleri iki katına çıkarır ve hata ayıklamayı zorlaştırır.
WordPress
WordPress'te en temiz yükleme, tema düzenlemelerinden kaçınmaktır. Bir header-scripts eklentisi kullanın (bilinen eklentilerden herhangi biri iş görür), yükleyiciyi "head içindeki betikler" (scripts in head) alanına yapıştırın, kaydedin ve tüm sayfa önbelleğini temizleyin. Eklenti istemiyorsanız, wp_head eklentisine 5 öncelikle bağlanan küçük bir mu-plugin dosyası ekleyin; böylece yükleyici analitik etiketlerinden önce yer alır. Bir sayfa veya yazı gövdesine yapıştırmayın — WordPress betik etiketini temizleyecektir.
WordPress'e özgü bir kontrol: Tam sayfa önbelleği çalıştırıyorsanız (LiteSpeed, WP Rocket, W3 Total Cache), yüklemeden sonra önbelleği temizleyin. Yüklemeden önceki önbelleğe alınmış HTML, yükleyiciyi içermeyecektir.
Shopify
Shopify, tema HTML'ini theme.liquid içine yerleştirir. Shopify yöneticinizde Online Mağaza → Temalar → Eylemler → Kodu düzenle → theme.liquid adımlarını izleyin ve yükleyiciyi kapanış </head> etiketinin hemen önüne yapıştırın. Kaydedin. Hepsi bu — eklenti gerekmez, ödeme betiği gerekmez (ödeme sayfası zaten şirket düzeyinde tanımlama için kapsam dışındadır).
Önce bir temanın kopyasını oluşturun
theme.liquid dosyasını düzenlemeden önce Eylemler → Kopyasını Oluştur seçeneğini kullanın. Bir şeyler yanlış giderse tek tıkla geri yükleyebilirsiniz. Bu, önerilen her Shopify ekibini kurtaran beş saniyelik bir alışkanlıktır.
Webflow
Webflow → Site Ayarları → Özel Kod → Head Kodu. Yükleyiciyi yapıştırın. Kaydedin. Siteyi yayınlayın. Head kodu küresel olarak tüm sayfalara uygulanır, bu da tam olarak istediğiniz şeydir. Yükleyiciyi sayfa düzeyindeki bir gömülü koda yapıştırmayın — yalnızca o tek sayfayı takip edersiniz.
Google Tag Manager
GTM iki uyarı dışında sorunsuz çalışır. İlk olarak, tetikleyicisi "Tüm Sayfalar" (All Pages) olarak ayarlanmış bir Özel HTML etiketi kullanın; böylece yükleyici her sayfa görüntülemesinde çalışır. İkincisi, etiket önceliğini, ilk yükü yavaşlatabilecek diğer analitik etiketlerinden önce tetiklenecek şekilde yeterince yüksek tutun. GTM kullanıcıları genellikle head kısmına dört veya beş etiket ekler; yükleyici küçüktür, ancak ilk istekte tanımlama yapmak istiyorsanız etiket tetikleme sırası önemlidir.
Rıza modu uyarısı: GTM'i yalnızca izin verildikten sonra analitik etiketlerini tetikleyen bir rıza banner'ı arkasında çalıştırıyorsanız, şirket düzeyinde tanımlamayı aynı engelin arkasına koymayın — çerez kullanmaz veya ziyaretçinin cihazında veri depolamaz, bu nedenle aynı rıza katmanını gerektirmez. Etiketi, kesinlikle gerekli etiketlerinizle birlikte hemen tetiklenecek şekilde yapılandırın.
Düz HTML / özel mimariler
Özel yazılmış bir site veya adını belirtmediğimiz bir çerçeve (framework) için, yükleyiciyi temel şablonunuzun (her sayfada oluşturulan dosya) <head> öğesinin içine yapıştırın. Yeniden derleyin ve yayınlayın. Statik site oluşturucuları için yükleyici, site genelindeki düzen (layout) dosyasında yer alır (Next.js'te bu, strategy="afterInteractive" ile uygulama düzeyindeki düzende bir <Script>'tir; Astro'da <BaseHead> bileşeni; 11ty'de temel şablon parçası). Bileşen düzeyinde bir betik olarak eklerseniz, yalnızca o bileşeni içeren sayfalar raporlanır.
Tek sayfa uygulamaları (SPA) — dikkat edilmesi gereken nokta
Bir SPA'da ilk sayfa görüntülemesi, sayfa ilk yüklendiğinde yükleyici tarafından yakalanır. Sonraki istemci tarafı gezintileri, tarayıcı açısından otomatik sayfa görüntülemeleri değildir. Yükleyicimiz varsayılan olarak History API'yi dinler; böylece geri/ileri ve pushState tabanlı gezintiler tarafınızdan herhangi bir kod gerekmeden yeni sayfa görüntülemeleri olarak kaydolur. SPA'nız History API'yi devre dışı bırakan standart dışı bir yönlendirici kullanıyorsa (nadir fakat mümkündür), rota değişiminde dokümantasyonda belirtilen küçük sayfa görüntüleme işlevini çağırın — dokümanlarda başvurulan üç satırlık kod.
Yüklemeyi iki dakikada doğrulayın
Doğrulama isteğe bağlı değildir. Yükleyiciyi yüklediğiniz sekmeyi kapatmadan önce yapın; hatalı bir yüklemeyi yapıştırdıktan beş dakika sonra yakalamak çok kolaydır, beş gün sonra yakalamak ise öyle değildir.
- Sitenizi gizli pencerede açın (böylece önbelleğe alınan varlıklar kafanızı karıştırmaz).
- Geliştirici Araçları (DevTools) → Ağ (Network) sekmesini açın, "l5e" veya yükleyici yolu ile filtreleyin.
- Sayfayı yeniden yükleyin. Yükleyiciye yapılan bir istek ve ardından küçük bir tanımlama sinyali (beacon) görmelisiniz. Her ikisi de 200 durum koduna sahip olmalıdır. Yükleyici yanıt üstbilgileri, s-maxage ve stale-while-revalidate içeren bir cache-control içermelidir.
- İkinci bir sayfaya gidin. Bir tanımlama sinyalinin daha tetiklendiğini görmelisiniz, yükleyici yeniden indirilmemelidir (304 dönecektir).
- lead.box panelinize geri dönün, canlı ziyaretçi akışını açın ve test ziyaretinizin göründüğünü doğrulayın. Görünüyorsa yükleme tamamlanmıştır.
Sık yapılan hatalar — ilk kontrol edilecek tablo
| Belirti | Muhtemel neden | Çözüm |
|---|---|---|
| Hiç canlı ziyaret yok | Yükleyici head bölümünde eksik veya yanlış şablonda | Yükleyiciyi site genelindeki head şablonuna taşıyın |
| Canlı ziyaretler yalnızca bir bölümden geliyor | Yükleyici küresel değil, sayfa düzeyinde gömülü kodda | Küresel head / tema üstbilgisine taşıyın |
| Yükleyici yükleniyor ancak tanımlama sinyali yok | Rıza banner'ı üçüncü taraf betikleri çok agresif engelliyor | Banner'ı kesinlikle gerekli betiklere izin verecek şekilde yapılandırın; yükleyici rıza gerektirmez |
| Sayfa görüntüleme başına çift sinyal | Yükleyici iki kez yüklenmiş (tema + eklenti/etiket) | Birini kaldırın |
| Yüklemeden sonra ilk içerikli boyama (first paint) yavaş | Yükleyici kritik CSS'ten önce yerleştirilmiş | async niteliğinin mevcut olduğunu doğrulayın; kritik CSS ön yüklemesinden sonra yerleştirin |
| SPA yalnızca ilk sayfayı raporluyor | Özel yönlendirici History API'yi devre dışı bırakıyor | Rota değişiminde dokümante edilen pageview() işlevini çağırın |
| Yükleyici olmadan eski HTML sunuluyor | Yüklemeden sonra tam sayfa önbelleği temizlenmemiş | Önbelleği temizleyin; gizli pencerede doğrulayın |
Performans notu — edge önbellekli yükleyici
Yükleyici, s-maxage=300 ve stale-while-revalidate ile edge önbelleğimize vekilleştirilmiş birinci taraf bir yoldan sunulur. Pratikte bu, yükleyicinin edge PoP başına her beş dakikada bir çekildiği ve ardından gelen her ziyaretçiye önbellekten sunulduğu anlamına gelir. Bayt ağırlığı ve engelleme etkisi o kadar küçüktür ki üzerine ek yükleme mantığı eklemenizi önermeyiz.
Ne zaman yardım istemelisiniz
Doğrulama adımlarını uyguladıysanız ve hala bir şeyler yolunda değilse, onuncu günde değil, onuncu dakikada sizden haber almayı tercih ederiz. Üç şey hazırlayın: site URL'si, Geliştirici Araçları Ağ sekmesinin yükleyici yoluna göre filtrelenmiş bir ekran görüntüsü ve yükleme yaptığınız platformun adı. Bu, neredeyse tüm yükleme sorunlarını ilk yanıtta teşhis etmek için yeterlidir.
Published by
lead.box Team
More articles
lead.box'ı kendi trafiğinizde görün
Ücretsiz başlayın — kart bilgisi ya da satış görüşmesi gerekmez. Rehberli bir tur isterseniz 20 dakikalık bir tanıtım planlayın.