Как настроить события электронной коммерции для VK Ads на примере сайта на Тильде

Новый кабинет VK Ads уже достаточно давно имеет цель "Каталог товаров", которая позволяет настраивать товарную рекламу по фиду, а также разные виды ретаргетинга. Но, чтобы это всё заработало, в VK Ads необходимо настроить события под электронную коммерцию, а именно: просмотр товара, корзина и покупка. Часть этих событий, в идеале, еще и должна передавать данные об ID и цене товаров.

Если у вас есть под рукой адекватный разработчик, то вы без труда сделаете это, кинув в него не слишком подробной инструкцией от VK, но как быть, если разработчика нет?

Тут на помощь приходит Google Tag Manager и мы (без лишней скромности). Итак, подробная инструкция, как настроить события электронной коммерции VK Ads на примере сайта на Tilda, так, чтобы данные передавались.

Стоит ли говорить, но всё же - ставим на сайт, откуда нам нужны события - Google Tag Manager.

Идём в VK Ads. Создаём пиксель в разделе "Сайты" и устанавливаем его на ваш сайт (напрямую или через GTM - непринципиально), заливаем в "Центр коммерции" каталог товаров(фид) и подключаем к нему созданный пиксель.

Создаём события Они создаются внутри пикселя, как и прочие обычные события, только нам понадобится не стандартный код, а код для электронной коммерции. Заходим в пиксель и создаем события: "Просмотр карточки товара", "Добавление в корзину", "Покупка". Все с условием наступления - JS Событие.

Копируем коды электронной коммерции куда-нибудь в блокнотик.

Как вы видите на примере события "Покупка", подобное событие должно передавать два динамических параметра - VALUE - стоимость товара и PRODUCT_ID - ID товара в каталоге (фиде). Если у вас больше чем один товар, то эти данные будут постоянно меняться: на сайте за них отвечают некие переменные, которые нам неизвестны. Было бы удобно просто добавить имена этих переменных в событие и задача решена. Вытащить переменные, просматривая HTML-код страницы не получится - они просто так не отображаются, потому что находятся не в html-разметке, а в data layer, поэтому нам понадобится расширение для браузера, которое нам покажет эти данные. Удобнее всего использовать браузер Google Chrome и расширение datalayer checker или Simple Data Layer Viewer. Первое, по факту, намного удобнее, т.к. сразу дает нам нужное значение. Во втором придется копаться и компилировать нужную переменную из кусочков.

Поставили в браузер расширение, идем на нужный сайт и открываем карточку товара. Включаем расширение и находим обозначение напротив ID товара и его стоимости.

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

Идем в GTM и создаем там три сущности: переменную, триггер и тэг. Начнем с переменной.

Тип переменной - переменная уровня данных, имя переменной - то значение, которое мы скопировали с сайта с помощью расширения. Соответственно у нас будет одна переменная под VALUE и вторая под PRODUCT_ID. Сохраняем.

Далее - триггер. Выбираем тип триггера - специальное событие. Под просмотр товара - event = viewProduct,
под покупку - event = purchase.

В Тильде именно так, но для других CMS вам лучше всего будет включить режим предпросмотра в GTM, совершить на сайте событие и посмотреть, что видит GTM во вкладке "Variables" - взять значение события из event.

Под событие "Корзина" - триггер на клике по URL кнопки "В Корзину", например (это так же может варьироваться для каждого сайта).

Суть в том, что вам с помощью GTM надо настроить срабатывание события на то, что происходит в момент события и не повторяется больше нигде на сайте. Мы сделали "Некоторые клики по ссылкам" - Click URL - содержит #order, но теоретически можно идти так же как и в Purchase - через предпросмотр и событие (event).

Как правило, для Тильды этот набор триггеров хорошо срабатывает, но для других CMS может быть по-другому.

Ну и напоследок - настраиваем тэги.

Берем из блокнотика скрипт, который выдал VK. Вместо VALUE и PRODUCT_ID вставляем названия переменных, которые мы создали недавно (у нас они совпадают со значениями). Привязываем соответствующие триггеры, сохраняем. И не забываем опубликовать контейнер.

Пример тэга для корзины:

<script>
_tmr.push({ type: 'reachGoal', id: ТУТ ID вашего пикселя, value: {{ecommerce.detail.products.0.price}}, goal: 'to_cart', params: { product_id: {{ecommerce.detail.products.0.uid}}}});
</script>

Идем пить чай :)

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

После длительного чая возвращаемся в VK Ads и сразу идем в "Центр коммерции". Там переходим на вкладку "События" и смотрим, что получилось. Если данные поступают и % ошибок невелик, то можно брать с полки пирожок. Если ошибок много, то придется вернуться и понять, где схема дала сбой, скачать отчет об ошибках и понять, что именно не передается.

Данная схема настройки событий электронной коммерции для VK ADS отлично работает с сайтами на Tilda. Тут вы можете даже не морочиться с расширением и смело брать наши значения "переменных". Все-таки конструктор есть конструктор.

Если статья понравилась - поставьте нам лайк в нашем канале Telegram, коллективу авторов будет весьма приятно :)