Отслеживание 404 ошибок с помощью Яндекс Тег Менеджера

Новый материал по отслеживанию 404 ошибок для Яндекс Метрики с помощью Яндекс Тег Менеджера.

В моем блоге уже есть несколько материалов по данной теме:

• Отслеживание 404 ошибок в Яндекс Метрике с помощью Google Tag Manager
• Отслеживание 404 ошибок в Universal Analytics (устар.)
• Отслеживание 404 ошибок в Universal Analytics (устар.) с помощью Google Tag Manager
• Отслеживание 404 ошибок в Google Analytics 4

В этой публикации я продемонстрирую те же шаги и последовательность действий, но применительно к Яндекс Тег Менеджеру.

О 404 ошибках

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

Ошибка 404, также известная как Not Found (Не найдено) - это стандартный код ответа протокола HTTP. Он означает, что сервер, с которым связался ваш браузер, не может найти запрошенный ресурс, например, веб-страницу или файл. Другими словами, вы (или посетитель) пытаетесь перейти по ссылке, которая никуда не ведет.

Ошибка 404 может отображаться в браузере по-разному:

• 404 Not Found
• Error 404
• HTTP 404 Not Found
• Страница не найдена
• The page cannot be found
• The requested URL was not found on this server и т.д.

Ошибка 404 может возникнуть по нескольким причинам, как на стороне пользователя, так и на стороне владельца сайта:

• неправильно введенный URL (опечатка в адресе страницы в адресной строке браузера, сознательная или нет);
• удаленная, перемещенная страница (владелец сайта мог удалить страницу или переместить ее на другой адрес, не настроив перенаправление (редирект)) или прекращение существования всего сайта;
• «битые» или «мертвые» ссылки (ссылка на другом сайте или внутри самого ресурса может вести на уже не существующую страницу/перестала работать);
• контент запрашиваемой страницы по какой-либо причине может быть скрыт от пользователей, а перенаправление идет на 404 страницу;
• проблемы с конфигурацией сервера (неправильные настройки сервера или ошибки в файле .htaccess могут приводить к тому, что сервер не может найти нужный контент);
• временные сбои на сервере (иногда ошибка может возникать из-за временных неполадок в работе сервера);
• целенаправленная DDoS-атака/взлом с целью дестабилизации.

Наличие большого количества 404 ошибок может негативно сказаться на сайте:

• потеря трафика - пользователи, столкнувшись с ошибкой, скорее всего, покинут сайт и найдут информацию у конкурентов;
• ухудшение пользовательского опыта (юзабилити) - частые ошибки вызывают недовольство и разочарование у посетителей;
• снижение позиций в поисковой выдаче - поисковые системы могут понизить рейтинг сайта, считая его некачественным или заброшенным;
• упущенная выгода - для коммерческих проектов это может привести к потере потенциальных клиентов и снижению конверсии сайта.

Для отслеживания 404 ошибок в Яндекс Метрике вы можете пойти одним из представленных вариантов:

1. использовать стандартный отчет по страницам в интерфейсе Яндекс Метрики;
2. использовать JavaScript-событие и параметры события (все настройки выполняются напрямую в коде сайта);
3. использовать JavaScript-событие и параметры события (все настройки выполняются через Google Tag Manager);
4. использовать JavaScript-событие и параметры события (все настройки выполняются через Яндекс Тег Менеджер);

Первые три способа подробно рассмотрены в этом руководстве. В этой публикации сосредоточимся на Яндекс Тег Менеджере и различных вариантах отслеживания.

Отслеживание 404 ошибок по заголовку страницы

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

Заголовок страницы (title) 404 в моем примере: Страница не найдена - ... У вас может быть другое название или не быть его вообще. В таком случае обратитесь к разработчику, чтобы он в шаблоне страницы 404 сделал статичный вывод данного заголовка. После этого вы сможете выполнить все нижеприведенные настройки.

Для записи и возврата значения по заголовку той страницы, которую пользователь посетил, в Яндекс Тег Менеджере можно воспользоваться пользовательской переменной. Перейдите в ЯТМ на вкладку Переменные. Нажмите Добавить переменную:

В шаблоне переменной выберите Переменная JavaScript:

Для Имя глобальной переменной задайте document.title:

Введите название переменной и сохраните ее.

