Kontrola značek pomocí Nástrojů pro vývojáře Chrome

Pomocí Nástrojů pro vývojáře Chrome můžete rychle analyzovat obsah nebo zdroje webové stránky. Díky tomu můžete rychle zkontrolovat značky služby Campaign Manager 360.

Používání Nástrojů pro vývojáře

1. Klikněte na stránku pravým tlačítkem myši a zvolte možnost Zkontrolovat prvek. Zobrazí se kód HTML prvku, na který jste klikli.

2. Vyberte Zobrazit > Vývojář > Nástroje pro vývojáře.

3. Použijte klávesovou zkratku Alt+command+i.

Dostupné karty a jejich využití

• Karta Elements (Prvky): Zobrazuje vykreslený kód HTML dané stránky, který se liší od zdrojového kódu stránky. Pokud se během načítání stránky prostřednictvím JavaScriptu vytvoří nebo upraví nějaké prvky HTML, tyto změny se projeví ve vykresleném kódu HTML, ale zdrojový kód stránky žádné změny nezaznamená.

  PŘÍKLADY POUŽITÍ

  • Zjištění úpravy značek: Na této kartě můžete najít značky Floodlight a značky umístění, které byly na stránku implementovány, a zjistit, zda byly provedeny nějaké úpravy. Při hledání značky je dobré použít vyhledávací dotaz „double“. Adresy URL ve značkách služby Campaign Manager 360 totiž obsahují adresy URL s doménou „doubleclick“. Až značku najdete, porovnejte implementovanou verzi značky se značkou, která se exportuje přímo z uživatelského rozhraní Provozu.
  • Odstraňování problémů se styly CSS: Panel v pravé části karty Elements (Prvky) zobrazuje různé atributy CSS, které udávají, jak a kde je vybraný prvek HTML zobrazen.
  • Lišta Computed Style (Vypočítaný styl) zobrazuje všechna pravidla CSS, která jsou ve vybraném prvku použita. Je zde uvedeno, zda jsou zadána pomocí explicitního kódu CSS (který napsal administrátor webu) nebo zda jsou odvozena z výchozích hodnot pro prvky HTML tohoto typu, které jsou nastaveny v prohlížeči.
  • Naproti tomu sekce Styles (Styly) zobrazuje jen pravidla CSS, která zadal administrátor webu. Každá podsekce představuje jiné umístění v kódu stránky, kde je zapsáno příslušné pravidlo CSS (které ovlivňuje vybraný prvek HTML). Pokud naleznete pravidlo, které na stránce způsobuje problémy, můžete kliknutím na odkaz v pravém horním rohu dané podsekce načíst řádek/dokument, ve kterém je dané pravidlo implementováno.

  Jednou z nejužitečnějších funkcí na kartě Elements (Prvky) je funkce, která umožňuje upravit kontrolovaný kód. Pokud jste přesvědčeni, že jste našli řádek kódu HTML nebo pravidlo CSS, které na stránce způsobuje problémy, můžete kód jednoduše pozměnit a svoji domněnku tak ověřit. Změna bude mít vliv jen na verzi stránky, která je uložena v dočasné paměti vašeho prohlížeče. Pokud stránku znovu načtete (nebo pokud ji navštíví jiný uživatel), provedené změny se zde neobjeví.

• Karta Resources (Zdroje): Umožňuje zkontrolovat tabulku různých zdrojů, které byly načteny spolu s kontrolovanou stránkou. Patří sem obrázky, dokumenty HTML, soubory JavaScriptu a další prvky. Tato karta se hodí k odstraňování problémů souvisejících se službou Campaign Manager 360, protože funkce vyhledávání prohledá všechny zdroje, které jsou pro stránku k dispozici, nikoli jen ty, které se na stránce nacházejí.

  PŘÍKLADY POUŽITÍ

  Nalezení značek, které nejsou na stránce zapsány: Ačkoli na kartě Elements (Prvky) můžete zobrazit vykreslený kód HTML stránky, značky umístění se nemusejí vždy spouštět zapsáním kódu do samotné stránky. Nejsnazší a nejspolehlivější způsob, jak najít implementovanou značku reklamy, je proto použít funkci vyhledávání na kartě Resources (Zdroje).

