Chrome’un Geliştirici Araçları, bir web sayfasının içeriğini/kaynaklarını hızlı bir şekilde analiz etmenize olanak tanır. Bu, Campaign Manager 360 etiketlerini kontrol etmenize yardımcı olur.
Geliştirici Araçlarına Erişim
-
Bir sayfayı sağ tıklayın ve "Öğeyi İncele" seçeneğini belirleyin. Bu seçim, tıkladığınız öğeye ilişkin HTML kodunu görüntüler.
-
Görünüm > Geliştirici > Geliştirici araçları seçeneğini belirleyin.
-
"Alt+command+i" kısayolunu kullanın.
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.
KULLANIM ALANLARI- Etiket Değişikliklerini Kontrol Etme: Bu sekme, sayfada uygulanan piksellerin, Floodlight etiketlerinin ve/veya reklam etiketlerinin yerini belirlemenize ve herhangi bir değişikliğin 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 İlgili 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 Stil" ç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ı/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 bir kişi sayfayı ziyaret ederse) yaptığınız değişiklikler görünmez. -
Kaynaklar sekmesi: İncelenen sayfayla birlikte yüklenen farklı kaynakların bir tablosunu incelemenize olanak tanır. Bu; resimleri, HTML dokümanlarını, JavaScript dosyalarını ve diğer kaynakları içerir. "Arama" özelliği yalnızca sayfanın içine değil, sayfanın kullanabildiği tüm kaynaklara bakacağından, bu sekme Campaign Manager 360 ile ilgili sorunların giderilmesi için kullanışlıdır.
KULLANIM ALANLARISayfaya yazılmayan etiketleri bulma: Öğeler sekmesi sayfanın oluşturulan HTML'sini görüntülemenize olanak tanır. Ancak, reklam etiketleri her zaman sayfanın kendisine kod yazılması yoluyla etkinleşmez. Bununla birlikte, uygulanan bir yerleşim etiketini bulmanın en kolay ve en güvenilir yolu Kaynaklar sekmesindeki "arama" özelliğinin kullanılmasıdır.
-
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.
KULLANIM ALANLARI- Reklam Etiketinizin/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çeriğini amaçlandığı gibi takip edemez 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 Reklam Etiketi'nin/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 pikselleri 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.
-
Komut Dosyaları sekmesi: JavaScript kodunda hata ayıklama için kullanılabilir. Bu, Web Geliştiricileri için paha biçilemez bir araç olsa da Campaign Manager 360 kalite denetimi veya sorun giderme işlemleriyle doğrudan ilgili değildir.
-
Zaman Çizelgesi sekmesi: 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 sekmenin Campaign Manager 360'a ilişkin sorunlarla ilgisi yoktur.
-
Profiller sekmesi: Web Geliştiricilerinin web uygulamaları içindeki CPU kullanımını optimize etmek için kullanabilecekleri bir araçtır. Bu sekmenin Campaign Manager 360'a ilişkin sorunlarla ilgisi yoktur.
-
Denetimler sekmesi: Bir sayfayı yüklenirken analiz edebilir ve sayfa yüklenme süresini kısaltmak ve algılanan (ve gerçek) yanıtlama düzeyini artırmak için öneriler ve optimizasyonlar sağlar. Bu sekmenin Campaign Manager 360'a ilişkin sorunlarla ilgisi yoktur.
-
Konsol sekmesi: Sayfanın kodu içindeki hataları otomatik olarak algılar. Ağ sekmesinin yardımıyla etkinleşmeyen etiketi belirledikten sonra Konsol sekmesi bu durumun nedenine ışık tutabilir.
KULLANIM ALANLARISö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:
Konsol sekmesinin yararlı bir özelliği de hata mesajlarının, hataya neden olan satıra ve dokümana bağlantı içermesidir. Bu, sorunun değiştirilmesi gereken kod satırına kadar izlenmesinde yararlı olur, diğer yandan bu özellik her zaman %100 güvenilir olmayabilir. Bu sekmenin sunduğu hata algılama 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.- "NS_IMAGELIB": Bu hata, bir "src" Iframe 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 yüklendiğinde (ör. gif. yerine .jpeg) ortaya çıkabilir.
- "Yakalanamayan TypeError": Bu mesaj, sayfadaki bir HTML öğesiyle ilgili bir tür hatasının olduğunu gösterir. Bu genellikle bir 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 bir şekilde kullanıldığı anlamına gelir.
