Как выглядит сообщение в консоли браузера о просмотре Метрики?
Подписывайтесь на наши сообщества по интернет-маркетингу
Видеоматериалы:
Канал в Telegram:
Я проходил сертификацию множество раз, чтобы база ответов на этом сайте была наиболее полной из всех, которые доступны в сети. Если вы нашли ошибку на сайте или какой-либо вариант ответа очевидно неверный, сообщите мне об этом через обратную связь — я обязательно исправлю. Также, буду благодарен, если вы отправите мне вопросы, которых пока нет на сайте.
Проверка наличия счетчика на страницах сайта
Системы аналитики в наши дни обладают огромным функционалом — позволяют отслеживать трафик, тестировать новые предложения, формировать представление о своей целевой аудитории, и дают массу полезных функций. Поэтому проверка их корректной установки, как и проверка наличия на всех страницах, очень важна.
Как проверить работу счётчика
Чтобы узнать, правильно ли установлен Google Analytics, нужно авторизоваться в аккаунте аналитики, открыть представление ресурса и перейти в категорию «Отчеты» — «В режиме реального времени». Если в отчёте появились данные о вашем визите, значит счётчик работает.
Корректность работы Яндекс.Метрики проверяется специальным запросом. К адресу сайта добавляется специальный параметр ?_ym_debug=1 и загружается страница. После чего в консоли браузера, если счетчик работает, вы увидите его номер и данные, которые он отправляет.
Также корректность работы счетчика можно проверить по значку на странице с доступными счетчиками.
Но стоит отметить, что значок актуален только для одной страницы — той, которая указана на странице «Настройка».
Поэтому работу Метрики на каждой странице придется проверять другим методом. Необходимо зайти в уже знакомые вам инструменты разработчика на вкладку «Консоль», и ввести в строку служебное слово yaCounterID, где ID — идентификатор счетчика. Если счетчик установлен, вы увидите в консоли примерно вот такую запись:
Таким образом, вы сможете проверить работу систем аналитики на всех важных для вас страницах сайта.
Еще один способ, проверить наличие счетчика, это перейти в режим просмотра исходного кода страницы (Ctrl+U) и проверить там наличие соответствующего кода.
Проверка наличия счётчика с помощью программ
Проверять наличие метрик вручную это отличный экспресс-метод. Но если у вас на сайте очень много страниц, то такая проверка может сильно затянуться. Поэтому их наличие можно проверить с помощью специальных программ. Мы в своей работе отдаем предпочтение в пользу Screaming Frog SEO Spider.
Для начала необходимо настроить специальный фильтр, для этого переходим в «Configuration» — «Custom» — «Search»:
В параметрах фильтра указываем фрагмент кода системы аналитики, наличие которого мы хотим проверить. Например, Яндекс.Метрики:
После этого нажимаем «ОК» и запускам программу. По окончанию обхода на вкладке «Custom» будет список всех страниц, содержащих искомый фрагмент кода.
Наличие счетчика Google Analytics программа Screaming Frog SEO Spider способна проверять автоматически, без настройки фильтров, информация об этом находится на вкладке Analytics.
Также, наличие систем аналитики можно проверить при помощи специальных браузерных расширений. Одним их таких является Ghostery.
Средства консоли Chrome, которыми вы, возможно, никогда не пользовались
Консоль инструментов разработчика Chrome — это, вероятно, одно из самых широко используемых и самых полезных специализированных средств браузера. Консоль даёт программисту множество интересных возможностей. Она помогает в отладке, профилировании и мониторинге кода страниц.
Материал, перевод которого мы сегодня публикуем, посвящён рассказу о некоторых возможностях консоли Chrome, которые известны не так широко, как они того заслуживают.
Функция monitor
Функция monitor используется для организации мониторинга других функций. В частности, она позволяет узнать о том, когда некая функция была вызвана, и о том, с какими параметрами она была вызвана. Рассмотрим пример (его код вводится в консоли Chrome):
function traceFunc (arg) < >monitor(traceFunc)Функция traceFunc передаётся функции monitor в качестве аргумента. Теперь, когда функция traceFunc вызывается, мы получим уведомление об этом (опять же, в консоли):
traceFunc(90) function traceFunc was called with arguments: 90
Использование функции monitor
Функция unmonitor
Функция unmonitor позволяет отключить мониторинг функции, наблюдение за которой ранее было начато с использованием функции monitor . Для того чтобы прекратить мониторинг функции traceFunc , воспользуемся следующей конструкцией:
unmonitor(traceFunc)Если после этого вызывать traceFunc , то никаких уведомлений в консоль выведено не будет.
traceFunc(90)
Вызов функции, мониторинг которой отключён, не приводит к выводу в консоль сведений об этом вызове
Функция monitorEvents
Схема использования функции monitorEvents выглядит так:
monitorEvents(object,[,events])Эта функция позволяет отслеживать возникновение событий объектов и выводит в консоль сведения об этих событиях.
Предположим, на странице есть кнопка, описываемая следующим кодом:
Начнём отслеживать событие click этой кнопки:
monitorEvents(button, "click")Если после начала наблюдения за событием click щёлкнуть по кнопке — в консоль будут выведены сведения о событии.
Кнопка и запуск мониторинга её события click
Мониторить можно и несколько событий, передавая функции monitorEvents , в качестве второго аргумента, массив:
monitorEvents(button, ["click", "mouseover"])Теперь под наблюдением находятся события click и mouseover . В результате в консоль попадают сообщения и о нажатиях на кнопку, и о том, что над ней провели мышью.
Мониторинг событий кнопки click и mouseover
Можно организовывать мониторинг групп событий:
monitorEvents(button, ["click", "mouse"])Строка mouse — это универсальный идентификатор группы событий, связанных с мышью. Например — mouseover , mousemove , mouseout . Как и в случае с подпиской на конкретные события, подписка на универсальный идентификатор событий приведёт к выдаче уведомлений при возникновении таких событий.
Мониторинг событий кнопки, связанных с нажатием на неё и с мышью
Конечно, функция monitorEvents применима и к другим объектам, а не только к кнопкам. То же самое касается и событий, за которыми с её помощью можно наблюдать. Это — не только click и события мыши.
Функция unmonitorEvents
Функция unmonitorEvents позволяет отменить наблюдение за событиями объекта, начатое функцией monitorEvents .
Предположим, мы решили отслеживать нажатия на кнопку:
monitorEvents(button, "click")В результате при щелчках по кнопке сведения об этих событиях попадают в консоль. Для того чтобы прекратить мониторинг, нужна такая конструкция:
unmonitorEvents(button, "click")Теперь система перестаёт мониторить событие click кнопки.
После отказа от мониторинга события click отчёты о щелчках по кнопке перестают попадать в консоль
Конструкция $_
Конструкция $_ позволяет обратиться к результату последнего выражения, выполненного в консоли.
Предположим, мы ввели в консоли выражение 2 + 2 и выполнили его. Это дало нам 4 .
Потом мы ввели и выполнили выражение 3*2 . Это дало нам 6 .
Оказалось, что мы выполнили два выражения, самым свежим из которых является 3*2 . Если теперь ввести в консоль $_ и нажать Enter — выведется результат выражения 3*2 , то есть — 6 .
Использование конструкции $_
Функция copy
Функция copy позволяет копировать данные, переданные ей, в буфер обмена.
Выполним, например, такую команду:
copy("nnamdi")Это приведёт к копированию в буфер обмена строки nnamdi . Для того чтобы это проверить — выполните в консоли вышеприведённую команду, а потом попробуйте вставить то, что есть в буфере обмена, в адресную строку браузера. У вас должно получиться нечто, напоминающее следующий рисунок.
Программное копирование данных в буфер обмена
Функция clear
Функция clear позволяет очистить историю выполнения команд в консоли. Эта функция полезна в тех случаях, когда консоль оказывается переполненной различными выведенными в неё материалами, а вам хотелось бы убрать из неё всё то, что в неё выведено.
Функция keys
Функция keys(object) , так же, как и метод Object.keys , возвращает массив ключей свойств объекта:
const obj = keys(obj)
Использование функции keys
Функция values
Функция values похожа на метод Object.values . Она возвращает массив значений свойств объекта.
const obj = values(obj)
Использование функции values
Функция getEventListeners
Функция getEventListeners возвращает сведения о событиях, зарегистрированных для объекта. Например, если зарегистрировать для кнопки некие события — функция getEventListeners , которой передали эту кнопку, возвратит объект, содержащий, в виде массивов, описание событий кнопки.
Предположим, на странице имеется такой код:
function clickHandler() < >function mousedownHandler() < >function mouseoverHandler() Этот код описывает кнопку и три события: click , onmousedown и onmouseover . Событиям назначены обработчики clickHandler , mousedownHandler и mouseoverHandler .
Вызовем в консоли следующую команду:
getEventListeners(button)
Сведения об обработчиках событий кнопки
У объекта, выданного после выполнения команды getEventListeners(button) , имеются свойства click , mousedown и mouseover , имена которых соответствуют именам событий, обработчики которых назначены кнопке. В свойствах содержатся массивы объектов, содержащих подробные сведения о событиях.
Функция $
Функция $ возвращает первый из элементов DOM, удовлетворяющих переданному ей селектору. Схема вызова функции выглядит так:
$(elementName, [,node])Предположим, на странице есть следующий код:
Этот код описывает четыре кнопки.
Выполним теперь такую команду:
$("button")Ниже показано то, что попадёт в консоль после её выполнения.
Результат выполнения команды $(«button»)
Как видно, команда возвратила кнопку Button1 . Эта кнопка является первым элементом button в документе. После того, как в нашем распоряжении оказывается DOM-узел элемента, мы можем обращаться к его свойствам и методам.
Например, для того, чтобы узнать идентификатор кнопки, можно воспользоваться такой конструкцией:
$("button").id
Выяснение идентификатора кнопки
Пользуясь функцией $ , можно указывать узел DOM, первый элемент которого нас интересует.
Предположим, кнопки Button2 , Button3 и Button4 из предыдущего примера поместили в элемент :
Для выбора первой кнопки из тех, что вложены в , можно воспользоваться такой командой:
$("button", document.querySelector("div"))
Обращение к элементу, вложенному в другой элемент
Как видно, теперь $ возвращает кнопку Button2 , так как это — первый элемент button , вложенный в элемент
Функция $$
Функция $$ работает так же, как вышеописанная функция $ . Но она возвращает все подходящие элементы. Её вызывают так:
$$(element, [,node])Предположим, на странице, как и в предыдущих примерах, есть четыре кнопки.
Вызовем следующую команду:
$$("button")
Использование функции $$
После вызова $$ , как видно на предыдущем рисунке, в нашем распоряжении окажется массив элементов button .
Элементы можно выбирать и из указанного при вызове $$ узла DOM. Например, если на странице имеется несколько кнопок, заключённых в , мы можем, для выбора всех этих кнопок, воспользоваться такой конструкцией:
$$("button", document.querySelector("div"))
Использование функции $$ для выбора элементов, вложенных в другой элемент
Итоги
Консоль Chrome — полезный инструмент. По мере выхода новых версий Chrome расширяются и возможности его консоли. Поэтому полезно периодически заглядывать сюда в поиске чего-то нового и интересного.
Уважаемые читатели! Какими средствами консоли Chrome вы пользуетесь чаще всего?
- Блог компании RUVDS.com
- Веб-разработка
- Браузеры
- Софт
4 способа проверить, корректно ли работает счетчик Яндекс.Метрики
Вы установили счетчик Яндекс.Метрики. Теперь нужно проверить, действительно ли он работает и собирает информацию. Геннадий Жирнов из PiRania рассказывает о четырех простых способах это сделать.
Ещё больше полезных статей и смешных мемов в нашем Telegram-канале
Если вы установили счетчик с помощью кода из Яндекс.Метрики и не используете Google Tag Manager, вам подойдет любой из первых трех способов.
Если вы установили счетчик через GTM, воспользуйтесь четвертым способом.
Проверим, работает ли счетчик Метрики:
- С помощью инструмента Метрики.
- С помощью консоли в браузере.
- Через код страницы.
- Через расширение для GTM.
Способ первый: с помощью инструмента Метрики
Открываем Яндекс.Метрику, переходим в настройки на вкладку «Счетчик».
Скроллим вниз, вводим адрес проверяемой страницы и нажимаем «Проверить».
Далее жмем «Перейти к результатам проверки».
Если появится соответствующее уведомление, то счетчик установлен корректно.
Из-за чего уведомление могло не появиться и что тогда делать:
- Счетчик установлен с «отложенной загрузкой» или для его загрузки требуется действие. В таком случае нужно подождать или выполнить действие, которое вы выставили условием для загрузки счетчика.
- В браузере работают скрипты или расширения, которые могут помешать работе счетчика. Например, это Adblock. В этом случае нужно отключить все скрипты и расширения и проверить еще раз.
- Счетчик отсутствует или установлен некорректно. Чтобы убедиться окончательно, можно перейти ко второму способу.
Способ второй: с помощью консоли в браузере
На главной странице Яндекс.Метрики находим ID счетчика — он отображается под названием.
Открываем новую вкладку в браузере. В адресной строке вводим URL страницы, которую хотим проверить, добавляем к нему «?_ym_debug=1» и переходим.
На странице нажимаем правую клавишу мыши, выбираем «Посмотреть код».
В открывшейся панели выбираем вкладку Console. Рядом со словом Counter видим номер.
Если он отображается и его номер совпадает с ID счетчика, который мы нашли в Метрике, все должно работать корректно.
Если данных в консоли нет, причины могут быть такими:
- В браузере работают скрипты или расширения, которые мешают работе счетчика. Отключаем Adblock и другие расширения и скрипты.
- Домен mc.yandex.ru заблокирован в файле hosts. Проверяем файл hosts на сервера.
- Счетчика нет на сайте или он установлен некорректно.
Способ третий: через код страницы
Также потребуется ID счетчика: копируем его себе из Метрики.
Открываем сайт, нажимаем правую клавишу мыши на странице, выбираем «Просмотр кода страницы».
В строке поиска вводим номер счетчика.
Если код найдет, то Метрика установлена корректно.
Способ четвертый: через расширение для GTM
Устанавливаем расширение Tag Assistant Legacy. Переходим на сайт, нажимаем на кнопку расширения и далее на Enable.
Видим, что в этом случае GTM установлен корректно, ошибки не отображаются.
Далее стоит проверить, корректно ли в сам GTM установлен тег счетчика. Заходим в GYM и выбираем «теги».
В триггерах должно быть выбрано All pages.
Если же GTM не отображается в расширении, следует скопировать его ID в интерфейсе.
Далее открываем код проверяемой страницы.
Ищем ID через строку поиска. Совпадений должно быть два.
На скриншоте всё корректно. Если же код на странице не найден, что-то было неправильно сделано при установке счетчика. Нужно заново добавить его код на сайт.