Chrome Geliştirici Araçları'nı kullanarak bir web sayfasının içeriklerini veya kaynaklarını hızlıca analiz edebilirsiniz. Bu, Campaign Manager 360 etiketlerini kontrol etmenize yardımcı olur.
Geliştirici Araçlarına Erişim
Chrome Geliştirici Araçları'nı açmak için aşağıdaki seçeneklerden birini kullanabilirsiniz:
- Bir sayfayı sağ tıklayıp İncele'yi seçin. Bu seçim, tıkladığınız öğeye ilişkin HTML kodunu görüntüler.
- Tarayıcı penceresinin üst tarafında Görünüm > Geliştirici > Geliştirici araçları'nı seçin.
Chrome Geliştirici Araçları hakkında daha fazla bilgi edinin.
Kullanılabilir sekmeler ve bunların kullanımları
-
Öğeler sekmesi: Sayfanın kaynak kodundan ayrı olan, sayfanın oluşturulmuş HTML'sini görüntüler. Herhangi bir HTML öğesi sayfa yüklenirken JavaScript aracılığıyla oluşturulur veya değiştirilirse bu değişiklikler oluşturulan HTML içinde gösterilir, sayfanın kaynağı ise kodu hiçbir değişiklik olmadan gösterir.
Kullanım alanları- Etiket değişikliklerini kontrol etme: Bu sekme, sayfada uygulanan Floodlight ve/veya yerleşim etiketlerinin yerini belirlemenize ve herhangi bir değişiklik yapılıp yapılmadığını tespit etmenize olanak tanır. Campaign Manager 360 yerleşim etiketlerindeki URL'ler "doubleclick" alanını kullanan URL'ler içerdiğinden, etiketi bulurken "double" arama teriminin kullanılması yararlı olur. Bulunduktan sonra, etiketin uygulanan sürümünü, doğrudan Trafik İşlemleri kullanıcı arayüzünden dışa aktarılan etiketle karşılaştırın.
- CSS ile ilgili sorunları giderme: Öğeler sekmesi içinde, sağ taraftaki sütunda, seçilen HTML öğesinin nasıl ve nerede görüntüleneceğini kontrol eden CSS özellikleri gösterilir.
- "Hesaplanan" çubuğu, seçilen öğe için etkin olan tüm CSS kurallarını gösterir. Bu kurallar, sayfanın web sitesi yöneticisi tarafından açık CSS kodu aracılığıyla ayarlanmış veya ilgili türdeki HTML öğeleri için tarayıcının varsayılan değerlerinden türetilmiştir.
- Buna karşılık, "Stiller" bölümünde yalnızca web sitesi yöneticisi tarafından açık bir şekilde belirtilen CSS kuralları gösterilir. Buradaki her alt bölüm, ilgili bir CSS kuralının (seçilen HTML öğesini etkileyen) yazıldığı sayfa kodundaki farklı bir konumu gösterir. Sayfa içinde soruna neden olan bir kuralı fark ederseniz söz konusu kuralın uygulandığı satırı veya dokümanı yüklemek için bu alt bölümün sağ üst köşesindeki bağlantıyı tıklayabilirsiniz.
Öğeler sekmesinin en yararlı özelliklerinden biri, incelemekte olduğunuz kodu düzenlemenize olanak tanımasıdır. HTML kodunda sayfada sorunlara neden olan bir satır veya CSS kuralı bulduğunuza inanıyorsanız varsayımınızı test etmek için kodu değiştirebilirsiniz. Bu, yalnızca sayfanın tarayıcınızın geçici belleğinde saklanan sürümünü etkiler. Sayfayı yeniden yüklerseniz veya başka birisi sayfayı ziyaret ederse yaptığınız değişiklikler görünmez. -
Kaynaklar sekmesi: Bu sekme, incelenen sayfayla birlikte yüklenen farklı kaynakların tablosunu incelemenize olanak tanır. Bu; resimleri, HTML dokümanlarını, JavaScript dosyalarını ve diğer kaynakları içerir.
Kullanım alanlarıSayfaya yazılmayan etiketleri bulma: Öğeler sekmesi, sayfanın oluşturulan HTML'sini görüntülemenize olanak tanısa da yerleşim etiketleri her zaman sayfanın kendisine kod yazıldığında etkinleşmez. Kaynaklar sekmesinde JavaScript dosyalarını da düzenleyebilir ve dosyalarda hata ayıklayabilirsiniz.
İpucu: Uygulanan bir etiketi, yüklenen tüm kaynaklarda kolayca bulmak için Arama panelini de kullanabilirsiniz. Geliştirici Araçları'nın sağ üst köşesinde üç nokta simgesinitıkladıktan sonra Diğer araçlar > Arama'yı seçin.
-
Ağ sekmesi: Hem yüklenirken hem de sonrasında sayfanın HTTP trafiğini izlemenize olanak tanıyan yerleşik bir proxy algılayıcısıdır.
Kullanım alanları- Yerleşim etiketinizin veya Floodlight'ın etkinleşip etkinleşmediğini kontrol etme: Bir proxy algılayıcısı, QA ve sorun giderme işlemleri için kullanabileceğiniz en yararlı araçtır. Temel olarak bir etiket etkinleşmezse reklam öğesi içeriklerini amaçlandığı gibi izleyemez veya döndüremez. Benzer bir şekilde, (doğru sözdizimi/biçimlendirme ile) uygun çağrı yapıldığında sunucularımız etiketin nasıl uygulandığını dikkate almaz (bununla birlikte, sayfanın doğasına bağlı olarak bazı noktalara dikkat edilmesi gerekebilir). Bir yerleşim etiketinin/Floodlight'ın etkinleşip etkinleşmediğini belirlemek için Ağ Sekmesi'ni kullanın ve etkinleşmişse, çağrı sözdiziminin, etiketin değiştirilmemiş sürümünde bulunan URL ile eşleştiğinden emin olun.
- Gecikme testi: Bir çağrının gerçekleşip gerçekleşmemesine ek olarak, Ağ sekmesinde belirli bir isteğin ne kadar sürede yanıt aldığıda görüntülenir. Bu, özellikle dinamik Floodlight etiketleri durumunda, gecikme testi için yararlı olabilir. Floodlight, sayfa yüklenirken aşırı gecikmeye neden oluyorsa, piggyback pikseller tarafından yapılan çağrıların izlenmesi genellikle sorunun nedenini tanımlamanıza yardımcı olabilir. Diğer bir deyişle, gecikmenin Floodlight etiketinin kendisinden kaynaklanması zayıf bir olasılıktır. Bunun yerine, gecikme etiketin içindeki piggyback piksellerin birinden kaynaklanıyor olabilir.
-
Performans sekmesi: Bu sekme, zaman içinde gerçekleşen HTTP trafiğini ve bellek kullanımını gösterir. Ağ sekmesine çok benzer bir şekilde, gecikmenin kaynaklarının tanımlanmasında yararlı olabilir. Bunun dışında bu sekme, Campaign Manager 360 ile ilgili sorunlarla alakalı değildir.
-
Bellek sekmesi: Bu, web geliştiricilerinin web uygulamalarındaki CPU kullanımını optimize etmek için kullanabilecekleri bir araçtır. Bu sekme, Campaign Manager 360 ile ilgili sorunlarla alakalı değildir.
-
Lighthouse sekmesi: Bu sekme, bir sayfayı yüklenirken analiz edip sayfa yüklenme süresini kısaltma ve algılanan (ve gerçek) yanıtlama düzeyini artırmaya yönelik öneriler ve optimizasyonlar sunar. Bu sekme, Campaign Manager 360 ile ilgili sorunlarla alakalı değildir.
-
Konsol sekmesi: Bu sekme, sayfanın kodundaki hataları otomatik olarak algılar. Etkinleşmeyen etiketi, Ağ sekmesinin yardımıyla belirledikten sonra Konsol sekmesi bu durumun nedenine ışık tutabilir.
Kullanım alanlarıSözdizimi hatalarını giderme: Etiketiniz etkinleşmiyorsa, Chrome'un herhangi bir hata tespit edip etmediğini görmek için konsol sekmesine bakın. İzlenecek önemli hatalar şunlardır:
- "NS_IMAGELIB": Bu hata, bir iFrame "src" URL'si bir resim olarak uygulandığında ortaya çıkabilir. Bu karışım, yerleşim etiketi veya Floodlight'ın doğru bir şekilde etkinleşmesini önler. Diğer yandan, Floodlight etiketleri söz konusu olduğunda hataya rağmen bir dönüşüm ilişkilendirilebilir. Bununla birlikte, bu hata bir Floodlight için yapıldıysa, söz konusu Floodlight içine uygulanan üçüncü taraf piksellerinin hiçbiri etkinleşemez.
- "Çerçeveye URL ile erişmek için güvenli olmayan JavaScript girişimi": Bu hata yoksayılabilir ve yalnızca bir sayfaya farklı etki alanlarından iframe'lerin yerleştirilmesiyle ilgili bir güvenlik uyarısıdır. Çoğu kullanıcı, güvenlik ayarları çok yüksek değilse bu uyarıyı görmez ve uyarının, Floodlight'ın (veya piggyback piksellerin) sunulma şekli üzerinde herhangi bir etkisi olmaz.
- "Kaynak '_blank_' olarak yorumlandı, ancak " ." MIME türüyle aktarıldı": Bu mesaj, bir dosya biçimi hatası olduğunu gösterir. MIME, internetteki dosya biçimleri için kullanılan bir tanımlayıcıdır. Bu hata, bir kaynak yanlış dosya uzantısıyla (örneğin, gif. yerine .jpeg) yüklendiğinde ortaya çıkabilir.
- "Yakalanamayan TypeError": Bu mesaj, sayfadaki bir HTML öğesiyle ilgili bir tür hatasının olduğunu gösterir. Bu genellikle JavaScript işlevinde hatalı kod bulunduğu anlamına gelir.
- "Yakalanamayan SyntaxError": Bu mesaj, sayfadaki bir öğede bir sözdizimi hatasının olduğunu gösterir. Bu genellikle fazladan bir karakterin (<"/-*^#) uygun olmayan şekilde kullanıldığı anlamına gelir.
Konsol sekmesinin yararlı bir özelliği de hata mesajlarının, hataya neden olan satıra ve dokümana bağlantı içermesidir. Bu, değiştirilmesi gereken kod satırına kadar sorunu izlemeye yardımcı olur. Diğer yandan bu özellik her zaman %100 güvenilir olmayabilir. Bu sekmenin sunduğu hata tespiti güvenilir olabilir, ancak ilişkilendirme mekanizması göreli olarak daha az doğrudur ve kodlama hatasının yakınındaki bir satıra bağlantı sağlayabilir.
