Маркетологу: как применять бесплатные инструменты веб-разработчика прямо в браузере Google Chrome. Читайте на Cossa.ru

28 сентября 2020, 12:13

Маркетологу: как применять бесплатные инструменты веб-разработчика прямо в браузере Google Chrome

Аналитики, специалисты по рекламе и все, кто работает в интернете, используют множество сервисов. И даже не задумываются, что обычный браузер тоже способен на многое. Команда Mello рассказывает, чем может быть полезен маркетологу всем привычный Google Chrome.

Маркетологу: как применять бесплатные инструменты веб-разработчика прямо в браузере Google Chrome

Помимо привычных настроек, окон, закладок и тем в Chrome есть инструменты разработчика — мощный функционал для работы с веб-страницами. Изначально созданные для разработчиков, они могут быть полезны и нам.

Чаще всего инструменты разработчика называют просто консолью, но консоль — это только один из инструментов. Разбирать будем Chrome, так как маркетологи обычно работают в нём из-за большого количества расширений. «Хромоподобные» браузеры также подходят.

Приступим. Для начала откроем инструменты. Есть 4 способа:

1. нажать F12;
2. нажать Ctrl + Shift + I;
3. кликнуть в любом месте страницы правой кнопкой мыши и в контекстном меню выбрать пункт «Просмотреть код»;
4. перейти в меню браузера → Дополнительные Инструменты → Инструменты Разработчика.

МегаФон ПроБизнес

Получите Кешбэк 100% за запуск рекламы с МегаФон Таргетом!

Узнать больше >>

Реклама. ПАО «МегаФон». ИНН 7812014560. ОГРН 1027809169585

После этого вы увидите новую панель.

как применять бесплатные инструменты веб-разработчика прямо в браузере Google Chrome

Это и есть инструменты разработчика. Теперь можно и поговорить о конкретных фишках.

Посмотреть мобильную версию сайта

Слева вверху нажмите на иконку с двумя экранами и обновите страницу.

Как посмотреть мобильную версию сайта прямо в браузере Google Chrome

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

Просмотреть код элемента

Иногда вам нужно увидеть код не всей страницы, а конкретного объекта. Либо получить его селектор. Для этого кликните правой кнопкой мыши по нужному объекту и выберите пункт «Просмотреть код».

Как посмотреть код элемента прямо в браузере Google Chrome

При этом на панели справа будет подсвечен код этого элемента.

Как посмотреть код элемента прямо в браузере Google Chrome

Теперь кликните правой кнопки мыши по этому коду и перейдите в меню копирования. Скопируйте весь элемент или селектор.

Как копировать код элемента прямо в браузере Google Chrome

Данная операция очень полезна при настройке триггеров в Google Tag Manager или при работе, например с подменами номеров на сайте при работе с сервисом коллтрекинга.

Помимо копирования вы можете и отредактировать элемент, например, так можно изменить тексты объявлений в выдаче и сделать скриншот, будто это предпросмотр объявления.

Поиск счётчиков систем аналитики

Если вы не пользуетесь расширениями типа analytics debugger, tag assistant, Яндекс. Метрика, то вы всё равно имеете возможность посмотреть id системы аналитики в коде страницы. Для этого в инструментах разработчика зайдите на вкладку Elements, нажмите Ctrl + F. В появившейся строке введите символы для поиска и получите результат. Если что, ещё можно на стрелочки понажимать.

Как посмотреть id счётчиков систем аналитики прямо в браузере Google Chrome

(У нас на сайте не так все просто, поэтому в коде нет id метрики). Данный способ поможет с любым поиском, но имейте в виду — не всегда идентификаторы каких-то тегов можно найти на странице.

Отслеживание событий

Если вам необходимо проверить, какие события отправляются в Яндекс.Метрику или Google Analytics, то на вкладке Console можно получить эту информацию. Необходимо сделать несколько подготовительных действий. Для GA установите расширение analytics debugger (о работе с ним рассказано здесь), а для Метрики прочтите справку. При этом вам будет полезна кнопка очистки консоли (перечёркнутый круг) и настройка Preserve log, которая продолжает запись в консоли после обновления страниц.

Как проверить, какие события отправляются в Яндекс.Метрику или Google Analytics прямо в браузере Google Chrome

Полноценная JavaScript-консоль

Вкладку Console можно использовать и как консоль javascript. Для этого просто вводите нужный код в строке вода и выполняйте его.

Как работать с JavaScript консолью прямо в браузере Google Chrome

А это значит, что вы сможете отправлять коды событий систем аналитики или пикселей соцсетей, чтобы проверить их корректность. Например, проверка пользовательского события для GTM.

Как проверить пользовательское событие для GTM в JavaScript консоли браузера Google Chrome

Мы отправляем событие в консоль и видим, что оно корректно фиксируется GTM. Значит, его можно использовать в ТЗ для разработчиков. Если во время загрузки страницы появляются какие-то ошибки или предупреждения, вы тоже их увидите на вкладке консоли.

Создание переменных GTM типа «Собственный код JavaScript»

С помощью консоли можно быстро проверять, какое значение отдаёт вам браузер, когда вы запрашиваете некоторый объект страницы.

Как проверить, какое значение отдаёт вам браузер, когда вы запрашиваете некоторый объект страницы, в JavaScript консоли браузера Google Chrome

Время загрузки элементов

На вкладке Network можно увидеть, какие элементы загружаются, как быстро и с каким размером.

Как проверить, какие элементы загружаются, как быстро и с каким размером, в браузере Google Chrome

А если вам предстоит работать с протоколом передачи данных Analytics, могут быть интересны строки, начинающиеся с “collect?v=1&”, в них можно посмотреть примеры передаваемых параметров.

Работа с куки

На вкладке Application в разделе Cookies можно полностью очистить файлы cookies, удалить или отредактировать выборочные.

Как работать с куки, удалять и изменять их в браузере Google Chrome

Для одного обзора достаточно. На самом деле возможностей куда больше, и опять же, подойдут они не только разработчикам. Если хочется узнать больше, то обязательно загляните в справку Google.

Источник фото на тизере: Oleg Laptev on Unsplash

Мнение редакции может не совпадать с мнением автора. Ваши статьи присылайте нам на 42@cossa.ru. А наши требования к ним — вот тут.

Телеграм Коссы — здесь самый быстрый диджитал и самые честные обсуждения: @cossaru

📬 Письма Коссы — рассылка о маркетинге и бизнесе в интернете. Раз в неделю, без инфошума: cossa.pulse.is

✉️✨
Письма Коссы — лаконичная рассылка для тех, кто ценит своё время: cossa.pulse.is


Вход на cossa.ru

Уже есть аккаунт?
Авторизуйся через VK:
Vkontakte
Не забудьте написать email на странице своего профиля для управления рассылкой