Как настроить Яндекс Тег Менеджер?
Яндекс Метрика. Пиксели ВКонтакте и VK Реклама Пошаговая инструкция по настройке конверсионных событий на сайте
Подготовка
– Заполняем таблицу-помощник
Первоочередная задача – подумать и понять, какие какие целевые действия пользователей (события) вы хотите размечать. Это могут быть клики, заявки, скроллы, переходы или просмотры страниц. Давайте подготовим всё для этого, тогда сам процесс разметки пройдёт легко и приятно.
Открываем ваш сайт и таблицу-помощник по этой синей ссылке. Снизу вы увидите листы для работы, где будут храниться идентификаторы событий, скрипты, пиксели и коды счётчиков
В таблице на лист «Пиксели, счетчики, скрипты» вставляем коды и идентификаторы Яндекс Метрики, пикселей ВКонтакте и VK Ads. Это нужно для автоматического формирования скриптов событий на «Рабочем листе». Их вы потом будете вставлять в Яндекс Тег Менеджер
Далее скриним все элементы, которые нужно разметить, вставляем в соответствующий столбец на «Рабочем листе»
В столбце «Конверсия» выбираем Микро- это или Макроконверсия.
Как отличить микро- и макроконверсии?
Микроконверсии — промежуточные действия (например, клик по кнопке).
Макроконверсии — конечные цели, которые ведут к лиду или продаже.
Все макроконверсии мы в конце собираем в сборное событие «Все ключевые конверсии». Например, вы хотите обучить алгоритм VK по важным событиям, когда пользователь становится лидом. Это может быть успешная отправка формы, клик по номеру телефона, клик по email-адресу. Это и есть макроконверсии.
В столбце «Идентификатор» подбираем идентификатор для JS-события из соседнего листа «Список Событий в VK». Это позволит выбрать события для оптимизации объявлений в рекламных кабинетах VK. Свой набор буков тоже можно, но тогда ВКонтакте выбрать его не получится.
Подбираем подходящие по смыслу:
телефон - contact,
телеграм - subscribe
отправка формы - lead.
Для «Всех ключевых конверсий» всегда оставляем conversion.
телефон - contact,
телеграм - subscribe
отправка формы - lead.
Для «Всех ключевых конверсий» всегда оставляем conversion.
Когда подходящих уже не остается, можно неподходящие повесить, но так же из списка. Например, у вас ленд обычный, корзины нет — можно на add_to_cart кнопку какую-то повесить.
В столбцах «Скрипт Яндекс Метрики», «Скрипт ВКонтакте», «Скрипт VK Реклама» из ID пикселей и идентификаторов событий автоматически формируются скрипты для вставки в Яндекс Тег Менеджер. К ним позже.
– Подготовка Яндекс Тег Менеджер
Если Яндекс Метрики нет, создаем счётчик и ставим на сайт напрямую. Если сайт работает на Tilda, WordPress, Wix, 1C-Bitrix или другом конструкторе сайтов, используем номер счётчика.
Сами включаем либо даём клиенту ссылку на инструкцию по активации Яндекс Тег Менеджер
В разделе «Триггеры» создаём следующие триггеры:
- Кнопка «Добавить триггер», тип выбираем в выпадающем списке, и вводим название:
Во вкладке «Теги» добавляем:
- теги для пикселей ВКонтакте и VK Реклама через кнопку «Добавить тег»
- триггер «Все просмотры страниц».
Далее создаём тег «Отладка» из шаблона «Мини дебагер триггеров и переменных». Он нужен, чтобы проверять корректность срабатывания триггеров.
Настройка события
– Настройка триггера
Допустим, вам нужно настроить цели на посещение страницы «Спасибо» для отслеживания конверсий.
Вы можете настроить цель в Яндекс Метрике через условие «Посещение страниц»:
Вы можете настроить цель в Яндекс Метрике через условие «Посещение страниц»:
Или в ВКонтакте и в VK Реклама сбор аудиторий по условию «URL содержит»:
Но выбрать такую аудиторию в качестве конверсионного события в кабинете ВКонтакте вы не сможете:
Для этого нужно настроить JavaScript-событие.
Этот процесс целиком мы рассмотрим ниже на примере самого простого условия наступления события – просмотра страницы – в нашем случае страницы Спасибо, а в конце узнаете ещё о нескольких событиях посложнее.
Итак, идём в Яндекс Тег Менеджер во вкладку «Триггеры», нажимаем кнопку «Добавить триггер». Выбираем Тип триггера «Просмотр страницы», встроенная переменная Page URL – содержит – /thanks:
Этот процесс целиком мы рассмотрим ниже на примере самого простого условия наступления события – просмотра страницы – в нашем случае страницы Спасибо, а в конце узнаете ещё о нескольких событиях посложнее.
Итак, идём в Яндекс Тег Менеджер во вкладку «Триггеры», нажимаем кнопку «Добавить триггер». Выбираем Тип триггера «Просмотр страницы», встроенная переменная Page URL – содержит – /thanks:
Обратите внимание! Условие важно выбрать «содержит», а не «совпадает» – иначе с utm-метками ничего работать не будет. Ещё важно, чтобы на домене не было страниц с похожими адресами, не являющимися страницами Спасибо. Варианты типа /thanks0001, /thanksgiving тоже попадут в «содержит».
– Отладка события
Проверяем, что событие отбивается успешно. Для этого воспользуемся ранее созданным тегом «Отладка». Заходим в этот тег, в «Триггерах» выбираем нашу «Просмотр страницы/thanks», сохраняем.
Убеждаемся, что тег отладки запущен (колонка Статус). Если на паузе, жмём на три точки в колонке — «Запустить».
Затем сверху нажимаем серую кнопку «Предварительный просмотр» и видим такое сообщение:
Чтобы не ждать несколько минут, обновляем страницу и сразу видим сообщение со скриншота ниже. Жмем на кнопку «Открыть предварительный просмотр»:
Лирическое отступление
Для успешной отладки важно, чтобы в адресной строке после адреса сайта была конструкция вида “?_ytm_preview={какие-то цифры}”:
Если её нет, возможно у вас идёт редирект с основного адреса сайта, указанного в настройках счётчика Яндекс Метрики, вот тут, где Адрес сайта. И в процессе отладочный хвост теряется. В этом случае нужно указать основным адресом тот адрес, куда вас редиректит.
Кстати! Такая ситуация может быть куда чаще. Смотрите, как у нас сейчас настроен счётчик
Поэтому в предварительном просмотре будет открываться сайт https://ze.media с хвостом, а нам нужен https://ze.media/lake! Поэтому придётся либо ручками дописывать каждый раз “lake” между доменом и хвостом, либо изменить Адрес сайта на тот, что показан на скрине ниже
Конец лирического отступления
Возвращаемся к настройке. Открываем Панель разработчика на странице предварительного просмотра через правую кнопку мыши – Посмотреть код. Или с помощью комбинации клавиш F12 или Ctrl + Shift + I (Windows/Linux) / Cmd + Option + I (macOS).
Внутри переходим во вкладку Console (Консоль). И обязательно нажимаем на нижнюю шестеренку и отмечаем галочкой пункт Preserve log. Иначе при переходе (если наша цель – это переход на другую страницу) консоль очистится, и мы не увидим, что событие отбилось:
Внутри переходим во вкладку Console (Консоль). И обязательно нажимаем на нижнюю шестеренку и отмечаем галочкой пункт Preserve log. Иначе при переходе (если наша цель – это переход на другую страницу) консоль очистится, и мы не увидим, что событие отбилось:
Теперь нужно выполнить то действие, которое мы проверяем. В нашем случае – это Просмотр страницы /thanks. Заполняем соответствующую форму, попадаем на страницу Спасибо. Если всё правильно настроено, мы увидим сообщение, которое ранее настроили в отладочном теге:
Событие успешно отправлено! Триггер работает, это мы выяснили, но теперь нужно связать его с Яндекс Метрикой, с ВКонтакте и VK Рекламой.
– Настройка тегов в Яндекс Тег Менеджер
– Тег Яндекс Метрики
Тут можно использовать готовый шаблон из каталога.
- Жмём «Добавить тег», вводим название по маске «ЯМ – {название события}»
- Выбираем в Шаблоне тега «Яндекс Метрика»
- В поле «ID счетчика» копируем номер нашего счётчика
- Добавляем в «Идентификатор цели» наш идентификатор из рабочего листа
- Вставляем в «Триггеры» наш проверенный триггер (можно несколько если требуется)
- Сохраняем
Обратите внимание! Триггеры я называю максимально понятно для себя (их видит только технический специалист внутри ЯТМ). А теги и, соответственно, события в кабинетах и Яндекс Метрике – максимально понятно для клиента (или другого специалиста), который может увидеть цели и аудитории, но не разбирается в них. Желательно как можно короче, чтобы в кабинете ВКонтакте видеть название аудитории целиком.
Либо можно настраивать теги Яндекс Метрики без шаблона – просто через Пользовательский HTML, как описано ниже для пикселей ВКонтакте и VK Реклама.
– Тег ВКонтакте
Жмём «Добавить тег», называем «ВК – {название события}».
Шаблон тега здесь Пользовательский HTML, потому что для него шаблона нет.
В поле «HTML» вставляем скрипт из столбца «Скрипт ВКонтакте» Рабочего листа таблички-помощника, в «Триггеры» триггер – «Сохранить»:
Шаблон тега здесь Пользовательский HTML, потому что для него шаблона нет.
В поле «HTML» вставляем скрипт из столбца «Скрипт ВКонтакте» Рабочего листа таблички-помощника, в «Триггеры» триггер – «Сохранить»:
– Тег VK Реклама
Всё аналогично! Жмём «Добавить тег», называем «ВКР – {название события}».
Шаблон тега здесь Пользовательский HTML, потому что для него шаблона нет.
В поле «HTML» вставляем скрипт из столбца «Скрипт VK Реклама» Рабочего листа таблички-помощника, в «Триггеры» триггер – «Сохранить»:
Шаблон тега здесь Пользовательский HTML, потому что для него шаблона нет.
В поле «HTML» вставляем скрипт из столбца «Скрипт VK Реклама» Рабочего листа таблички-помощника, в «Триггеры» триггер – «Сохранить»:
– Публикация контейнера
До этого момента все наши пиксели и скрипты существовали только в Яндекс Тег Менеджере и версии сайта для предварительного просмотра. Чтобы они оказались на реальном сайте и начали взаимодействовать с внешними системами, нужно опубликовать контейнер.
- Ставим на паузу тег «Отладка» через меню трех точек
- Жмём «Опубликовать»
- Версию называем так, чтобы было понятно, что добавили
- Снова жмём «Опубликовать».
Через некоторое время появится зелёное сообщение об успешной публикации, но ждать его нам некогда. Пора бежать настраивать события и сбор аудиторий в кабинетах!
Цели и аудитории в кабинетах ВКонтакте и VK Реклама
– Цели Яндекс Метрики
В новой вкладке открываем раздел «Цели» из меню слева:
- Жмём «Добавить цель»
- Вводим (вставляем) название
- Тип условия – JavaScript-событие
- Идентификатор цели – совпадает
- Добавить цель:
– События ВКонтакте
- Идем в кабинет в «Ретаргетинг» – «Аудитории»
- Создаём аудиторию вида “[pix] {Название события} _003”
- Выбираем нужный пиксель. Например, «Получить с помощью пикселя»
- Выбираем «Правило» – «Пользователи, посещавшие определенные страницы» – «За последние 3 дня».
- Задаём «Параметры» – «Событие совпадает» – {идентификатор события}.
- Нажимаем «Создать»
- Далее заходим в сервис ERESH. Цифровой ассистент маркетолога
- Находим нужный кабинет
- Выбираем свежесозданную аудиторию
- Ставим галочку «Использовать имя из образца»
- Удаляем из поля ниже концовку “ _003”
- Отмечаем галочками 7 дней, 30 дней, 1 год, 2 года
- Жмём Выполнить, убеждаемся что процесс завершился без ошибок.
– События VK Реклама
- Идём в кабинет VK Рекламы
- Выбираем «Сайты» в левом меню
- Нажимаем «Настроить» напротив нужного пикселя
- Выбираем «Добавить целевое событие»
- Вводим «Название события»
- Выбираем «Категорию». У нас это оформление заявки (лид)
- И «Условие наступления» — Произошло JS-событие
- «Название JS-события» — ваш идентификатор, у нас это lead
- Добавить событие
Готово! Теперь нужно создать аудиторию.
- Идём в левое меню – «Аудитории» – «Создать аудиторию».
- Название вводим по маске “{Название события} _365” – «Добавить источник» – «События на сайте».
- Выбираем наше созданное событие – «Сохранить».
– Проверка срабатывания целей
Идём на сайт, там кликаем, тыкаем, скроллим, заполняем форму – в зависимости от того, какое событие мы настроили.
Затем идём обновлять страницы и ждать, пока событие отобьётся в системах.
Может быть так, что это произойдёт не сразу. Быстрее всего ВКонтакте, потом Яндекс Метрика, VK Рекламу, по опыту, приходится ждать подолгу. Сколько? Минут через 10-15 можно начинать беспокоиться и бежать всё перепроверять.
Затем идём обновлять страницы и ждать, пока событие отобьётся в системах.
Может быть так, что это произойдёт не сразу. Быстрее всего ВКонтакте, потом Яндекс Метрика, VK Рекламу, по опыту, приходится ждать подолгу. Сколько? Минут через 10-15 можно начинать беспокоиться и бежать всё перепроверять.
Яндекс Метрику открываем на странице «Конверсии» (в левом меню), выбираем «Сегодня»
И ждём пока текст «Нет данных по цели» сменится на подобный пик:
ВКонтакте обновляем в разделе «Ретаргетинг» – «Аудитории», ждём пока у настроенных аудиторий появится время обновления сегодняшним днём
От VK Рекламы в разделе «Сайты» – «События» ждём пика следующего вида:
Настройка других типов событий
– Видимость элементов
Применяется в случаях, когда, например, после заполнения формы нет никакой страницы спасибо, а только попап об успешной отправке:
В нашем случае нужно заполнить форму, получить на экране этот попап.
Затем нужно кликнуть по нему правой кнопкой мыши – «Посмотреть код». Открывается панель разработчика на вкладке Elements (Элементы), где сразу выделяется элемент, соответствующий попапу. Наведите на него курсор и увидите, как его границы подсветятся на самом сайте:
Затем нужно кликнуть по нему правой кнопкой мыши – «Посмотреть код». Открывается панель разработчика на вкладке Elements (Элементы), где сразу выделяется элемент, соответствующий попапу. Наведите на него курсор и увидите, как его границы подсветятся на самом сайте:
Поводите курсор вверх и вниз от подсвеченного элемента, чтобы убедиться, что выделен именно нужный вам.
Теперь нужно скопировать селектор элемента. На подсвеченной строчке кликните правой клавишей мыши – Copy – Copy selector:
Теперь нужно скопировать селектор элемента. На подсвеченной строчке кликните правой клавишей мыши – Copy – Copy selector:
Вставьте его куда-нибудь в текстовый редактор. Наш селектор получился лаконичным: #tildaformsuccesspopup-new > div
Ещё одно лирическое отступление. (Крик души)
Так везёт не только лишь всегда, а, прямо скажем, редко. Особенно если сайт большой, а элемент сложный. Часто вы получите подобную колбасу:
#rec741251819 > div.t776 > div > div.t-popup.t-popup_show > div.t-popup__container.t-popup__container-static.t-popup__container-animated > div > div > div.js-store-product.js-product.t-store__product-popup > div > div.t-store__prod-popup__info.t-align_left.t-store__prod-popup__col-right.t-col.t-col_6 > div.t-store__prod-popup__btn-wrapper.js-store-buttons-wrapper > div
"Колбаса" в таком виде вряд ли будет отбиваться, это с одной стороны. А с другой – имеет высокий риск измениться и поломаться при минимальном обновлении сайта.
С уточнением или обобщением селектора иногда помогают нейронки, но если после нескольких попыток не удалось увидеть трёх главных слов «Событие успешно отправлено», возможно стоит попробовать другой путь, например, через Elements:
С уточнением или обобщением селектора иногда помогают нейронки, но если после нескольких попыток не удалось увидеть трёх главных слов «Событие успешно отправлено», возможно стоит попробовать другой путь, например, через Elements:
Не спрашивайте меня как это работает, я не знаю. С этим скриптом мне также помогла нейросеть.
Конец лирического отступления
Итак, мы нашли селектор. Создаём тег с кодом ниже, триггер «Все просмотры страниц».
В selector вставляем селектор:
В selector вставляем селектор:
В eventName вводим значение по смыслу – что происходит при видимости нашего элемента, оно пойдет в триггер Названием события:
– Клик по кнопке без URL
Например, по кнопке отправки формы. Это не то же самое, что успешная отправка. Допустим, пользователь не поставил галочку согласия с чем-нибудь и на этом прекратил попытки. В этом случае нам понадобится встроенная переменная Click Element и селектор, соответствие которому мы выбираем в условии активации триггера. Обращайте внимание на Тип триггера «Клики - все элементы».
– Клик по кнопке с URL
Тип триггера «Все клики по ссылкам», встроенная переменная Click URL – содержит – vk.com/:
Аналогично применяется для кликов по номеру телефона и адресу электронной почты. Для телефонов и почт я добавляю также триггеры копирования (кто кликает по ним с десктопа, пусть первый бросит в меня камень). Тег на этот случай показан на скриншоте ниже. Скопируйте его в таблице-помощнике
Специальными переменными в Триггерах будут соответственно copyMail и copyTel.
В тегах триггеры клика и копирования объединяются:
В тегах триггеры клика и копирования объединяются:
– Глубина прокрутки
В Яндек Тег Менеджер в отличие от Google нет нативного события, отвечающего за глубину прокрутки страницы, поэтому используем кастомный скрипт. Его нужно создать как Пользовательский HTML-тег (как с тегами пикселей, но код будет другой). Пример скрипта на скриншоте ниже. Вы можете скопировать скрипт в таблице-помощнике
В триггерах так же указываем Все просмотры страниц:
Этот тег позволяет выбрать глубину прокрутки 25, 50, 60, 75 или 100 процентов. Как же тег поймет, что какую мы выбрали? Нужно ему сообщить. Для этого после создания тега идем в «Триггеры» и создаём триггер типа «Специальное событие», а в названии события указываем требуемый процент в формате “scroll_{p}”
p - это переменная, которая задействована в коде скрипта (процент прокрутки).
p - это переменная, которая задействована в коде скрипта (процент прокрутки).
– Время активности на сайте
Только для Яндекс Метрики, отбивается каждые 30 секунд активности. Полный скрипт – в таблице-помощнике на листе «Кастомные скрипты»:
Выделенную последовательность цифр меняем на номер вашего счётчика, тег создаём, как уже умеем
В «Целях» создаем три цели – идентификаторы с соответствующими префиксами по количеству секунд:
Всё! Поздравляю, вы справились! Вместе с вами разбирался с Конверсионными событиями и Яндекс Тег Менеджер технический эксперт ZEMEDIA Валентин Гальетов.
Если сложно самостоятельно, вы всегда можете заказать услугу по настройке Яндекс Тег Менеджер у ZEMEDIA.
Настройка конверсионных целей на сайте для Яндекс Метрики
land_5
19800
руб
руб
— Разметка посадочной страницы по конверсионным действиям (переход в мессенджер, отправка формы, добавление в корзину и т.д.)
— Настройка счётчика Яндекс Метрики
— Создание ретаргетинговых и конверсионных целей
— Настройка кросс-канального отчёта (многоканальные последовательности и ассоциированные конверсии)
— Разработка Стандарта UTM-разметки 3 рабочих дня/разово
Стоимость указана за 1 (одну) проверяемую страницу сайта До 3 целей, каждая последующая 2400 руб.
— Настройка счётчика Яндекс Метрики
— Создание ретаргетинговых и конверсионных целей
— Настройка кросс-канального отчёта (многоканальные последовательности и ассоциированные конверсии)
— Разработка Стандарта UTM-разметки 3 рабочих дня/разово
Стоимость указана за 1 (одну) проверяемую страницу сайта До 3 целей, каждая последующая 2400 руб.
Вам нужна консультация или полноценное продвижение? Нажмите на кнопку и напишите нам