• Karta Network (Síť): Jedná se o integrovaný nástroj na sledování síťového provozu, který umožňuje sledovat provoz protokolu HTTP stránky (během načítání i poté).

  PŘÍKLADY POUŽITÍ

  • Kontrola, zda se spustí značka umístění nebo značka Floodlight: Nástroj na sledování síťového provozu je nejlepší nástroj, který můžete použít ke kontrole kvality a odstraňování problémů. Pokud se značka nespustí, v podstatě to znamená, že nemůže měřit ani předat obsah kreativy, jak by měla. Obdobně platí, že pokud je volání prováděno správně (se správnou syntaxí a formátováním), naše servery se nezajímají o to, jak je značka implementována (nicméně v závislosti na charakteru stránky mohou způsob implementace zohledňovat). Pomocí karty Network (Síť) můžete zjistit, zda byla značka umístění nebo značka Floodlight spuštěna. Pokud spuštěna byla, je možné zkontrolovat, zda se syntaxe volání shoduje s adresou URL uvedenou v neupravené verzi značky.
  • Testování latence: Karta Network (Síť) dokáže kromě informace, zda došlo k volání, zobrazit také informaci, jak dlouho trvalo, než byla obdržena odpověď na příslušný požadavek. Tuto informaci můžete použít k testování latence (zejména v případě dynamických značek Floodlight). Pokud značka Floodlight způsobuje při načítání stránky velkou prodlevu, příčinu tohoto problému je většinou možné zjistit ve voláních provedených přesměrovanými pixely. Je totiž nepravděpodobné, že by prodleva byla způsobena samotnou značkou Floodlight. Spíše se může stát, že latenci způsobuje jeden z přesměrovaných pixelů ve značce.

• Karta Scripts (Skripty): Tuto kartu lze použít k ladění kódu JavaScriptu. Ačkoli se jedná o neocenitelný nástroj pro vývojáře webu, nemá přímou souvislost s kontrolou kvality ani odstraňováním problémů se službou Campaign Manager 360.

• Karta Timeline (Časová osa): Tato karta ukazuje provoz protokolu HTTP a využití paměti v průběhu času. Podobně jako v případě karty Network (Síť) můžete i pomocí této karty určit zdroje latence. Jinak tato karta není pro problémy související se službou Campaign Manager 360 relevantní.

• Karta Profiles (Profily): Jedná se o nástroj, pomocí kterého mohou vývojáři webů optimalizovat využití procesoru webovými aplikacemi. Tato karta není pro problémy související se službou Campaign Manager 360 relevantní.

• Karta Audits (Audity): Tato karta dokáže analyzovat stránku během načítání a zobrazit doporučení a možnosti optimalizace ke snížení doby načítání stránky a zvýšení vnímané (a skutečné) odezvy. Tato karta není pro problémy související se službou Campaign Manager 360 relevantní.

• Karta Console (Konzole): Tato karta automaticky zjišťuje chyby v kódu stránky. Jakmile pomocí karty Network (Síť) zjistíte, že se značka nespouští, pomocí karty Console (Konzole) můžete zjistit proč.

  PŘÍKLADY POUŽITÍ

  Odstraňování problémů se syntaxí: Pokud se značka nespouští, na kartě Console se podívejte, zda prohlížeč Chrome nezjistil nějaké chyby. Je třeba dávat pozor zejména na tyto chyby:

  Užitečnou funkcí karty Console (Konzole) je to, že chybové zprávy budou odkazovat na řádek a dokument, který chybu způsobil. Díky tomu můžete chybu najít na příslušném řádku kódu, který je třeba upravit (funkce ale není vždy 100% spolehlivá). Zatímco zjištění chyby je na této kartě spolehlivé, mechanismy přiřazení chyby jsou méně přesné a mohou vás odkázat jen na řádek v blízkosti chyby kódu.

  • NS_IMAGELIB: K této chybě může dojít, když je adresa URL v části "src" značky iframe implementována jako obrázek. Tato záměna zabrání správnému spuštění značky umístění nebo značky Floodlight, ačkoli v případě značek Floodlight může být i navzdory této chybě přiřazena konverze. To znamená, že pokud tato chyba vznikne ve značce Floodlight, nebude možné spustit žádné pixely třetích stran, které byly do této značky implementovány.
  • Unsafe JavaScript attempt to access frame with URL (Nebezpečný pokus JavaScriptu o získání přístupu k rámci v adrese URL): Tuto chybu můžete ignorovat. Je to jen bezpečnostní upozornění související s vkládáním prvků iframe z jiných domén na stránku. Toto upozornění se většině uživatelů zobrazí jen v případě, že budou mít přísné nastavení zabezpečení, a nijak neovlivňuje zobrazení značek Floodlight (ani přesměrovacích pixelů).
  • Resource interpreted as '_blank_' but transferred with MIME type (Zdroj interpretován jako '_blank_', ale přenesen pomocí typu MIME): To znamená, že došlo k problému s formátem souboru. MIME je identifikátor formátů souborů na internetu. Tato chyba může vzniknout, když je načten zdroj s chybnou příponou souboru (např. gif. namísto jpeg).
  • Uncaught TypeError: Znamená to, že v nějakém prvku HTML na stránce došlo k chybě typu. Tato chyba obvykle značí, že se ve funkci JavaScriptu nachází chybný kód.
  • Uncaught SyntaxError: Znamená to, že v nějakém prvku na stránce došlo k chybě syntaxe. Obvykle to znamená, že byl nesprávně použit nějaký znak (<"/-*^#).