Свойство document.title получает или задает текущий заголовок документа. Вы можете протестировать эту конструкцию, перейдя на любой сайт, любую вкладку и открыв консоль разработчика. Введите туда document.title и нажмите Enter.

Далее необходимо создать триггер, который бы активировался не на всех страницах, а когда заголовок страницы содержит Страница не найдена (или какой текст будет в вашем случае). Перейдите на вкладку Триггеры и создайте новый триггер:

Выберите триггер типа Просмотр страницы с дополнительным условием активации - Заголовок страницы содержит Страница не найдена:

У вас вместо Страница не найдена может быть другой текст. Задайте название триггеру и сохраните его.

Теперь осталось создать только тег Яндекс Метрики. Но перед тем, как вы это сделаете, создайте цель типа JavaScript-событие. Задайте название цели и добавьте идентификатор. Например: Отслеживание 404 ошибок и 404error:

Примечательно: я рекомендую использовать условие Идентификатор цели совпадает.

Обязательно запомните идентификатор, он вам понадобится в окончательной настройке тега Яндекс Метрики. В завершение сохраните цель.

Вернитесь в Яндекс Тег Менеджер, перейдите на вкладку Теги и нажмите на кнопку Добавить тег:

В открывшемся окне выберите шаблон тега Яндекс Метрика. Если его в списке нет, вероятно, вы впервые используете данный шаблон тега. Тогда вам необходимо сначала выбрать Шаблоны из каталога:

В открывшемся окне задайте следующие настройки:

• ID счетчика - вставьте идентификатор вашего счетчика Яндекс Метрики. Он отображается вверху страницы;
• Идентификатор цели - задается на странице редактирования счетчика при создании или изменении цели типа JavaScript-событие. Как вы помните, в моем примере 404error);
• Название - произвольное название тега, характеризующее его действие (например: Яндекс Метрика - Отслеживание 404 ошибок);
• Шаблон тега - Яндекс Метрика;

Поставьте галочку рядом с Добавить поле params:

И введите в него следующую конструкцию:

или (по желанию):

Поскольку в Яндекс Тег Менеджере уже есть встроенные переменные, позволяющие извлекать те данные, которые нам нужны для отслеживания, мы просто вставляем в соответствующие места переменные {{Page URL}} и {{Referrer}} соответственно.

• Page URL - полный URL страницы текущей страницы;
• Referrer - адрес страницы, с которой пришел пользователь на текущую страницу.

В качестве триггера активации задайте триггер просмотра страницы, созданный на предыдущем шаге. Итоговый тег будет выглядеть примерно так:

Сохраните тег.

Теперь вы можете проверить корректность срабатывания тега Яндекс Метрики и передачу данных JS-события в аналитику. Для этого активируйте режим предварительного просмотра. В правом верхнем углу Тег Менеджера нажмите на кнопку Предварительный просмотр и дождитесь компиляции ссылки.

Как только это произойдет, нажмите на кнопку Открыть предварительный просмотр:

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

В отдельном окне откроется ваш сайт, а в адресной строке браузера в URL-ссылке будет добавлен специальный параметр _ytm_preview.  Добавьте нижеприведенную конструкцию после параметра _ytm_preview через &, чтобы получилось так:

Примечание: перед тем, как активировать отладчик Метрики, выполните все нужные настройки и отслеживания в Тег Менеджере - создайте триггер, JS-событие в интерфейсе Метрики и тег типа Яндекс Метрика.

Вы можете сделать это даже в режиме Инкогнито, после компиляции ссылки для режима предварительного просмотра ЯТМ. Внизу страницы появится значок . Нажмите на него, чтобы открыть панель отладки. Откройте вкладку Events и перейдите на страницу, искусственно вызвав 404 ошибку.

Если вы все настроили корректно, то на шкале событий увидите достижение JS-цели:

В качестве примера я заранее создал битую ссылку на сайте и разместил ее в этом руководстве (Битая ссылка). При переходе открывается страница с 404 ошибкой. Вместе с JS-событием передается не только URL-адрес, но и реферер (URL-адрес страницы, с которой пользователь перешел на текущую страницу). Параметры события вы можете посмотреть на вкладке Console:

Через некоторое время данные по достигнутой цели отобразятся в Яндекс Метрике в отчете Конверсии:

