Używanie Narzędzi Chrome dla programistów do sprawdzania tagów

Narzędzia Chrome dla programistów pozwalają wygodnie analizować treść i zasoby strony internetowej. Dzięki temu możesz sprawdzić tagi Campaign Managera 360.

Otwieranie Narzędzi dla programistów

Kliknij stronę prawym przyciskiem myszy i wybierz „Zbadaj element”. Zobaczysz kod HTML klikniętego elementu.
Wybierz kolejno Widok > Programista > Narzędzia dla programistów.
Użyj skrótu „alt+command+i”.

Dostępne karty i ich zastosowania

Karta Elements (Elementy): zawiera renderowany kod HTML strony, który różni się od jej kodu źródłowego. Jeśli podczas wczytywania strony kod JavaScript tworzy lub zmienia jakieś elementy HTML, efekty tych operacji widać w renderowanym kodzie HTML, natomiast źródło strony zawiera kod bez żadnych takich zmian.
ZASTOSOWANIA
- Szukanie zmian w tagach: dzięki tej karcie możesz znaleźć tagi Floodlight lub tagi miejsca docelowego umieszczone na stronie oraz sprawdzić, czy wprowadzono w nich jakieś zmiany. Do wyszukania tagu warto użyć słowa „double”, bo adresy URL w tagach miejsca docelowego Campaign Managera 360 są w domenie „doubleclick”. Po znalezieniu tagu porównaj jego wersję ze strony z wersją wyeksportowaną bezpośrednio w interfejsie funkcji Trafficking.
- Rozwiązywanie problemów z CSS: w prawej kolumnie na karcie Elements (Elementy) są różne atrybuty CSS, które kontrolują sposób i miejsce wyświetlania wybranego elementu HTML.
- Panel „Computed Style” (Wygenerowany styl) zawiera wszystkie reguły CSS, którym podlega wybrany element – zarówno te wyraźnie określone w kodzie CSS przez administratora witryny strony, jak i te, które wynikają z wartości domyślnych ustawionych dla tego typu elementów w przeglądarce.
- Z kolei w sekcji „Styles” (Style) są tylko reguły CSS wyraźnie określone przez administratora witryny. Każda podsekcja reprezentuje tutaj inne miejsce w kodzie strony, w którym zapisano odpowiednią regułę CSS (taką, która ma wpływ na wybrany element HTML). Jeśli zauważysz regułę, która powoduje problem na stronie, możesz kliknąć link w prawym górnym rogu podsekcji, by wczytać wiersz lub dokument, w którym wprowadzono tę regułę.
Jedna z najbardziej przydatnych funkcji karty Elements (Elementy) to możliwość edytowania kodu, który sprawdzasz. Po znalezieniu wiersza kodu HTML lub reguły CSS, która prawdopodobnie powoduje problemy na stronie, możesz zmienić kod, by przekonać się, czy Twoje przypuszczenia są słuszne. Zmiany pojawią się tylko w wersji strony zapisanej w tymczasowej pamięci przeglądarki. Nie będą widoczne po odświeżeniu strony (ani dla innych użytkowników, którzy na nią wejdą).
Karta Resources (Zasoby): pozwala przejrzeć tabelę z różnymi zasobami, które zostały wczytane wraz ze sprawdzaną stroną. Są tam grafiki, dokumenty HTML, pliki JavaScript i inne elementy. Karta przydaje się do rozwiązywania problemów z Campaign Managerem 360 – funkcja wyszukiwania obejmuje wszystkie zasoby dostępne dla strony, a nie tylko samą stronę.
ZASTOSOWANIA

