В связи с ужесточением законодательства РФ в отношении использования продуктов Google на российских сайтах, как нельзя кстати Яндекс выпустил свою альтернативу Google Tag Manager — Яндекс Тег Менеджер.
Яндекс Тег Менеджер (как и GTM) — это инструмент, который позволяет управлять всеми тегами на сайте из единого интерфейса. Он упрощает добавление, изменение и удаление тегов без необходимости вмешательства в код сайта. Это особенно полезно для маркетологов и аналитиков, которые хотят быстро вносить изменения на сайт и тестировать их.
Читать еще:
- Что такое Яндекс Тег Менеджер?
- Как установить Яндекс Тег Менеджер?
- Как работает режим предварительного просмотра в Яндекс Тег Менеджере?
- Переменная «Элемент DOM» в Яндекс Тег Менеджере
В этой статье я расскажу, как с помощью пользовательской переменной «Элемент DOM» передавать дополнительные параметры событий в Яндекс Метрику. В качестве примера рассмотрю задачу из своего проекта — передачу региона пользователя при достижении цели «Клик по номеру телефона». Однако этот метод можно применять и для других целей: отправка форм, оформление заказа и т. д.
Что такое “Элемент DOM” в Яндекс Тег Менеджере?
DOM (Document Object Model) — это структура HTML-страницы, которую браузер создаёт при загрузке сайта. Каждый элемент (например, кнопка, текст, блок) можно выбрать с помощью CSS-селектора или идентификатора.
В Яндекс Тег Менеджере переменная «Элемент DOM» позволяет получить значение любого элемента на странице. В моём случае — это название региона, которое отображается в шапке сайта.
Пошаговая инструкция настройки передачи события в Яндекс Метрику
1. Создаем пользовательскую переменную в Яндекс Тег Менеджере
Для создания пользовательской переменной, перейдите в Яндекс Тег Менеджер в раздел “Переменные”, нажмите кнопку “Создать”. Из выпадающего списка шаблонов перемененных, выберите “Элемент DOM”. Задайте имя переменной и метод выбора: идентификатор (выбор по идентификатору элемента) или селектор CSS (выбор по селектору CSS элемента).
Чтобы выбрать наилучший метод, следует проинспектировать код элемента в консоли разработчика. Для этого откройте консоль разработчика (F12) и найдите нужный элемент (в моём случае — блок с регионом).
Поскольку необходимый мне элемент не имеет идентификатора “id”, я выберу метод “Селектор CSS”. В консоли разработчика выделите нужный элемент правой кнопкой мыши и выберите в контекстном меню “Copy – Copy selector”:
Мой селектор выглядит так:
body > div.flex-grow > header > div.header--top > div > div.header--top-left > div > div > div.dropdown--block > div > a > b
Чтобы предварительно проверить правильность выбора элемента по селектору CSS, в консоли разработчика на вкладке “Console” введите следующий код:
document.querySelector('ваш селектор').innerText:
Если возвращается нужное значение, селектор верный. Добавьте скопированный селектор в поле «Селектор элемента» и сохраните переменную.
2. Настраиваем цель в Яндекс Метрике
На этом шаге необходимо настроить цель в Яндекс Метрике. Зайдите в Яндекс Метрику, перейдите в раздел “Цели” и нажмите кнопку “Добавить цель”. Выберите тип условия “JavaScript-событие” и укажите произвольный идентификатор цели (в своём случае я выбрала “phone”).
3. Создаем триггер для срабатывания тега в Яндекс Тег Менеджере
Возвращаемся в Яндекс Тег Менеджер для создания необходимого триггера активации. Поскольку телефон на сайте — это кликабельный элемент и имеет стандартную разметку ссылки, триггером сделаем все клики по ссылкам вида: <a href=”tel:…”></a>
Перейдите на вкладку “Триггеры” и нажмите кнопку “Создать”. Выберите “Тип триггера” – “Клик – все элементы”. В условии активации триггера выберите “Некоторые события”. В настройке “Активировать триггер при наступлении события и выполнении всех этих условий” выберите переменную “Click Url”, условие — “содержит” и значение — “tel:”. Сохраняем триггер.
4. Создаем тег для отправки события в Яндекс Тег Менеджере
Переходим к созданию тега. В Яндекс Тег Менеджере перейдите на вкладку “Теги” и нажмите кнопку “Создать”. Выберите шаблон тега — “Яндекс Метрика”. Введите id вашего счетчика и идентификатор цели, созданный на предыдущем шаге. Отметьте чек-бокс “Добавить поле params” для передачи значения переменной в событие.
В поле “Дополнительные параметры события” добавьте по аналогии с шаблоном подсказки свои параметры. В этом поле они должны передаваться как JavaScript-объект в фигурных скобках {}, а перечисляемые параметры содержат двойные кавычки “”. Между параметрами и значениями используйте символ двоеточия :, а сами параметры перечисляются через запятую ,. Чтобы значения переменных подставлялись динамически, используйте двойные фигурные скобки. Тогда вам откроется список, из которого вы сможете выбрать свои пользовательские переменные, созданные на первом шаге. В моем случае, я использую только одну переменную — Регион:
В качестве триггера выберите “Клик по номеру телефона”, который был создан на предыдущем шаге, и сохраните тег.
5. Проверка работы
Я немного опущу момент с возможностью предварительного просмотра внесённых изменений перед публикацией и сразу перейду к проверке опубликованных изменений.
Откройте сайт в режиме отладки (_ym_debug=2). Кликните на номер телефона. Убедитесь в панели отладчика, что параметр региона передаётся:
Далее проверьте, записываются ли параметры в Яндекс Метрике. Перейдите в “Отчеты – Содержание – Параметры событий”. Убедитесь, что наши параметры успешно передаются.
Теперь при каждом клике на номер телефона в Метрику будет передаваться параметр региона. Это поможет анализировать, из какого города чаще звонят, и оптимизировать рекламные кампании.
Яндекс Тег Менеджер оказался удобным инструментом, особенно в условиях ограничений на Google-сервисы. А благодаря “Элементу DOM” можно легко получать данные прямо со страницы без сложного программирования.