Etiketleri ve etiket yöneticilerini Core Web Vitals için optimize edin.
Etiketler snippet'lerdir genellikle bir etiket yöneticisi aracılığıyla siteye eklenen üçüncü taraf kodu. 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ıklar gösterir. Etiket yöneticileri bir zarfla karşılaştırılabilir: Etiket yöneticisi, Ancak onu neyle dolduracağınıza ve onu nasıl kullanacağınıza karar verebilirsiniz.
Bu makalede, aşağıdakiler için etiketleri ve etiket yöneticilerini optimize etme teknikleri anlatılmıştır: performans ve Web Verileri. Bu makalede Google Etiket Yöneticisi'nden bahsediliyor olsa da tartışılan fikirlerin çoğu diğer etiket yöneticileri için de geçerlidir.
Core Web Vitals üzerindeki etki
Etiket Yöneticileri, sayfanızı hızlı bir şekilde yüklemek ve uyumlu tutmak için gereken kaynakları kullanarak Core Web Vitals'ı genellikle dolaylı olarak etkileyebilir. Bant genişliği, siteleriniz için etiket yöneticisi JavaScript'ini veya bunun yaptığı sonraki çağrıları indirmeye harcanabilir. Ana iş parçacığındaki CPU süresi, etiket yöneticisi ve etiketlerde bulunan JavaScript'i değerlendirmek ve yürütmek için kullanılabilir.
Largest Contentful Paint (LCP), kritik sayfa yükleme süresi sırasında 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), ilk oluşturma işleminden önce kritik kaynakların yüklenmesinin gecikmesi veya etiket yöneticilerinin sayfaya içerik yerleştirmesi nedeniyle etkilenebilir.
Sonraki Boyamayla Etkileşim (INP), ana iş parçacığında CPU çakışmasına açıktır. Bu nedenle, etiket yöneticilerinin boyutu ile daha düşük INP puanları arasında bir ilişki olduğunu gördük.
Etiket türleri
Etiketlerin performans üzerindeki etkisi etiket türüne göre değişiklik gösterir. Genel anlamda, etiketleri ("pikseller") en yüksek performansı gösteren verilerdir, bunu özel şablonlar takip eder ve Son olarak, özel HTML etiketleri. Tedarikçi firma etiketleri, kullandıkları işlevlere göre değişiklik gösterir. sağlar.
Ancak bir etiketi kullanma şeklinizin, o etiketin performansını önemli ölçüde etkilediğini unutmayın inceleyeceğiz. "Pikseller" yüksek performans gösterir. Çünkü bu etiketin yapısı türü, nasıl kullanıldıkları konusunda katı kısıtlamalar getirir; özel HTML etiketleri performans açısından her zaman kötüdür ancak özgürlük düzeyi nedeniyle kullanıcılar için performansı olumsuz etkiler.
Etiketler üzerinde düşünürken ölçeği göz önünde bulundurun: herhangi bir kapsayıcının performans üzerindeki etkisini tek bir etiket göz ardı edilebilir ancak onlarca veya yüzlerce etiketleri aynı sayfada kullanılıyor demektir.
Tüm komut dosyaları bir etiket yöneticisi kullanılarak yüklenmemelidir.
Etiket yöneticileri genellikle kullanıcı deneyiminin görsel veya işlevsel yönlerini hero resimler veya site özellikleri olabilir. Etiket Yöneticisi kullanarak bu kaynakların yüklenmesinin geciktiğini görüyoruz. Bu, kullanıcı için kötü deneyim sağlar ve LCP ve CLS gibi metrikleri de artırabilir. Ayrıca bazı kullanıcıların etiket yöneticilerini engellediğini unutmayın. Kullanıcı deneyimini uygulamak için etiket yöneticisi kullanma özellikleri bazı kullanıcılarınız için bozuk bir web sitesine neden olabilir.
Özel HTML etiketlerine dikkat edin
Özel HTML
etiketleri
yıllardır kullanılıyor ve çoğu sitede yoğun olarak kullanılmaktadır. Özel HTML
etiketleri, adına rağmen kendi kodunuzu birkaç kısıtlamayla girmenize olanak tanır.
bu etiketin asıl kullanımı, bir sayfaya özel <script> öğeleri eklemektir.
Özel HTML etiketleri çok çeşitli şekillerde kullanılabilir ve performans üzerindeki etkisi önemli ölçüde değişiklik gösteriyor. Sitenizin performansını ölçerken şunları göz önünde bulundurun: çoğu araç, Özel HTML etiketinin performans etkisini etiketi yerleştiren bir yönetici (etiketin kendisi yerine)
Özel HTML etiketleri, etrafındaki sayfaya bir öğe yerleştirebilir. Eylem eklemek performans sorunlarına yol açabilir. bazı durumlarda düzen kaymalarına da neden olur.
- Çoğu durumda, sayfaya bir öğe eklenirse tarayıcı sayfadaki her bir öğenin boyutunu ve konumunu yeniden hesaplaması gerekir. olarak bilinir düzen. Tek bir düzenin performansa etkisi minimum düzeyde olsa da, gerçekleştiğinde performans sorunlarına yol açabilir. Bunun etkisi Bu fenomen, düşük kaliteli cihazlarda ve yüksek sayıda kullanıcı içeren sayfalarda DOM öğeleri.
- DOM'ye çevresinin ardından görünür bir sayfa öğesi eklenirse alanı zaten oluşturulmuşsa düzen kaymasına neden olabilir. Bu fenomen Ancak etiketler genellikle daha sonra yüklendiğinden, etiket yöneticileri için benzersiz değildir. sayfanın diğer kısımlarından farklı olarak, bunların DOM öğesi ekleyin.
Özel Şablonlar kullanmayı düşünün
Özel şablonlar desteği Özel HTML etiketleriyle aynı işlemlerden bazılarına sahiptir ancak korumalı alan sağlayan JavaScript sürümünü Yaygın kullanıma yönelik API'ler örneklerden faydalanabilirsiniz. Adından da anlaşılacağı gibi bu şablonu performansla oluşturabilecek deneyimli bir kullanıcı tarafından oluşturulacak bir şablon zihin. Daha az teknik bilgisi olan kullanıcılar şablonu kullanabilir. Bu genellikle daha güvenlidir tam Özel HTML erişimi sağlamaktan daha iyidir.
Özel şablonlara uygulanan daha büyük kısıtlamalar nedeniyle, bu etiketler performans veya güvenlik sorunu sergileme olasılığı daha düşüktür, ancak nedeniyle, özel şablonlar tüm kullanım alanları için uygun değildir.
Komut dosyalarını doğru şekilde ekleyin
Komut dosyası yerleştirmek için etiket yöneticisi kullanmak, çok yaygın bir kullanım alanıdır. İlgili içeriği oluşturmak için kullanılan
bunun önerilen yolu bir Özel Şablon ve
injectScript
API'ye gidin.
Mevcut bir Özel HTML'yi dönüştürmek için injectScript API'sını kullanma hakkında bilgi için etiketi için Mevcut bir etiketi kullanın.
Özel HTML etiketi kullanmanız gerekiyorsa dikkat edilmesi gereken bazı noktalar şunlardır:
- Kitaplıklar ve büyük üçüncü taraf komut dosyaları bir komut dosyası etiketi aracılığıyla yüklenmelidir
komut dosyasının içeriğini kopyalayıp yapıştırmak yerine, harici bir dosya indiren (örneğin,
<script src="external-scripts.js">) içine yerleştirmeniz gerekir.<script>etiketinin kullanılmasına izin verilmemiş olsa da komut dosyasının içeriğini indirmek için ayrı bir gidiş dönüşü ortadan kaldırır. uygulama, kapsayıcı boyutunu artırır ve komut dosyasının önbelleğe alınmasını önler tarayıcı tarafından ayrı ayrı düzenleyebilirsiniz. - Birçok tedarikçi,
<script>etiketlerini<head>. Ancak, bu öneri, Etiket Yöneticisi üzerinden yüklenen komut dosyaları için genellikle gerekli değildir: çoğu durumda, tarayıcı zaten öğesini etiket yöneticisinin çalıştırma zamanına göre<head>ayrıştırır.
Pikselleri kullan
Bazı durumlarda üçüncü taraf komut dosyaları resim veya iFrame ile değiştirilebilir "piksel" değeri). Komut dosyası tabanlı benzerleriyle karşılaştırıldığında pikseller Bu nedenle, daha az tercih edilen bir uygulama olarak görülür. ele alacağız. Bununla birlikte, etiket yöneticileri içinde kullanıldığında pikseller daha dinamik olabilir. çünkü tetikleyicilerle etkinleşebilir ve farklı değişkenler iletebilir. Bunlar en önemli daha sonra JavaScript yürütülmediğinden, güvenli ve performanslı bir etiket türüdür. etkinleşir. Piksellerin kaynak boyutu çok küçük (1 KB'tan az) ve düzen kaymalarına neden olmaz.
Size sundukları destek hakkında daha fazla bilgi edinmek için
piksel. Ayrıca, kodda <noscript> etiketi olup olmadığını incelemeyi deneyebilirsiniz.
Bir satıcı pikselleri destekliyorsa, genellikle bunları reklam grubuna dahil eder
<noscript> etiketi.
Piksellere alternatifler
Pikseller büyük oranda popüler oldu çünkü bir zamanlar en ucuz
durumlarda HTTP isteği göndermenin en güvenilir
yanıt alakalı değil ( örneğin, Analytics'e veri gönderirken
sağlayıcılar). İlgili içeriği oluşturmak için kullanılan
navigator.sendBeacon()
ve fetch()
keepalive
API'ler aynı kullanım alanını ele alacak şekilde tasarlanmıştır ancak muhtemelen daha güvenilirdirler
daha yüksek.
Pikselleri kullanmaya devam etmekte hiçbir sorun yoktur. Pikseller iyi şekilde desteklenir ve minimum performans etkisi vardır. Bununla birlikte, kendi işaretçilerinizi oluşturuyorsanız bu API'lerden birini kullanmanız faydalı olabilir.
sendBeacon()
İlgili içeriği oluşturmak için kullanılan
navigator.sendBeacon()
API, bazı durumlarda web sunucularına küçük miktarlarda veri göndermek için tasarlanmıştır
yanıt vermemesi gerekir.
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 sahip: Yalnızca POST isteklerinde bulunmayı destekler ve
özel üstbilgilerin ayarlanmasını desteklemez. Evet
Tüm modern tarayıcılar tarafından desteklenir.
fetch() keepalive
keepalive
getirme işlemine izin veren bir işarettir
API'den
bu etkinlikler, etkinlik raporlama ve analizler gibi engellemeyen isteklerde bulunmak için kullanılır. Evet
fetch() hizmetine iletilen parametrelere keepalive: true eklenerek 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
hakkında bilgi edindiniz. Aslında, Chromium tarayıcılarda sendBeacon() artık fetch()
keepalive üzerine kurulmuştur.
fetch() keepalive ve sendBeacon() arasından seçim yaparken
ve ihtiyaç duyduğunuz özellikleri ve tarayıcı desteğini değerlendirin. retrieve() API'si:
çok daha esnek hale getirdi. ancak keepalive daha az tarayıcıya sahip
sendBeacon() oranından daha destek.
Açıklama al
Etiketler genellikle üçüncü taraf tedarikçinin sağladığı talimatlar izlenerek oluşturulur. Tedarikçi firmanın kodunun ne işe yaradığından emin değilseniz bilen birine sorabilirsiniz. İkinci bir görüş, bir etiketin oluşturma potansiyeline sahip olup olmadığını belirlemeye yardımcı olabilir performansını görüntülemenizi sağlar.
Etiketlerin, etiket yöneticisinde bir sahip ile etiketlenmesi de önerilir. Uzakta Bir etiketin kime ait olduğunu unutmak ve her ihtimale karşı etiketi kaldırmaktan korkmanız çok kolaydır!
Tetikleyiciler
Öncelikli olarak, etiketi optimize etme tetikleyiciler genellikle etiketleri gereğinden fazla tetiklemekten ve iş ihtiyaçları ile performans maliyetleri arasında denge kuran bir tetikleyici seçmek.
Tetikleyicilerin kendisi boyutu ve yürütmeyi artıran JavaScript kodudur. maliyetidir. Çoğu tetikleyici küçük olsa da kümülatif etki toplayabilirsiniz. Örneğin, birçok tıklama etkinliğinin veya zamanlayıcı tetikleyicilerinin olması, ve etiket yöneticisinin iş yükünü artırır.
Uygun bir tetikleyici etkinlik seçin
Bir etiketin performans üzerindeki etkisi sabit değildir. Genel olarak, etiketler ne kadar erken etkinleştiğinde performans üzerindeki etkisi de artar. Kaynaklar genellikle sınırlandırılır ve dolayısıyla bir web sitesinin yüklenmesi veya yürütülmesi sırasında Belirli bir kaynağın (veya etiketin) kaynakları başka bir şeyden alması.
Tüm etiketler için uygun tetikleyicilerin seçilmesi önemli olsa da özellikle büyük kaynaklar yükleyen veya uzun süre yürüten etiketler için önemlidir komut dosyaları.
Etiketler şurada tetiklenebilir:
Sayfa Görüntüleme Sayısı
(genellikle Page load, DOM Ready, Window Loaded üzerinde) veya
özel etkinliktir. Sayfanın yüklenmesini etkilememek için
Window Loaded sonrasında gerekli olmayan etiketleri kaldırın.
Özel etkinlikleri kullanma
Özel etkinlikler
Bu özellik, kapsamdaki sayfa etkinliklerine yanıt olarak tetikleyicileri etkinleştirmenizi sağlar.
Google Etiket Yöneticisi'nin yerleşik tetikleyicileri. Örneğin, birçok etiket sayfa görüntüleme
tetikleyiciler; ancak,
DOM Ready ile Window Loaded arasındaki dönem birçok cihazda uzun olabilir
bir etiket etkinleştiğinde ince ayar yapılmasını zorlaştırabilir. Özel
etkinlikleri bu soruna bir çözüm sunar.
Özel etkinlikleri kullanmak için önce bir özel etkinlik tetikleyicisi oluşturun ve etiketlerinizi güncelleyin bu tetikleyiciyi kullanın.
Tetikleyiciyi etkinleştirmek için karşılık gelen 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
Belirli tetikleyici koşulları kullanmak, bir etiketin gereksiz yere tetiklenmesini önlemeye yardımcı olur. Bu kavramı uygulamanın pek çok yolu olsa da, en basit ama en kolay Bir etiketin yalnızca o etiketin bulunduğu sayfalarda tetiklenmesini sağlamak, gösterir.
Yerleşik değişkenler etiket etkinleşmesini sınırlandırmak için tetikleyici koşullarına da dahil edilmelidir.
Ancak karmaşık tetikleme koşullarının veya istisnalarının işlem süresini kısaltmak önemlidir. Bu nedenle, işlem süresini çok karmaşık hale getirmeyin.
Etiket yöneticinizi uygun bir zamanda yükleme
Etiket Yöneticisi'nin ne zaman yüklendiğini ayarlamak, performansı bazı yolları da görmüştük. Tetikleyiciler, nasıl yapılandırıldıklarından bağımsız olarak Google Etiket Yöneticisi'ni kullanabilirsiniz. Bir kampanya için iyi tetikleyiciler seçmek ayrı etiketler (yukarıda açıklandığı gibi), etiketinizi ne zaman yükleyeceğinizi öğrenebilirsiniz üzerindeki etkilerine eşit veya daha fazla etkiye sahip olabilir. Bunun tek başına sayfadaki tüm etiketleri etkileyecektir.
Etiket yöneticisini daha sonra yüklemek, bir kontrol katmanı da ekler ve gelecekteki bir etiket yöneticisi kullanıcısının yanlışlıkla yüklenmesini önleyeceği için performans sorunları bu etiketin etkisinin farkına varmadan etiketi çok erkene alabilir.
Değişkenler
Değişkenler, sayfadaki verilerin okunmasını sağlar. Tetikleyiciler açısından faydalıdırlar ve eklememiz gerekir.
Tetikleyiciler gibi, değişkenler de JavaScript kodunun etiket yöneticisine eklenmesine neden olur. ve performans sorunlarına yol açabilir. Değişkenler nispeten daha basit bir şekilde yerleşik olabilir veri katmanı, veri katmanı veya DOM gibi belirli bölümleri okuyabilen veri türleridir. Ya da yapabilecekleri açısından temelde sınırsız olan özel JavaScript de olabilirler.
Değerlendirilmeleri gerekeceği için değişkenleri basit ve minimum düzeyde tutun sürekli olarak etiket yöneticisi tarafından yapılır. Artık kullanılmayan eski değişkenleri kaldırma hem etiket yöneticisi komut dosyasının boyutunu hem de komut dosyasının işlem süresini belirler.
Etiket yönetimi
Etiketlerin verimli şekilde kullanılması performans sorunları riskini azaltır.
Veri katmanını kullanma
Veri katmanı "şunu içerir: "Google Etiket Yöneticisi'ne iletmek istediğiniz tüm bilgileri ekleyin". Daha fazla somut bir şekilde ifade etmek gerekirse, yapalım. 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 kullanılabilse de kesinlikle önerilir. Veri katmanı, verileri birleştirmenize olanak tanıyan bir yöntem üçüncü taraf komut dosyaları tarafından tek bir yerde erişilebilir ve böylece daha görünür. Bu, diğerlerinin yanı sıra, riskleri azaltmaya gereksiz değişken hesaplamaları ve komut dosyası yürütmeyi sağlar. Veri katmanı kullanarak da tam JavaScript kodu vermek yerine etiketler tarafından erişilen verileri kontrol eder değişkeni veya DOM erişimi.
Yinelenen ve kullanılmayan etiketleri kaldırın
Bir sayfanın HTML biçimlendirmesine YouTube'da bir etiket yöneticisi aracılığıyla yerleştirilebilir.
Kullanılmayan etiketler, etiket kullanılarak engellenmek yerine duraklatılmalı veya kaldırılmalıdır. tetikleyici istisnasıdır. Bir etiket duraklatıldığında veya kaldırıldığında kod kapsayıcıdan da kaldırılır; engelleme değil.
Kullanılmayan etiketler kaldırıldığında, tetikleyiciler ve değişkenler de yalnızca söz konusu kullanıcılar tarafından kullanılıp kullanılamayacağına karar vermek için etiketleri arasında yer alır.
İzin ver ve red listelerini kullan
İzin verme ve ret listeleri etiketler, tetikleyiciler ve etiketler hakkında son derece ayrıntılı kısıtlamalar değişkenlerine izin verilir. Bu, performansın en iyi şekilde sağlanmasına yardımcı olmak için kullanılabilir ve diğer politikalar.
İzin verme ve reddetme listeleri, veri katmanı üzerinden yapılandırılır.
window.dataLayer = [{
'gtm.allowlist': ['<id>', '<id>', ...],
'gtm.blocklist': ['customScripts']
}];
Örneğin, Özel HTML etiketlerine, JavaScript'e veya doğrudan DOM erişimi sağlar. Bu durumda yalnızca pikseller ve önceden tanımlanmış etiketler veri katmanındaki verilerle birlikte kullanılabilir. Bu kesinlikle kısıtlayıcı olsa da çok daha yüksek performanslı ve güvenli bir etiket yöneticisi uygulaması sağlayabilir.
Sunucu tarafı etiketlemeyi kullanmayı düşünün
Sunucu tarafı etiketlemeye geçmek basit bir görev olmasa da buna değer (özellikle de tarayıcı ayarları üzerinde daha fazla kontrol sahibi olmak isteyen büyük siteler için) dışı verilerdir. Sunucu tarafı etiketleme, tedarikçi firma kodunu istemciden kaldırır. Bu işlem işlemleri istemciden sunucuya boşaltır.
Örneğin, istemci tarafı etiketleme kullanılırken birden fazla analize veri gönderme hesaplarda, istemcinin her uç nokta için ayrı istekler başlatması gerekir. Buna karşılık sunucu tarafı etiketlemede, tek bir istekte bulunmak için istemci tarafından sunucu tarafı container'a bağlanır ve oradan bu veriler farklı bir Analytics hesapları ile.
Sunucu tarafı etiketlemenin yalnızca bazı etiketlerle çalıştığını unutmayın. etiket uyumluluk durumu satıcıya göre değişir.
Daha fazla bilgi için bkz. Sunucu tarafı etiketleme hakkında daha fazla bilgi edinin.
Container'lar
Etiket yöneticileri genellikle birden fazla örneğe veya "kapsayıcıya" izin verir veya ayarlayın. Böylece birden fazla kapsayıcı tek bir etiket içinde kontrol edilebilir yönetici hesabı vardır.
Sayfa başına yalnızca bir kapsayıcı kullanın
Çoklu yöntem kullanma kapsayıcılar tek sayfalık sayfa düzeni, çok daha fazla satışa yol ve komut dosyası yürütme gibi bir ek yük ortaya çıkarır. En azından benzer bir öğesinin bir parçası olarak sunulduğu için, bu, JavaScript, kapsayıcılar arasında tekrar kullanılamaz.
Birden fazla kapsayıcının etkili bir şekilde kullanılması nadirdir. Ancak, iyi kontrol edilirse aşağıdakiler dahil, bunun işe yarayabileceği durumlar:
- Daha hafif "erken yükleme" yapma ve daha ağır bir "daha sonra yükleme" container, tek bir büyük container yerine.
- Daha az teknik alan ve daha az teknik alan kullanan sınırlı bir kapsayıcıya sahip olma kullanılamayacak ancak daha sıkı denetime sahip bir kapsayıcı olan söz konusu olduğunda.
Sayfa başına birden fazla kapsayıcı kullanmanız gerekiyorsa Google Etiket Yöneticisi'ni birden fazla kampanya stratejisi container'ları arasından seçim yapabilirsiniz.
Gerekirse ayrı kapsayıcılar kullanın
Etiket yöneticisini birden fazla mülk için (örneğin, bir web uygulaması ve mobil uygulama): Kullandığınız kapsayıcıların sayısı iş akışınıza yardımcı olabilir veya zarar verebilir verimlilik. Ayrıca, performansı etkileyebilir.
Genel anlamda, tek bir kapsayıcı birden fazla cihazda etkili bir şekilde kullanılabilir. sitelerin kullanım ve yapı olarak benzer olup olmadığını kontrol edin. Örneğin, mobil uygulamalar ve web uygulamaları benzer işlevlere sahip olsa da ve bu nedenle daha etkili bir şekilde yönetilecek olan İYS'leri kullanabilirsiniz.
Tek bir kapsayıcıyı çok kapsamlı şekilde yeniden kullanmaya çalışmak genelde karmaşık mantığın benimsenmesini zorunlu kılarak kapsayıcının karmaşıklığını ve boyutunu etiketleri ve tetikleyicileri yönetmek için kullanılır.
Kapsayıcı boyutuna dikkat edin
Bir kapsayıcının boyutu, içerdiği etiketler, tetikleyiciler ve değişkenler tarafından belirlenir. Küçük bir kapsayıcı sayfa performansını yine de olumsuz bir şekilde etkileyebilir ancak büyük bir kapsayıcı olacaktır.
Etiketinizi optimize ederken kapsayıcı boyutu asıl metriğiniz olmamalıdır kullanım; Ancak büyük kapsayıcı boyutu, genellikle bir kapsayıcının değildir ve kötüye kullanılma ihtimali vardır.
Google Etiket Yöneticisi limits kapsayıcısı boyutu 200 KB'a ayarlanır ve 140 KB'tan başlayan kapsayıcı boyutuyla ilgili uyarı gösterilir. Ancak, çoğu site, kapsayıcılarını bundan çok daha küçük tutmayı hedeflemelidir. Örneğin, Ortanca site kapsayıcısının boyutu yaklaşık 50 KB'tır.
Kapsayıcınızın boyutunu belirlemek için yanıtın boyutuna bakın
https://www.googletagmanager.com/gtag/js?id=YOUR_ID tarafından iade edildi. Bu
yanıt, Google Etiket Yöneticisi kitaplığını ve
anlamına gelir. Google Etiket Yöneticisi kitaplığı tek başına 33 KB civarındadır
sıkıştırılmış.
Kapsayıcı sürümlerinizi adlandırın
Kapsayıcı sürüm kapsayıcı içeriğinin belirli bir zamandaki anlık görüntüsüdür. Bir ve anlamlı bir adın kısa bir açıklamasını da gelecekteki performansla ilgili hataları ayıklamayı kolaylaştıracak büyük ölçüde etkili olabilir. sorunları.
Etiketleme iş akışları
Etiketlerinizde yaptığınız değişikliklerin yönetilmesi, sayfa performansını olumsuz yönde etkiler.
Dağıtımdan önce etiketleri test edin
Etiketlerinizi dağıtımdan önce test etmek, sorunları yakalamanıza yardımcı olabilir (performans ve geri ödeme yapılır.
Bir etiketi test ederken dikkat edilmesi gereken noktalar şunlardır:
- Etiket doğru bir şekilde çalışıyor mu?
- Etiket, düzen kaymalarına neden oluyor mu?
- Etiket herhangi bir kaynağı yüklüyor mu? Bu kaynakların büyüklüğü ne kadar?
- Etiket uzun süredir çalışan bir komut dosyasını tetikliyor mu?
Önizleme modu
Önizleme modu, aşağıdakileri yapmanıza olanak tanır: kullanmak zorunda kalmadan, etiket değişikliklerini gerçek sitenizde herkese açık olarak ayarlayabilirsiniz. Önizleme modu, aşağıdakilerin yapılmasını sağlayan bir hata ayıklama konsolu içerir: öğrenebilirsiniz.
Google Etiket Yöneticisi'nin yürütme süresi farklıdır (biraz daha yavaştır) uygulamanın pozlama için gereken ek ek yük nedeniyle Önizleme modunda çalıştırıldığında bilgileri kontrol edin. Dolayısıyla, Web Verileri ölçümlerini toplanmasının üretimde toplanması önerilmez. Bununla birlikte, bu tutarsızlık etiketlerin yürütme davranışını etkilemez. .
Bağımsız test
Etiketleri test etmeye alternatif bir yaklaşım, kapsayıcı olan tek bir etiket (test ettiğiniz etiket) ekleyin. Bu test kurulumu daha az gerçekçidir ve bazı sorunları yakalamaz (örneğin, bir etiketin düzene neden olup olmadığı değişiklikler) olur. Ancak her ne kadar değişikliklerin etkisini ayırt etmeyi ve ölçmeyi etiketlere yerleştirdik. Telegraph'ın bunu nasıl kullandığını öğrenin izolasyon yaklaşımını performans üçüncü taraf kodu.
Etiket performansını izleme
Google Etiket Yöneticisi Monitoring API, ve yürütme aşamaları hakkında bilgi toplamak süre seçilebilir. Bu bilgiler, uygulamanızın bir uç noktasına tercih edebilirsiniz.
Daha fazla bilgi için Google Etiket Yöneticisi oluşturma İzleme.
Kapsayıcı değişiklikleri için onay isteme
Birinci taraf kod, genellikle dağıtımdan önce inceleme ve testten geçer. aynı şekilde ele almanız gerekir. İki adımlık doğrulama, kapsayıcı değişiklikleri için yönetici onayı gerektiren bu. Alternatif olarak, iki adımlı doğrulamayı zorunlu kılmak değişiklikleri izlemek isterseniz kapsayıcı bildirimleri seçtiğiniz kapsayıcı etkinlikleri hakkında e-posta uyarıları alabilirsiniz.
Etiket kullanımını düzenli olarak denetleyin
Etiketlerle çalışmanın zorluklarından biri, her etiket için zaman: Etiketler eklenir ancak nadiren kaldırılır. Etiketleri düzenli olarak denetlemek bu trendi tersine çevirmenin bir yoludur. Bunu yapmanın ideal sıklığı, sitenizin etiketleri sık sık güncellenir.
Her bir etiketi, sahibi açıkça görünecek şekilde etiketlemek, kimin etiketlendiğinin daha kolay belirlenmesini sağlar. bu etiket için duyarlı olduğunu ve hâlâ gerekli olup olmadığını belirtebilir.
Etiketleri denetlerken tetikleyicileri ve değişkenleri olur. Ayrıca, performans sorunlarının nedeni de kolayca olabilirler.
Daha fazla bilgi için Üçüncü taraf komut dosyalarını kontrol edin.