Znajdowanie tagów, które nie są zapisane na stronie: karta Elements (Elementy) zawiera renderowany kod HTML strony, jednak tagi miejsca docelowego nie zawsze są uruchamiane dzięki instrukcjom w kodzie strony. Z tego względu najłatwiejszym i najpewniejszym sposobem znajdowania wdrożonych tagów miejsc docelowych jest użycie funkcji wyszukiwania na karcie Resources (Zasoby).
Karta Network (Sieć): to wbudowany sniffer proxy, który monitoruje komunikację HTTP ze stroną – podczas wczytywania i później.
ZASTOSOWANIA
- Sprawdzanie, czy tag miejsca docelowego/Floodlight jest uruchamiany: sniffer proxy to najbardziej przydatne narzędzie do sprawdzania poprawności tagów i rozwiązywania problemów. Jeśli tag się nie uruchamia, nie może śledzić aktywności ani wyświetlać treści kreacji zgodnie z oczekiwaniami. Z kolei gdy nasze serwery odbierają poprawne wywołania (z prawidłową składnią i formatowaniem), nie sprawdzają, jak tag został wdrożony (w zależności od charakteru strony mogą to jednak brać pod uwagę). Karta Network (Sieć) pozwala wykryć, czy tag miejsca docelowego/Floodlight został uruchomiony, a jeśli tak – upewnić się, że składnia wywołania pasuje do adresu URL w niezmienionej wersji tagu.
- Pomiar czasu oczekiwania: na karcie Network (Sieć) oprócz informacji o tym, czy wykonano wywołanie, pojawia się też czas, po którym otrzymano odpowiedź na konkretne żądanie. Dzięki temu możesz zmierzyć czasy oczekiwania – szczególnie w przypadku dynamicznych tagów Floodlight. Gdy funkcja Floodlight powoduje znaczne opóźnienie przy wczytywaniu strony, kontrola wywołań wykonywanych przez piksele doczepione często pomaga ustalić przyczynę problemu. Ogólnie mówiąc, opóźnienie rzadko wynika z działania samego tagu Floodlight. Częściej powoduje je jeden z pikseli doczepionych w tagu.
Karta Scripts (Skrypty): możesz używać jej do debugowania kodu JavaScript. To nieocenione narzędzie dla twórców witryn, ale nie ma bezpośredniego związku z kontrolą jakości elementów i rozwiązywaniem problemów z Campaign Managerem 360.
Karta Timeline (Oś czasu): pokazuje ruch HTTP i wykorzystanie pamięci w czasie. Podobnie jak karty Network (Sieć), można jej używać do wykrywania źródeł opóźnień. Inne zastosowania nie dotyczą problemów z Campaign Managerem 360.
Karta Profiles (Profile): to narzędzie, które pozwala twórcom witryn optymalizować wykorzystanie procesora przez aplikacje internetowe. Nie przydaje się w przypadku problemów z Campaign Managerem 360.
Karta Audits (Audyty): analizuje wczytywaną stronę, po czym wyświetla sugestie i metody optymalizacji, które umożliwiają skrócenie czasu wczytywania strony oraz zwiększenie postrzeganej (i rzeczywistej) szybkości działania. Nie przydaje się w przypadku problemów z Campaign Managerem 360.
Karta Console (Konsola): automatycznie wykrywa błędy w kodzie strony. Gdy dzięki informacjom na karcie Network (Sieć) stwierdzisz, że tag się nie uruchamia, karta Console (Konsola) może pomóc Ci ustalić, dlaczego tak się dzieje.
ZASTOSOWANIA
Rozwiązywanie problemów ze składnią: jeśli tag nie jest uruchamiany, otwórz kartę Console (Konsola), by sprawdzić, czy Chrome wykrył jakieś błędy. Przede wszystkim zwróć uwagę na te komunikaty:

Przydatną funkcją karty Console (Konsola) jest to, że komunikat o błędzie jest połączony z wierszem i dokumentem, w którym wystąpił problem. Dzięki temu łatwiej znajdziesz i poprawisz błędny wiersz w kodzie. Jednak funkcja nie zawsze wskazuje właściwe miejsce. O ile mechanizm wykrywania błędów dostępny na tej karcie działa bez zarzutu, to funkcja analizy źródła problemu jest nieco mniej dokładna – może wskazać wiersz, który jest w pobliżu faktycznego błędu w kodzie.
- „NS_IMAGELIB”: ten błąd może wystąpić wtedy, gdy URL w parametrze „src” w elemencie iframe wskazuje grafikę. Takie połączenie uniemożliwia poprawne uruchomienie tagu miejsca docelowego lub Floodlight, choć w przypadku tagu Floodlight mimo błędu może zostać przypisany udział w konwersji. Jeśli więc ten błąd pojawi się w tagu Floodlight, żaden piksel firmy zewnętrznej umieszczony w tym tagu nie zostanie uruchomiony.
- „Unsafe JavaScript attempt to access frame with URL” (Niebezpieczna próba uzyskania dostępu w kodzie JavaScript do ramki z adresem URL): ten błąd można zignorować – to tylko ostrzeżenie o zabezpieczeniach spowodowane tym, że na stronie umieszczono elementy iframe z różnych domen. Ostrzeżenie pojawia się tylko przy ustawionym bardzo wysokim poziomie zabezpieczeń w przeglądarce, więc większość użytkowników go nie widzi. Nie ma ono wpływu na działanie tagów Floodlight (ani pikseli doczepionych).
- „Resource interpreted as '_blank_' but transferred with MIME type” (Zasób zinterpretowany jako „_blank_”, ale przesłany z typem MIME): ten komunikat informuje o wystąpieniu problemu z formatem pliku. MIME to identyfikator formatów plików w internecie. Błąd może pojawić się wtedy, gdy zasób zostanie wczytany z pliku o niewłaściwym rozszerzeniu (np. .gif zamiast .jpeg).
- „Uncaught TypeError” (Nieprzechwycony błąd typu): ten komunikat informuje o wystąpieniu błędu związanego z typem elementu HTML na stronie. Zwykle oznacza to, że kod funkcji JavaScript jest niepoprawny.
- „Uncaught SyntaxError” (Nieprzechwycony błąd składni): ten komunikat informuje o wystąpieniu błędu związanego ze składnią elementu na stronie. Zwykle oznacza to, że w niewłaściwy sposób użyto dodatkowego znaku (<"/-*^#).

Czy to było pomocne?

Jak możemy ją poprawić?