И отчетах по параметрам событий и параметрам целей:

Теперь вы этот триггер можете использовать для отслеживания и передачи данных в другие аналитические и рекламные инструменты. Например, в пиксель VK Рекламы.

Отслеживание 404 ошибок с помощью переменной «Элемент DOM»

Этот способ можно использовать, если разработчик не задал заголовок для страницы 404 или на сайте нет отдельного шаблона для нее, а в консоли разработчика после ввода команды document.title отображается пустое значение.

Обычно, если в заголовке страницы нет опознавательного знака, он может находиться непосредственно на самой странице - например, в виде текста или надписи/сообщения:

Похожий текст есть и на странице моего блога osipenkov.ru - 404:

Его мы можем использовать в дополнительном условии активации триггера. Как это сделать? Для этого необходимо применить пользовательскую переменную Элемент DOM. О ней я подробно рассказал в этой статье.

Чтобы создать новую переменную Элемент DOM, перейдите в Яндекс Тег Менеджере в раздел Переменные. Нажмите кнопку Добавить переменную. В шаблоне переменной выберите Элемент DOM:

Первое, что нужно задать, это Метод выбора. Вам нужно сообщить Яндекс Тег Менеджеру, какой именно элемент веб-сайта вас интересует. Всего существует два метода выбора:

1. Идентификатор (выбор элемента по его идентификатору);
2. Селектор CSS (выбор элемента по его селектору CSS).

Перейдите на страницу с 404 ошибкой и откройте консоль разработчика. Сделать это можно правой кнопкой мыши - Просмотреть код:

После этого на вкладке Elements вы должны найти HTML-элемент с текстовым содержимым, характеризующий страницу с 404 ошибкой. Это может быть текст 404, страница не найдена, ошибка 404, error 404 или что-либо еще. В моем примере - это просто текст 404. После этого наведите курсор мыши на данный элемент, выделите его (чтобы он подсветился) и нажмите правой кнопкой мыши, вызвав контекстное меню. Выберите Copy - Copy selector:

Чтобы проверить, что вы действительно скопировали то, что нужно, перейдите на вкладку Console и введите такую конструкцию:

, где вместо selector вставьте ваше скопированное значение.

Примечание: конструкция document.querySelector('selector').innerText в JavaScript предназначена для получения текстового содержимого HTML-элемента на веб-странице. Если элемент с указанным селектором найден, document.querySelector() возвращает этот элемент как объект. Если элемент не найден, возвращается null.

Таким образом, вся конструкция document.querySelector('selector').innerText выполняет следующую последовательность действий:

• находит на странице первый HTML-элемент, который соответствует заданному CSS-селектору;
• извлекает и возвращает текстовое содержимое этого элемента в виде строки, при этом игнорируя все HTML-теги.

Нажмите Enter. Вы должны увидеть возвращенное текстовое содержимое выбранного элемента:

Если это так, значит вы все сделали правильно. Если конструкция не вернула нужного значения, значит:

1. вы неверно скопировали селектор (выбрали не тот элемент на странице);
2. на странице несколько элементов с таким селектором и document.querySelector() вернул вам другое значение.

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

Вернитесь в Яндекс Тег Менеджер и создайте пользовательскую переменную типа Элемент DOM. Используйте Метод выбора - Селектор CSS, вставьте в поле скопированный селектор из консоли разработчика. Название атрибута оставьте пустым.

Сохраните переменную, задав ей значение (например - Текст 404).

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

Перейдите в раздел Триггеры и создайте триггер типа Просмотр страницы. Задайте дополнительное условие активации - Текст 404 содержит 404:

У вас вместо 404 может быть другой текст на странице (см. выше). Задайте название триггеру и сохраните его.

Тег Яндекс Метрики будет точно таким же, что и в первом способе, включая параметры события - URL-адрес 404 ошибки и реферер. Не забудьте перед его заполнением создать цель типа JavaScript-событие для отслеживания 404 ошибок и скопировать идентификатор цели:

Сохраните тег.

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

Проверка JS-события с помощью отладки _ym_debug=2:

Проверка параметров событий (вкладка Console):

Отслеживание 404 ошибок с помощью видимых элементов

