GTM: Ловим баги на лету! Как мы настроили отслеживание ошибок с Google Tag Manager

Привет‚ коллеги! Сегодня мы хотим поделиться нашим опытом использования Google Tag Manager (GTM) для отслеживания ошибок на веб-сайтах. Да‚ вы не ослышались! GTM – это не только про аналитику и маркетинг‚ но и про мониторинг качества вашего продукта. Мы расскажем‚ как с его помощью можно оперативно выявлять проблемы и быстро реагировать на них.

В нашей практике часто возникала ситуация‚ когда пользователи сталкивались с ошибками на сайте‚ а мы узнавали об этом слишком поздно. Это приводило к потере клиентов и негативному влиянию на репутацию. Мы искали способ‚ как можно было бы автоматически собирать информацию об ошибках и оперативно получать уведомления о них. И вот‚ решение было найдено – Google Tag Manager!

Почему отслеживание ошибок важно?

Отслеживание ошибок – это критически важный процесс для поддержания здоровья вашего веб-сайта. Ошибки могут возникать по разным причинам: проблемы с кодом‚ несовместимость браузеров‚ ошибки в API и многое другое. Если вы не отслеживаете ошибки‚ вы просто не знаете‚ какие проблемы возникают у ваших пользователей. Это может привести к:

• Потере клиентов: Пользователи‚ столкнувшиеся с ошибками‚ могут просто уйти с вашего сайта и больше не вернуться.
• Ухудшению SEO: Поисковые системы‚ такие как Google‚ учитывают пользовательский опыт при ранжировании сайтов. Если ваш сайт часто выдает ошибки‚ это может негативно повлиять на вашу позицию в поисковой выдаче.
• Потере репутации: Негативные отзывы о вашем сайте могут быстро распространиться в интернете.

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

Настройка отслеживания ошибок с помощью GTM

Теперь давайте перейдем к самому интересному – настройке отслеживания ошибок с помощью Google Tag Manager. Мы покажем вам‚ как это сделать шаг за шагом.

Шаг 1: Создание пользовательской переменной JavaScript

Первым шагом нам нужно создать пользовательскую переменную JavaScript‚ которая будет захватывать информацию об ошибках. Для этого:

1. Откройте Google Tag Manager и перейдите в раздел "Переменные".
2. В разделе "Пользовательские переменные" нажмите кнопку "Создать".
3. Выберите тип переменной "Пользовательский JavaScript".
4. Вставьте следующий код JavaScript:

function  {
 window.addEventListener('error'‚ function (event) {
 dataLayer.push({
 'event': 'jsError'‚
 'errorMessage': event.message‚
 'errorFile': event.filename‚
 'errorLine': event.lineno
 });
 });
 return undefined;
}

Этот код добавляет слушатель событий `error` к объекту `window`. Когда возникает ошибка JavaScript‚ слушатель захватывает информацию об ошибке (сообщение‚ файл и номер строки) и отправляет ее в слой данных GTM.

5. Назовите переменную‚ например‚ "jsErrorData" и сохраните ее.

Шаг 2: Создание триггера для отслеживания ошибок

Теперь нам нужно создать триггер‚ который будет срабатывать при возникновении ошибки JavaScript. Для этого:

1. Перейдите в раздел "Триггеры" и нажмите кнопку "Создать".
2. Выберите тип триггера "Пользовательское событие".
3. В поле "Имя события" введите "jsError" (это имя события‚ которое мы указали в коде JavaScript в шаге 1).
4. Назовите триггер‚ например‚ "jsErrorTrigger" и сохраните его.

Шаг 3: Создание тега для отправки данных об ошибках в Google Analytics

Теперь‚ когда у нас есть переменная и триггер‚ мы можем создать тег‚ который будет отправлять данные об ошибках в Google Analytics. Для этого:

1. Перейдите в раздел "Теги" и нажмите кнопку "Создать".
2. Выберите тип тега "Google Analytics: Universal Analytics".
3. В качестве типа отслеживания выберите "Событие".
4. Заполните поля "Категория"‚ "Действие" и "Ярлык" значениями‚ которые помогут вам идентифицировать ошибки в Google Analytics. Например:

• Категория: "JavaScript Error"
• Действие: "{{errorMessage}}"
• Ярлык: "{{errorFile}}:{{errorLine}}"

5. В настройках Google Analytics выберите свою переменную настроек GA.
6. В разделе "Триггеры" выберите триггер "jsErrorTrigger"‚ который мы создали в шаге 2.
7. Назовите тег‚ например‚ "gaJsErrorTag" и сохраните его.

Шаг 4: Предварительный просмотр и публикация

Перед публикацией изменений рекомендуется проверить‚ как все работает в режиме предварительного просмотра. Включите режим предварительного просмотра в GTM и откройте свой веб-сайт. Вызовите ошибку JavaScript (например‚ обратившись к несуществующей переменной). Если все настроено правильно‚ вы увидите‚ что тег "gaJsErrorTag" сработал‚ и данные об ошибке были отправлены в Google Analytics.

Если все работает правильно‚ опубликуйте изменения в GTM.

Альтернативные способы отслеживания ошибок

Помимо отправки данных об ошибках в Google Analytics‚ вы можете использовать другие способы для отслеживания ошибок. Например:

• Отправка уведомлений по электронной почте: Вы можете настроить тег GTM‚ который будет отправлять уведомления по электронной почте при возникновении ошибки.
• Использование сторонних сервисов мониторинга: Существуют специализированные сервисы‚ такие как Sentry‚ Rollbar и Bugsnag‚ которые предоставляют расширенные возможности для отслеживания и анализа ошибок. Вы можете интегрировать эти сервисы с GTM.

Преимущества использования GTM для отслеживания ошибок

Использование Google Tag Manager для отслеживания ошибок имеет ряд преимуществ:

• Простота настройки: GTM позволяет настроить отслеживание ошибок без необходимости изменения кода веб-сайта.
• Гибкость: Вы можете настроить различные типы тегов и триггеров для отслеживания различных типов ошибок и отправки данных в различные системы.
• Централизованное управление: GTM позволяет управлять всеми тегами и триггерами в одном месте.

Пример таблицы с LSI запросами

Подробнее

JavaScript ошибки GTM	Отслеживание ошибок сайта	GTM мониторинг ошибок	Настройка GTM для ошибок	Логирование ошибок GTM
GTM отладка JavaScript	Анализ ошибок через GTM	GTM и Sentry	GTM и Rollbar	GTM и Bugsnag