Использование Инструментов разработчика Chrome для проверки тегов

Инструменты разработчика Chrome позволяют быстро анализировать контент и ресурсы веб-страницы. Они полезны для проверки тегов Менеджера кампаний 360.

Доступ к Инструментам разработчика

1. Щелкните правой кнопкой мыши на любой странице и в открывшемся меню выберите вариант "Просмотр кода элемента". Откроется окно с HTML-кодом элемента, на котором был сделан клик.

2. Выберите Вид > Разработчикам > Инструменты разработчика.

3. Также можно использовать сочетание клавиш Alt + Command + i.

Доступные вкладки и их использование

• Вкладка Elements (Элементы). На ней представлен конечный код HTML страницы, который отличается от исходного. Любые элементы HTML, созданные или измененные с помощью JavaScript при загрузке страницы, будут отражены в конечном коде HTML. Исходный код при этом останется без изменений.

  ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ

  • Поиск измененных тегов. С помощью этой вкладки можно находить теги Floodlight и теги мест размещения, реализованные на странице и проверять, были ли они изменены. Рекомендуется выполнять поиск по слову double, поскольку URL в тегах Менеджера кампаний 360 содержат строку doubleclick (название домена). Обнаружив тег, сравните его с тегом, экспортируемым из интерфейса пользователя в разделе "Управление трафиком".
  • Устранение неполадок с CSS. На вкладке Elements справа показаны различные атрибуты CSS, которые определяют, как и где будет отображаться выбранный элемент HTML.
  • В разделе Computed Style (Вычисленный стиль) перечислены все правила CSS, которые применяются к выбранному элементу (независимо от того, заданы ли они в коде CSS администратором сайта или обусловлены стандартными настройками браузера для элементов HTML такого типа).
  • В разделе Styles показаны только те правила CSS, которые задал администратор сайта. Каждый подраздел соответствует тому участку в коде страницы, где было написано правило CSS, действующее на выбранный элемент HTML. Если вы нашли правило, которое вызывает сбои на странице, можно нажать на ссылку в правом верхнем углу соответствующего подраздела, чтобы загрузить строку или документ, содержащий это правило.

  Вкладка Elements особенно удобна тем, что в ней можно изменять просматриваемый код. Если вы считаете, что обнаружили строку в коде HTML или правило CSS, которое является причиной неправильной работы страницы, вы можете просто изменить код, чтобы проверить свое предположение. Эти изменения коснутся только того экземпляра страницы, который сохранен во временных файлах вашего браузера. Эти изменения исчезнут, если страницу перезагрузить. А если ее откроет другой пользователь, они не будут видны.

• Вкладка Resources (Ресурсы) позволяет проверить таблицу различных ресурсов, которые были загружены вместе с рассматриваемой страницей. К их числу относятся изображения, документы HTML, файлы JavaScript и многое другое. Эта вкладка удобна для устранения неполадок, связанных с Менеджером кампаний 360, потому в ней можно выполнять поиск по всем ресурсам на странице, а не только в ней самой.

  ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ

  Поиск тегов, не записанных на странице. На вкладке Elements можно посмотреть конечный HTML-код страницы, но для работы тегов мест размещения может быть недостаточно записи кода на страницу. Поэтому самый простой и надежный способ найти реализованный тег размещения – выполнить поиск на вкладке Resources.

• Вкладка Network (Сеть) – это встроенный прокси-анализатор, который позволяет отслеживать HTTP-трафик страницы во время и после ее загрузки.

  ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ

  • Проверка срабатывания тегов Floodlight и тегов мест размещения. Прокси-анализатор – незаменимый инструмент проверки и устранения неполадок. По сути, если тег не срабатывает, он не может должным образом выполнять отслеживание или возвращать креатив. Аналогично, если вызов отправлен должным образом (без нарушений синтаксиса, в правильном формате), он будет принят нашим сервером независимо от того, как реализован тег (правда, при этом может учитываться характер контента на странице). Используйте вкладку Network, чтобы определить, сработал или нет тег места размещения или тег Floodlight. Если тег сработал, убедитесь, что синтаксис вызова соответствует тому URL, который содержится в неизмененной версии тега.
  • Проверка времени ожидания. Помимо проверки вызова, на вкладке Network можно увидеть, сколько времени понадобилось, чтобы получить ответ на тот или иной запрос. Это удобно при проверке времени ожидания – особенно для динамических тегов Floodlight. Если Floodlight вызывает слишком большую задержку при загрузке страницы, отслеживание вызовов, отправленных совмещенными пикселями, может помочь установить причину проблемы. Маловероятно, что эта задержка вызвана самим тегом Floodlight. Скорее всего, она связана с одним из совмещенных пикселей в теге.