В приведенном выше способе мы извлекали значение с помощью переменной Элемент DOM. И оно было текстовым. Но что, если на странице 404 нет текста, а присутствует только изображение или какой-либо другой HTML-элемент, к которому мы не можем получить доступ традиционным способом? Например, изображение:

Тогда два предыдущих способа нам не подойдут, поскольку ни в заголовке страницы, ни на самой странице 404 нет текстового содержимого, за который можно было бы «зацепиться». Нам нужен другой подход.

Если представленное изображение на странице уникально и больше нигде на сайте не присутствует (только в момент перехода на несуществующую страницу), то мы можем привязаться именно к нему. Для этого в Google Tag Manager (диспетчере тегов от Google) можно было использовать стандартный триггер Видимость элемента (Element Visibility).

На момент написания данного руководства аналогичного триггера в Яндекс Тег Менеджере нет. Поэтому нам придется использовать собственный код JavaScript. Но перед этим вам необходимо активировать Пользовательский HTML в настройках счетчика Яндекс Метрики.

Для этого перейдите в раздел Настройки - Счетчик:

И включите функцию Пользовательский HTML:

Пользовательский HTML в Yandex Tag Manager (YTM) - это тип тега, который позволяет добавлять на сайт произвольный HTML-код, JavaScript или другие скрипты, которые не поддерживаются стандартными тегами и которых нет в каталоге шаблонов. Код будет выполняться при срабатывании триггера, в нем также можно использовать переменные для динамической подстановки нужных значений.

Сохраните изменения.

Вернитесь в Яндекс Тег Менеджер и создайте тег типа Пользовательский HTML:

В поле HTML вставьте нижеприведенный фрагмент кода:

, где вместо body > div.full_width.not_found > div > div > img вставьте селектор вашего HTML-элемента (например, изображения).

Здесь же вам опять понадобится консоль разработчика и инспектирование элемента с последующим копированием его через контекстное меню (см. выше).

Этот код предназначен для отслеживания определенного события на странице - в данном случае, появления конкретного HTML-элемента. Каждую секунду по заданному селектору CSS он проверяет, появился ли на странице этот элемент. Если элемент найден, то в dataLayer (на уровень данных) отправляется специальное событие error_404. После этого скрипт прекращает работу.

В качестве триггера активации используйте Просмотр страницы или Модель DOM готова, предварительно создав его без каких-либо дополнительных условий активации.

Сохраните тег.

Перейдите на вкладку Триггеры и создайте новый триггер типа Специальное событие:

В названии события добавьте error_404:

Именно такое название используется в приведенном выше скрипте. Вы можете задать свое собственное название, но тогда измените его и в самом пользовательском HTML теге. Если никакие изменения в код вы не вносили (кроме указания селектора для элемента), окончательные настройки для триггера будут точно такими же, как на моих скриншотах.

Сохраните триггер. Тег Яндекс Метрики будет точно таким же, что и в двух других способах, включая параметры события - URL-адрес 404 ошибки и реферер. Отличие - только в триггере.

Примечание: не забудьте перед его заполнением создать цель типа JavaScript-событие для отслеживания 404 ошибок и скопировать идентификатор цели.

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

Проверка JS-события с помощью отладки _ym_debug=2:

Отслеживание 404 ошибок с помощью dataLayer

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

Однако не всегда есть возможность отфильтровать страницу по заголовку, содержащему 404, или использовать пользовательскую переменную Элемент DOM с конкретным условием по текстовому содержимому. Либо же на сайте вообще нет отдельной страницы/шаблона для Page Not Found. Тогда вам необходимо использовать этот способ и привлекать к решению задачи разработчика.

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

Просьба сформировать уровень данных на странице 404, когда пользователь переходит на нее. Пример кода:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event' : 'error_404'
});

После того, как разработчик это сделает, вы можете перейти к заключительной настройке в Яндекс Тег Менеджере. А именно:

• создать триггер специального события с названием события error_404 (как будет указано в вашем ТЗ);

• создать тег Яндекс Метрики с дополнительными параметрами события (по желанию).

Примечание: не забудьте перед его заполнением создать цель типа JavaScript-событие для отслеживания 404 ошибок и скопировать идентификатор цели.

После этого проверьте все свои настройки с помощью режима отладки Яндекс Тег Менеджера, который вам уже хорошо знаком.