Google Chrome: веб-инспектор по вызову (Аналитика)

Как веб-инструменты в Chromeрешают digital-маркетинговые задачи? Об этом в обзоре с наглядными примерами

Какие задачи стоят перед теми, кто занимается созданием и продвижением сайтов? Очевидно, что иногда нужно проверить тот или иной компонент веб-страницы и исправить его. На помощь приходит панель инструментов GoogleChrome для веб-мастеров. А именно такие её вкладки, как

  • Elements,
  • Network,
  • Sources,
  • Timeline,
  • Profiles,
  • Resources,
  • Audits,
  • Console,
  • Pagespeed.

Кликаем правой кнопкой мыши на странице сайта и видим следующее меню:

Google Chrome: веб-инспектор по вызову (Аналитика)

Нас интересует «Просмотр кода элемента». Кликаем на него и попадаем на панель инструментов с нужными нам вкладками.

Google Chrome: веб-инспектор по вызову (Аналитика)

Ваш заголовок помещается в новой выдаче Google?

В обновленной поисковой выдаче Google некоторые заголовки видны не целиком. Шрифт увеличился, а размер контейнеров для заголовков остался прежним. Итог – заголовок виден не полностью.

Google Chrome: веб-инспектор по вызову (Аналитика)

Это можно исправить следующим образом. Открываем панель инструментов и переходим на вкладку Elements.

Google Chrome: веб-инспектор по вызову (Аналитика)

Дважды щелкните на текст, который вы хотите изменить. Убираем лишнее слово из заголовка и нажимаем Enter.

Google Chrome: веб-инспектор по вызову (Аналитика)

Готово.

Google Chrome: веб-инспектор по вызову (Аналитика)

Исправляйте и редактируйте веб-страницу в несколько кликов

Допустим, вы хотите создать интересный контент с блестящим заманчивым заголовком. Заголовков и текстов множество, и то, что поместили на страницу сегодня, завтра уже может разонравиться. Что делать?

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

Google Chrome: веб-инспектор по вызову (Аналитика)

Или можно просто дважды кликнуть по нему. В общем, быстро и в любой момент на веб-странице можно что-то поменять или отредактировать HTML-код для вставки.

Google Chrome: веб-инспектор по вызову (Аналитика)

Учимся пользоваться вкладкой Emulationи сравниваем экраны мобильных устройств

Чтобы узнать, как будет выглядеть веб-страница на экране мобильного устройства, открываем инструменты и выбираем внизу Emulation. Выбираем, какое конкретно устройство нас интересует, и ставим напротив него галочку. Готово! Сбросить же эмуляцию можно при помощи Reset.

Google Chrome: веб-инспектор по вызову (Аналитика)

Если же вы затрудняетесь отыскать вкладку Emulation, то просто нажмите на консоль hide drawer, которая тоже находится на панели инструментов. Это такие три черточки с одной галочкой.

Google Chrome: веб-инспектор по вызову (Аналитика)

Один клик на неё – и внизу появляется нужная вкладка Emulation.

Проверяйте, установлен ли на сайте код Google Analytics

С помощью инструментов Chromeможно проверить наличие кода Google Analytics на сайте. Для этого открываем панель веб-инструментов и переходим на вкладку Network. Затем обновляем страницу и вводим фразу «Analytics» в поле поиска. Жмём Enter.

Google Chrome: веб-инспектор по вызову (Аналитика)

В результате этого в списке найденных результатов (с правой стороны) отобразиться значок GA. Он также будет виден и с левой стороны, во вкладке Preview.

Значок Google Analytics может отображаться по-разному:

  • analytics.js,
  • ga.js,
  • dc.js.

Нет ли ошибок при учете рефереров?

Источник входящего трафика иногда определяется неверно. Отследить трафик и избежать снижения органического охвата помогут инструменты Chrome.

Открываем панель инструментов и переходим на Network. Затем, на вкладке Headersв правом поле, просматриваем данные о посещении. Именно они и отправляются в GoogleAnalytics.

Google Chrome: веб-инспектор по вызову (Аналитика)

Проверяйте HTTP заголовки для канонических ссылок и X-Robots

Здесь мы проверяем заголовки HTTP с помощью Chrome. Делаем это следующим образом:

  • На панели инструментов выбираем Network,
  • Кликаем на www.distilled.net (сайт взят для примера).
Google Chrome: веб-инспектор по вызову (Аналитика)

Просматриваем заголовки HTTP на наличие ошибок. В приведенном примере канонический тег указывает на домашнюю страницу example.com/home, а должен быть направлен на example.com и никуда больше.

Google Chrome: веб-инспектор по вызову (Аналитика)

Учитываем коды состояния и редиректы

Проверка кодов состояния и редиректов с помощью инструментов GoogleChromeтакже возможна. На панели выбираем вкладку Network и переходим туда. После чего видим коды, перенаправляющие пользователей на нужную страницу. На картинке ниже отображена ситуация до переадресации пользователя и после неё.

Google Chrome: веб-инспектор по вызову (Аналитика)

Улучшайте скорость загрузки сайта

Как проверить скорость загрузки сайта и улучшить её? Chromeпоможет и в этом. Для этого на панели инструментов открываем вкладку Audits – «проверки».

Google Chrome: веб-инспектор по вызову (Аналитика)

Нажмите «ReloadPageandAudirontheLoad» - готово, проверка скорости загрузки сайта запущена и займет она меньше минуты.

Google Chrome: веб-инспектор по вызову (Аналитика)

После завершения аудита вы увидите список рекомендаций по улучшению скорости загрузки.

Google Chrome: веб-инспектор по вызову (Аналитика)

Информацию о заходах на сайт тоже можно получить с помощью веб-инструментов Chrome.

Google Chrome: веб-инспектор по вызову (Аналитика)

Посмотрев результаты аудита, сразу же перейдите в Network, где увидите временную шкалу. На ней показывается время каждого посещения.

image
Size: 0.03 Mb

Источник: http://www.seonews.ru/analytics/google-chrome-web-tools/

Заказать сайт, Обслуживание, продвижение, раскрутка, seo сайтов и реклама в Интернете
Внимание Акция! Сайт за 10 дней! Вы можете заказать разработку любого сайта за 10 рабочих дней, с доплатой всего 30% от его стоимости! >>>
Внимание Акция! Ждем новых друзей! Скидка 10% на услуги по созданию и(или) обслуживанию вашего сайта при переходе к нам от другого разработчика.
VPS