• Вкладка Scripts (Скрипты) предназначена для отладки кода JavaScript. Она является незаменимым инструментом для веб-разработчиков, но не используется для проверки или устранения неполадок в Менеджере кампаний 360.

• Вкладка Timeline (Хронология) показывает хронологию трафика HTTP и загрузки памяти. Как и вкладка Network, она помогает выявить причины задержки. Это единственное ее применение, связанное с Менеджером кампаний 360.

• Вкладка Profiles (Профили) – это инструмент, который веб-разработчики могут использовать для оптимизации загрузки процессора в веб-приложениях. Эта вкладка не используется в связи с Менеджером кампаний 360.

• Вкладка Audits (Проверка) позволяет анализировать страницы в процессе загрузки и предлагать варианты их оптимизации для уменьшения времени загрузки и улучшения кажущейся (и действительной) реакции. Эта вкладка не используется в связи с Менеджером кампаний 360.

• Вкладка Console (Консоль) автоматически обнаруживает ошибки в коде страницы. После того как с помощью вкладки Network вы определили, что тег не срабатывает, вкладка Console поможет вам понять, почему это происходит.

  ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ

  Исправление синтаксических ошибок. Если тег не срабатывает, проверьте вкладку Console: на ней могут быть указаны ошибки, которые обнаружил Chrome. Основные ошибки, на которые нужно обратить внимание, следующие:

  Вкладка Console удобна ещё и тем, что сообщения об ошибках в ней связаны со строкой и документом, вызвавшими ошибку. Это позволяет сразу увидеть фрагмент кода, который нужно изменить. Однако полностью полагаться на эту функцию нельзя. Выявление ошибок выполняется достаточно надежно, но строка, в которой эта ошибка находится, может быть указана неточно.

  • NS_IMAGELIB. Эта ошибка может возникнуть, если URL с параметром src в теге Iframe реализован как изображение. В этом случае тег места размещения или тег Floodlight может не сработать должным образом. Хотя в случае Floodlight может быть засчитана конверсия даже в случае ошибки. Тем не менее, если эта ошибка произошла в теге Floodlight, ни один из сторонних пикселей, реализованных в этом теге, не сработает.
  • Unsafe JavaScript attempt to access frame with URL ("Небезопасная попытка JavaScript получить доступ к фрейму в URL"). Это сообщение системы безопасности можно проигнорировать, поскольку оно просто предупреждает о встраивании на странице тегов iFrame из других доменов. Такое сообщение появится только у пользователей, выбравших очень высокий уровень безопасности. Но оно никак не повлияет работу тегов Floodlight (или совмещенных пикселей.
  • Resource interpreted as '_blank_' but transferred with MIME type " ." ("Ресурс интерпретирован как _blank_, но передан с типом MIME "."). Это означает проблему с форматом файла. MIME является идентификатором формата файлов в Интернете. Эта ошибка может произойти, когда ресурс загружается с неправильным расширением файла (например, если файл формата JPEG имеет расширение .gif).
  • Uncaught TypeError ("Необработанная ошибка TypeError"). Означает, что в одном из элементов HTML на странице произошла ошибка TypeError. Как правило, это говорит о том, что существует в коде одной из функции JavaScript есть ошибка.
  • Uncaught SyntaxError ("Необработанная ошибка SyntaxError"). Означает, что в одном из элементов HTML на странице допущена синтаксическая ошибка. Обычно это говорит о неправильном использовании символов <"/ - * ^ #.