Etiketleri ve etiket yöneticilerini Core Web Vitals için optimize edin.
Etiketler, genellikle bir etiket yöneticisi aracılığıyla siteye eklenen üçüncü taraf kodunun snippet'leridir. Etiketler, en yaygın şekilde pazarlama ve analiz için kullanılır.
Etiketlerin ve etiket yöneticilerinin performans üzerindeki etkisi siteden siteye büyük farklılık gösterir. Etiket yöneticileri bir zarfla karşılaştırılabilir: Etiket yöneticisi bir kapsayıcı sağlar, ancak bunu ne ile dolduracağınıza ve nasıl kullanacağınız çoğunlukla size bağlıdır.
Bu makalede, etiketleri ve etiket yöneticilerini performans ve Web Verileri için optimize etme teknikleri açıklanmaktadır. Bu makalede Google Etiket Yöneticisi'ne atıfta bulunulsa da, tartışılan fikirlerin çoğu diğer etiket yöneticileri için de geçerlidir.
Core Web Vitals'a Etkisi
Etiket Yöneticileri genellikle sayfanızı hızlı bir şekilde yüklemek ve duyarlı tutmak için gereken kaynakları kullanarak Core Web Vitals'ınızı dolaylı olarak etkileyebilir. Bant genişliği, siteleriniz için Etiket Yöneticisi JavaScript'ini veya bunun sonucunda yapılacak sonraki çağrıları indirmek için harcanabilir. Ana iş parçacığındaki CPU süresi, etiket yöneticisi ve etiketlerde bulunan JavaScript'i değerlendirip yürütmek için harcanabilir.
Largest Contentful Paint (LCP), kritik sayfa yükleme süresinde bant genişliği çakışmasına karşı savunmasızdır. Ayrıca, ana iş parçacığının engellenmesi LCP oluşturma süresini geciktirebilir.
Cumulative Layout Shift (CLS), kritik kaynakların ilk oluşturma işleminden önce yüklenmesini geciktirerek veya etiket yöneticilerinin sayfaya içerik yerleştirmesinden etkilenebilir.
Sonraki Boyamayla Etkileşim (INP), ana iş parçacığında CPU uyuşmazlığından etkilenebilir. Ayrıca, etiket yöneticilerinin boyutu ile daha düşük INP puanları arasında bir bağlantı olduğunu gördük.
Etiket türleri
Etiketlerin performans üzerindeki etkisi, etiket türüne göre değişir. Genel olarak, resim etiketleri ("pikseller") en yüksek performansı gösterir ve bunları özel şablonlar, son olarak da özel HTML etiketleri izler. Tedarikçi etiketleri, izin verdikleri işlevlere göre değişiklik gösterir.
Bununla birlikte, bir etiketi kullanma şeklinizin etiketin performans etkisini büyük ölçüde etkilediğini unutmayın. "Pikseller" büyük ölçüde bu etiket türünün doğası gereği kullanım şekillerine sıkı kısıtlamalar getirdiği için yüksek performans gösterir. Özel HTML etiketleri performans açısından her zaman kötü değildir ancak kullanıcılara sundukları özgürlük düzeyi nedeniyle performans açısından kötü bir şekilde kötüye kullanılabilirler.
Etiketleri düşünürken ölçeği aklınızda bulundurun: Tek bir etiketin performans etkisi ihmal edilebilir düzeyde olabilir ancak aynı sayfada onlarca veya yüzlerce etiket kullanıldığında önemli hale gelebilir.
Tüm komut dosyaları etiket yöneticisi kullanılarak yüklenmemelidir
Etiket yöneticileri genellikle çerez bildirimleri, hero resimler veya site özellikleri gibi kullanıcı deneyiminin görsel veya işlevsel yönlerini anında uygulayan kaynakları yüklemek için iyi bir mekanizma değildir. Bu kaynakları yüklemek için bir etiket yöneticisi kullanılması genellikle teslimatları geciktirir. Bu, kullanıcı deneyimi için olumsuz bir durumdur ve LCP, CLS gibi metrikleri artırabilir. Ayrıca, bazı kullanıcıların etiket yöneticilerini engellediğini de unutmayın. Kullanıcı deneyimi özelliklerini uygulamak için bir etiket yöneticisi kullanmak, bazı kullanıcılarınız için bozuk bir web sitesine yol açabilir.
Özel HTML etiketlerinde dikkatli olun.
Özel HTML etiketleri yıllardır kullanılmaktadır ve çoğu sitede yoğun olarak kullanılmaktadır. Adına rağmen, bu etiketin ana kullanımı bir sayfaya özel <script> öğeleri eklemek olduğundan, özel HTML etiketleri kendi kodunuzu birkaç kısıtlamayla girmenize olanak tanır.
Özel HTML etiketleri çok çeşitli şekillerde kullanılabilir ve performans üzerindeki etkileri önemli ölçüde değişiklik gösterir. Sitenizin performansını ölçerken çoğu aracın, Özel HTML etiketinin performans etkisini etiketin kendisiyle değil, etiketi yerleştiren etiket yöneticisiyle ilişkilendireceğini unutmayın.
Özel HTML etiketleri, bir öğeyi çevreleyen sayfaya yerleştirebilir. Sayfaya öğe ekleme işlemi, performans sorunlarına ve bazı durumlarda düzen kaymalarına da neden olabilir.
- Çoğu durumda, sayfaya bir öğe eklenirse tarayıcının sayfadaki her bir öğenin boyutunu ve konumunu yeniden hesaplaması gerekir. Bu işlem düzen olarak bilinir. Tek bir düzenin performans etkisi minimum düzeydedir ancak düzen çok fazla olduğunda performans sorunlarına yol açabilir. Bu fenomenin etkisi, alt uç cihazlarda ve çok sayıda DOM öğesi içeren sayfalarda daha fazladır.
- Çevreleyen alan oluşturulduktan sonra DOM'a görünür bir sayfa öğesi eklenirse bu durum bir düzen kaymasına neden olabilir. Bu durum etiket yöneticilerine özgü değildir. Ancak etiketler genellikle sayfanın diğer bölümlerinden daha sonra yüklendiğinden, çevresindeki sayfa oluşturulduktan sonra etiketlerin DOM'ye eklenmesi yaygın bir durumdur.
Özel Şablonlar kullanabilirsiniz
Özel şablonlar, Özel HTML etiketleriyle aynı işlemlerin bazılarını destekler ancak komut dosyası yerleştirme ve piksel yerleştirme gibi yaygın kullanım alanları için API'ler sağlayan JavaScript'in korumalı alana alınmış bir sürümünü temel alır. Adından da anlaşılabileceği gibi, bu şablonu performansı göz önünde bulundurarak yapabilecek deneyimli bir kullanıcı tarafından bir şablon oluşturulmasına olanak tanır. Bu durumda daha az teknik bilgiye sahip kullanıcılar şablonu kullanabilir. Bu, tam Özel HTML erişimi sağlamaktan genellikle daha güvenlidir.
Özel şablonlara uygulanan daha büyük kısıtlamalar nedeniyle, bu etiketlerin performans veya güvenlik sorunları sergileme olasılığı çok daha düşüktür. Ancak, yine de aynı nedenlerle, özel şablonlar tüm kullanım durumlarında çalışmaz.
Komut dosyalarını doğru şekilde ekleyin
Komut dosyası eklemek için etiket yöneticisi kullanmak çok yaygın bir kullanım alanıdır. Bunu yapmanın önerilen yolu Özel Şablon ve injectScript API kullanmaktır.
Mevcut bir Özel HTML etiketini dönüştürmek için injectScript API'sini kullanma hakkında bilgi edinmek için Mevcut bir etiketi dönüştürme bölümüne bakın.
Özel HTML etiketi kullanmanız gerekiyorsa, göz önünde bulundurmanız gereken bazı noktalar aşağıda belirtilmiştir:
- Kitaplıklar ve büyük üçüncü taraf komut dosyaları, komut dosyası içeriğini doğrudan etikete yapıştırmak yerine harici bir dosya (örneğin,
<script src="external-scripts.js">) indiren bir komut dosyası etiketi aracılığıyla yüklenmelidir.<script>etiketinin kullanımından vazgeçilmesi, komut dosyası içeriğinin indirilmesi için ayrı bir döngüyü ortadan kaldırsa da bu uygulama, kapsayıcı boyutunu artırır ve komut dosyasının tarayıcı tarafından ayrı olarak önbelleğe alınmasını engeller. - Birçok tedarikçi,
<script>etiketlerini<head>etiketinin en üstüne yerleştirmeyi öneriyor. Ancak etiket yöneticisi aracılığıyla yüklenen komut dosyaları için bu öneri genellikle gereksizdir: Çoğu durumda tarayıcı, etiket yöneticisi yürütüldüğünde<head>öğesini ayrıştırmayı zaten tamamlamıştır.
Pikselleri kullan
Bazı durumlarda üçüncü taraf komut dosyaları, resim veya iframe "pikselleri" ile değiştirilebilir. Pikseller, komut dosyası tabanlı eşdeğerleriyle karşılaştırıldığında daha az işlev destekleyebildiğinden bu nedenle genellikle daha az tercih edilen bir uygulama olarak görülür. Ancak, pikseller etiket yöneticilerinin içinde kullanıldığında tetikleyicilerde etkinleşebildikleri ve farklı değişkenleri geçirebildikleri için daha dinamik olabilir. Tetiklendikten sonra herhangi bir JavaScript yürütme işlemi yapılmadığı için bunlar, en iyi performans ve en güvenli etiket türüdür. Piksellerin kaynak boyutu çok küçüktür (1 KB'tan az) ve düzen kaymasına neden olmaz.
Piksel desteği hakkında daha fazla bilgi için üçüncü taraf sağlayıcınızla
iletişime geçin. Ayrıca, bu etiketlerin kodunu <noscript> etiketi için incelemeyi de deneyebilirsiniz.
Tedarikçi firma pikselleri destekliyorsa bunları genellikle <noscript> etiketinin içine ekler.
Piksellere alternatifler
Pikseller büyük ölçüde, sunucu yanıtının alakalı olmadığı durumlarda ( örneğin, analiz sağlayıcılarına veri gönderirken) HTTP isteği göndermenin en ucuz ve en güvenilir yollarından biri oldukları için popüler hale geldi. navigator.sendBeacon() ve fetch()
keepalive API'leri aynı kullanım alanını ele alacak şekilde tasarlanmıştır ancak muhtemelen piksellerden daha güvenilirdir.
Pikselleri kullanmaya devam etmenin hiçbir sakıncası yoktur. Pikseller iyi desteklenir ve performans üzerindeki etkisi minimum düzeydedir. Ancak kendi işaretçilerinizi oluşturuyorsanız bu API'lerden birini kullanmayı düşünmeye değer.
sendBeacon()
navigator.sendBeacon() API, sunucu yanıtının önemli olmadığı durumlarda web sunucularına az miktarda veri göndermek için tasarlanmıştır.
const url = "https://example.com/analytics";
const data = JSON.stringify({
event: "checkout",
time: performance.now()
});
navigator.sendBeacon(url, data);
sendBeacon() sınırlı bir API'ye sahiptir: Yalnızca POST istekleri yapılmasını destekler, özel üstbilgilerin ayarlanmasını desteklemez. Tüm modern tarayıcılar tarafından desteklenir.
fetch() keepalive
keepalive, Fetch API'nin etkinlik raporlama ve analizler gibi engellemeyen istekler yapmak için kullanılmasına olanak tanıyan bir işarettir. fetch() öğesine iletilen parametrelere keepalive: true eklenmesiyle kullanılır.
const url = "https://example.com/analytics";
const data = JSON.stringify({
event: "checkout",
time: performance.now()
});
fetch(url, {
method: 'POST',
body: data,
keepalive: true
});
fetch() keepalive ve sendBeacon() birbirine çok benziyorsa
bunun nedeni ikisinin de olmasıdır. Aslında, Chromium tarayıcılarda sendBeacon() artık fetch()
keepalive temel alınarak geliştirilmiştir.
fetch() keepalive ile sendBeacon() arasında seçim yaparken, ihtiyacınız olan özellikleri ve tarayıcı desteğini göz önünde bulundurmanız önemlidir. fetch() API önemli ölçüde daha esnektir; bununla birlikte, keepalive, sendBeacon() ile karşılaştırıldığında daha az tarayıcı desteğine sahiptir.
Açıklama al
Etiketler genellikle üçüncü taraf tedarikçi firmanın yönergeleri doğrultusunda oluşturulur. Tedarikçinin kodunun ne yaptığı tam olarak belli değilse işi bilen birine sorabilirsiniz. İkinci bir görüş almak, bir etiketin performans veya güvenlik sorunları oluşturma potansiyeline sahip olup olmadığını belirlemenize yardımcı olabilir.
Etiket yöneticisinde etiketlerin bir sahiple etiketlenmesi de önerilir. Bir etiketin sahibinin kim olduğunu unutmak ve her ihtimale karşı etiketi kaldırmaktan korkmak çok kolaydır.
Tetikleyiciler
Genel olarak etiket tetikleyicilerinin optimize edilmesi, etiketlerin gereğinden fazla tetiklenmemesini sağlamak ve iş ihtiyaçları ile performans maliyetleri arasında denge kuran bir tetikleyici seçmekten oluşur.
Tetikleyiciler ise etiket yöneticisinin boyutunu ve yürütme maliyetini artıran JavaScript kodudur. Tetikleyicilerin çoğu küçük olsa da kümülatif etki artabilir. Örneğin, çok sayıda tıklama etkinliğinin veya kronometre tetikleyicilerinin olması, etiket yöneticisinin iş yükünü önemli ölçüde artırabilir.
Uygun bir tetikleyici etkinliği seçin
Bir etiketin performans etkisi sabit değildir: Genel olarak, bir etiket ne kadar erken etkinleşirse performans üzerindeki etkisi o kadar büyük olur. Kaynaklar genellikle ilk sayfa yükleme sırasında kısıtlanır. Bu nedenle, belirli bir kaynağın (veya etiketin) yüklenmesi ya da yürütülmesi, kaynakları başka bir şeyden alır.
Tüm etiketler için uygun tetikleyicilerin seçilmesi önemli olmakla birlikte, özellikle büyük kaynaklar yükleyen veya uzun komut dosyaları yürüten etiketler için önemlidir.
Etiketler, Sayfa Görüntüleme Sayısı'nda (genellikle Page load, DOM Ready, Window Loaded tarihinde) veya özel bir etkinliğe göre tetiklenebilir. Sayfa yüklemeyi etkilememek için gerekli olmayan etiketlerin Window Loaded tarihinden sonra tetiklenmesi önerilir.
Özel etkinlikleri kullanma
Özel etkinlikler, Google Etiket Yöneticisi'nin yerleşik tetikleyicilerinin kapsamına girmeyen sayfa etkinliklerine yanıt olarak tetikleyicileri etkinleştirmenize olanak tanır. Örneğin, birçok etiket sayfa görüntüleme tetikleyicilerini kullanır. Ancak, DOM Ready ile Window Loaded arasındaki süre birçok sayfa için uzun olabilir ve bu durum, bir etiket etkinleştiğinde ince ayar yapılmasını zorlaştırabilir. Özel etkinlikler bu soruna çözüm sağlar.
Özel etkinlikleri kullanmak için, önce bir özel etkinlik tetikleyicisi oluşturun ve etiketlerinizi bu tetikleyiciyi kullanacak şekilde güncelleyin.
Tetikleyiciyi etkinleştirmek için ilgili etkinliği veri katmanına aktarın.
// Custom event trigger that fires after 2 seconds
setTimeout(() => {
dataLayer.push({
'event' : 'my-custom-event'
});
}, 2000);
Belirli tetikleyici koşulları kullan
Özel tetikleyici koşulları kullanmak, bir etiketin gereksiz yere tetiklenmesini önlemeye yardımcı olur. Bu kavramı uygulamanın birçok yolu olsa da, yapabileceğiniz en basit ancak en yararlı şeylerden biri, bir etiketin yalnızca gerçekten kullanıldığı sayfalarda tetiklenmesini sağlamaktır.
Etiket etkinleşmesini sınırlamak için tetikleyici koşullarına yerleşik değişkenler de dahil edilebilir.
Ancak karmaşık tetikleyici koşulları veya istisnalarının olması işleme süresini kendi başına alır ve alır. Bu nedenle bunları çok karmaşık hale getirmeyin.
Etiket yöneticinizi uygun bir zamanda yükleyin
Etiket yöneticinizin ne zaman yükleneceğini düzenlemek, performans üzerinde önemli bir etki yaratabilir. Tetikleyiciler, nasıl yapılandırıldıklarına bakılmaksızın bir etiket yöneticisi yüklenene kadar etkinleşemez. Ayrı etiketler için iyi tetikleyiciler seçmek (yukarıda açıklandığı gibi) önemli olsa da, bu tek kararın sayfadaki tüm etiketleri etkileyeceği düşünüldüğünde, etiket yöneticinizi yüklerken deneme yapmak genellikle eşit veya daha fazla etki sağlar.
Etiket yöneticisinin daha sonra yüklenmesi bir kontrol katmanı ekler ve bu sayede etiket yöneticisi kullanıcısının yaratabileceği etkiyi fark etmeden bir etiketi çok erken yüklemesini önleyeceği için gelecekteki performans sorunlarından kaçınabilir.
Değişkenler
Değişkenler, verilerin sayfadan okunmasına olanak tanır. Bunlar tetikleyicilerde ve etiketlerde kullanışlıdır.
Tetikleyiciler gibi, değişkenler de JavaScript kodunun etiket yöneticisine eklenmesine neden olur ve bu da performans sorunlarına neden olabilir. Değişkenler, örneğin URL'nin, çerezlerin, veri katmanının veya DOM'un bölümlerini okuyabilen nispeten basit yerleşik türler olabilir. Ya da yapabilecekleri konusunda temelde sınırsız olan özel JavaScript'ler de olabilirler.
Etiket yöneticisi tarafından sürekli olarak değerlendirilmeleri gerektiği için değişkenleri basit ve minimum düzeyde tutun. Hem etiket yöneticisi komut dosyasının boyutunu hem de işleme süresini azaltmak için artık kullanılmayan eski değişkenleri kaldırın.
Etiket yönetimi
Etiketleri etkili bir şekilde kullanmak, performans sorunu riskini azaltır.
Veri katmanını kullan
Veri katmanı "Google Etiket Yöneticisi'ne aktarmak istediğiniz tüm bilgileri içerir". Daha somut olarak, sayfa hakkında bilgi içeren bir JavaScript nesne dizisidir. Etiketleri tetiklemek için de kullanılabilir.
// Contents of the data layer
window.dataLayer = [{
'pageCategory': 'signup',
'visitorType': 'high-value'
}];
// Pushing a variable to the data layer
window.dataLayer.push({'variable_name': 'variable_value'});
// Pushing an event to the data layer
window.dataLayer.push({'event': 'event_name'});
Google Etiket Yöneticisi, veri katmanı olmadan da kullanılabilir, ancak kullanılması önemle tavsiye edilir. Veri katmanı, üçüncü taraf komut dosyalarının erişilen verileri tek bir yerde birleştirme yöntemi sunar ve böylece kullanımın daha iyi görülmesini sağlar. Diğer avantajlarının yanı sıra, gereksiz değişken hesaplamalarını ve komut dosyası yürütmeyi azaltmaya yardımcı olabilir. Veri katmanı kullanılması, tam JavaScript değişkeni veya DOM erişimi vermek yerine, etiketler tarafından erişilen verileri de kontrol eder.
Yinelenen ve kullanılmayan etiketleri kaldırma
Bir etiket yöneticisi aracılığıyla eklemeye ek olarak sayfanın HTML işaretlemesine de bir etiket dahil edildiğinde yinelenen etiketler oluşabilir.
Kullanılmayan etiketler, bir tetikleyici istisnası kullanılarak engellenmek yerine duraklatılmalı veya kaldırılmalıdır. Bir etiketi duraklatmak veya kaldırmak, kodu kapsayıcıdan kaldırır. Engelleme işlemi yapmaz.
Kullanılmayan etiketler kaldırıldığında, tetikleyicilerin ve değişkenlerin de yalnızca bu etiketler tarafından kullanılmış olması halinde kaldırılıp kaldırılamayacağını görmek için bu tetikleyicilerin ve değişkenlerin incelenmesi gerekir.
İzin verilenler ve reddedilecekler listelerini kullanma
İzin ver ve reddet listeleri, bir sayfada izin verilen etiketler, tetikleyiciler ve değişkenler üzerinde son derece ayrıntılı kısıtlamalar yapılandırmanıza olanak tanır. Bu, performansla ilgili en iyi uygulamaları ve diğer politikaları zorunlu kılmaya yardımcı olmak için kullanılabilir.
İzin verme ve reddetme listeleri veri katmanı aracılığıyla yapılandırılır.
window.dataLayer = [{
'gtm.allowlist': ['<id>', '<id>', ...],
'gtm.blocklist': ['customScripts']
}];
Örneğin, Özel HTML etiketlerine, JavaScript değişkenlerine veya doğrudan DOM erişimine izin vermek mümkün değildir. Bu, veri katmanındaki verilerle yalnızca piksellerin ve önceden tanımlanmış etiketlerin kullanılabileceği anlamına gelir. Bu kesinlikle kısıtlayıcı olsa da, çok daha etkili ve güvenli bir etiket yöneticisi uygulaması ile sonuçlanabilir.
Sunucu tarafı etiketlemeyi kullanmayı düşünün
Sunucu tarafı etiketlemeye geçmek önemsiz bir iş değildir, ancak özellikle verileri üzerinde daha fazla kontrol sahibi olmak isteyen büyük siteler için dikkate alınması gerekir. Sunucu tarafı etiketleme, tedarikçi firma kodunu istemciden kaldırır ve bununla birlikte işlemeyi istemciden sunucuya yükler.
Örneğin, istemci tarafı etiketlemeyi kullanırken birden fazla analiz hesabına veri göndermek için istemcinin her uç nokta için ayrı istek başlatması gerekir. Buna karşın, sunucu tarafı etiketlemede, istemci sunucu tarafı kapsayıcısına tek bir istek gönderir ve oradan da bu veriler farklı analiz hesaplarına iletilir.
Sunucu tarafı etiketlemenin yalnızca bazı etiketlerle çalıştığını unutmayın. Etiket uyumluluğu, satıcıya bağlı olarak değişir.
Daha fazla bilgi için Sunucu tarafı etiketlemeye giriş bölümüne bakın.
Container'lar
Etiket yöneticileri genellikle kurulumları içinde birden fazla örneğe veya "kapsayıcıya" izin verir. Bu, tek bir etiket yöneticisi hesabı içinde birden fazla kapsayıcının kontrol edilmesine olanak tanır.
Sayfa başına yalnızca bir kapsayıcı kullanın
Tek bir sayfada birden fazla containers kullanmak, ek yük ve komut dosyası yürütmeye yol açtığından önemli performans sorunları oluşturabilir. En azından, temel etiket kodunun kendisini çoğaltır ve bu kod, kapsayıcının JavaScript'inin bir parçası olarak sunulduğundan, kapsayıcılar arasında tekrar kullanılamaz.
Birden çok container'ın etkili bir şekilde kullanılması nadir görülen bir durumdur. Ancak, iyi kontrol edilirse bunun işe yarayabileceği durumlar olabilir. Örneğin:
- Büyük bir kapsayıcı yerine daha hafif bir "erken yükleme" kapsayıcısı ve daha ağır bir "daha sonra yükleme" kapsayıcısı kullanma.
- Teknik bilgisi daha az kullanıcılar tarafından kullanılan kısıtlı bir container'a sahip olma; kısıtlanmış kapsayıcıda kullanılamayan etiketler için daha az kısıtlı ama daha sıkı denetime sahip bir kapsayıcı sunma.
Sayfa başına birden fazla kapsayıcı kullanmanız gerekiyorsa birden fazla kapsayıcı oluşturmak için Google Etiket Yöneticisi yönergelerini uygulayın.
Gerekirse ayrı kapsayıcılar kullanın
Bir etiket yöneticisini birden fazla mülk (örneğin, bir web uygulaması ve mobil uygulama) için kullanıyorsanız kullandığınız kapsayıcıların sayısı iş akışınızın verimliliğine yardımcı veya zarar verebilir. Bu durum performansı da etkileyebilir.
Genel anlamda, sitelerin kullanımları ve yapıları benzerse tek bir kapsayıcı, birden fazla sitede etkili bir şekilde kullanılabilir. Örneğin, bir markanın mobil ve web uygulamaları benzer işlevler sunsa da uygulamaların farklı bir şekilde yapılandırılması ve dolayısıyla ayrı kapsayıcılar aracılığıyla daha etkili bir şekilde yönetilmesi olasıdır.
Tek bir container'ı gereksiz ölçüde geniş çaplı bir şekilde yeniden kullanmaya çalışmak, etiketleri ve tetikleyicileri yönetmek için karmaşık mantığın benimsenmesini zorlayarak kapsayıcının karmaşıklığını ve boyutunu artırır.
Kapsayıcı boyutuna dikkat edin
Bir kapsayıcının boyutu, etiketleri, tetikleyicileri ve değişkenleri tarafından belirlenir. Küçük bir kapsayıcı sayfa performansını yine de olumsuz şekilde etkileyebilir ancak büyük bir kapsayıcının etki edeceği neredeyse kesindir.
Etiket kullanımınızı optimize ederken kapsayıcı boyutu, kuzey yıldızı metriğiniz olmamalıdır. Ancak, kapsayıcı boyutunun büyük olması genellikle kapsayıcının iyi yönetilmediğini ve kötüye kullanıldığını gösteren bir uyarı işaretidir.
Google Etiket Yöneticisi, kapsayıcı boyutunu 200 KB ile sınırlar ve 140 KB'tan başlayan kapsayıcı boyutu konusunda sizi uyarır. Ancak çoğu site, container'larını bundan çok daha küçük tutmayı hedeflemelidir. Bakış açısından, ortanca site kapsayıcısı yaklaşık 50 KB'tır.
Kapsayıcınızın boyutunu belirlemek için https://www.googletagmanager.com/gtag/js?id=YOUR_ID tarafından döndürülen yanıtın boyutuna bakın. Bu yanıt, Google Etiket Yöneticisi kitaplığını ve kapsayıcının içeriğini içerir. Google Etiket Yöneticisi kitaplığı kendi başına yaklaşık 33 KB sıkıştırılmıştır.
Kapsayıcı sürümlerinize ad verin
Kapsayıcı sürümü, bir kapsayıcı içeriğinin belirli bir zamandaki anlık görüntüsüdür. Anlamlı bir ad kullanmak ve metindeki anlamlı değişikliklerin kısa bir açıklamasını eklemek, gelecekteki performans sorunlarında hata ayıklamayı kolaylaştırmada önemli bir rol oynayabilir.
Etiketleme iş akışları
Etiketlerinizde yapılan değişiklikleri yönetmek, sayfa performansı üzerinde olumsuz bir etkiye neden olmamasını sağlamak açısından önemlidir.
Dağıtmadan önce etiketleri test edin
Etiketlerinizi dağıtımdan önce test etmek, sorunları (performans veya diğer) gönderimden önce yakalamanıza yardımcı olabilir.
Bir etiketi test ederken göz önünde bulundurulması gereken noktalar şunlardır:
- Etiket düzgün çalışıyor mu?
- Etiket herhangi bir düzen kaymasına neden oluyor mu?
- Etiket herhangi bir kaynak yüklüyor mu? Bu kaynakların büyüklüğü nedir?
- Etiket uzun süreli bir komut dosyasını tetikliyor mu?
Önizleme modu
Önizleme modu, etiket değişikliklerini önce herkese açık olarak dağıtmak zorunda kalmadan gerçek sitenizde test etmenizi sağlar. Önizleme modunda, etiketler hakkında bilgi sağlayan bir hata ayıklama konsolu bulunur.
Bilgilerin hata ayıklama konsolunda gösterilmesi için gereken ek yük nedeniyle, Önizleme modunda çalıştırıldığında Google Etiket Yöneticisi'nin yürütülme süresi farklı olur (biraz daha yavaştır). Bu nedenle, önizleme modunda toplanan Web Verileri ölçümleri ile üretimde toplanan verilerin karşılaştırılması önerilmez. Ancak bu tutarsızlık, etiketlerin yürütme davranışını etkilememelidir.
Bağımsız test
Etiketleri test etmeye alternatif bir yaklaşım, tek bir etikete sahip kapsayıcı (test ettiğiniz etiket) içeren boş bir sayfa ayarlamaktır. Bu test kurulumu daha az gerçekçidir ve bazı sorunları (örneğin, bir etiketin düzen değişikliklerine neden olup olmadığı) tespit etmez. Ancak, etiketin izole edilip komut dosyası çalıştırma gibi şeyler üzerindeki etkisini ölçmeyi kolaylaştırabilir. Telegraph'ın üçüncü taraf kodların performansını artırmak için bu izolasyon yaklaşımını nasıl kullandığını öğrenin.
Etiket performansını izleme
Belirli bir etiketin yürütülme süresi hakkında bilgi toplamak için Google Etiket Yöneticisi Monitoring API'si kullanılabilir. Bu bilgiler, seçiminizin bir uç noktasına raporlanır.
Daha fazla bilgi için Google Etiket Yöneticisi Monitörü oluşturma bölümüne bakın.
Kapsayıcı değişiklikleri için onay gerektir
Birinci taraf kodu, genellikle dağıtımdan önce inceleme ve test sürecinden geçer. Etiketlerinizi aynı şekilde işleyin. Bunu yapmanın bir yolu, kapsayıcı değişiklikleri için yönetici onayı gerektiren iki adımlı doğrulama eklemektir. Alternatif olarak, iki adımlı doğrulamayı zorunlu kılmak istemiyor ancak değişiklikleri takip etmek istiyorsanız seçtiğiniz kapsayıcı etkinlikleri hakkında e-posta uyarıları almak için container bildirimlerini ayarlayabilirsiniz.
Etiket kullanımını düzenli olarak denetleyin
Etiketlerle çalışmanın zorluklarından biri, etiketlerin zaman içinde birikme eğiliminde olmasıdır. Etiketler eklenir ancak nadiren kaldırılır. Etiketleri düzenli olarak denetlemek, bu eğilimi tersine çevirmenin bir yoludur. Bunu yapmak için ideal sıklık, sitenizin etiketlerinin ne sıklıkla güncellendiğine bağlıdır.
Her bir etiketi, sahibinin rahatça görülebileceği şekilde etiketlemek, söz konusu etikete kimin duyarlı olduğunun daha kolay tanımlanmasını sağlar ve etiketin hâlâ gerekli olup olmadığını söyleyebilir.
Etiketleri denetlerken tetikleyicileri ve değişkenleri de temizlemeyi unutmayın. Performans sorunlarına da kolayca neden olabilirler.
Daha fazla bilgi için Üçüncü taraf komut dosyalarını kontrol altında tutma bölümüne bakın.