Как передать событие конверсии lead в пиксель VK из формы на Tilda

При создании сайта на Tilda (Тильде) многих смущает странная инструкция по добавлению пикселя вКонтакте в тело сайта и настройка событий конверсии при отправки формы.

В разделе «Помощь» в блоке отслеживания событий пикселя VK упоминается лишь динамический ретаргетинг, как обязательное условие для добавления событий.

При чем здесь динамический ретаргетинг, когда у большинства пользователей на Тильде обычно персональный сайт, блог или лендинг?...

Руководство по добавлению пикселя vk от Tilda

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

Делюсь полезной информацией.

Как добавить событие lead пикселя вКонтакте при отправке формы на Тильде

Чтобы получить код пикселя VK, пользуемся официальным руководством.

Шаг 1. Имея код VK на руках, лезем в настройки сайта Тильды.

Страница настройки вашего сайта на TIlda.cc

Шаг 2. Нажимаем на кнопку настроек и переходим к выбору типа настройки.

Страница настроек сайта Tilda

Нажимаем на «Еще» и попадаем в дополнительные настройки сайта.

Шаг 3. Ищем блок «Html-код для вставки внутрь HEAD»

Дополнительные настройки с блоком HTML-КОД ДЛЯ ВСТАВКИ ВНУТРЬ HEAD

Нажимаем «Редактировать код», появляется окно добавления кода.

Экрана добавления кода

Шаг 4. Вставляем свой код пикселя VK

Экран с примером кода пикселя VK

Шаг 5. Далее вставляем вот такой код (вымучен путём проб и ошибок :) )

<script>
    if (document.readyState !== 'loading') {
    us_sendFormAfterSuccess();
  } else {
    document.addEventListener('DOMContentLoaded', us_sendFormAfterSuccess);
  }

  function us_sendFormAfterSuccess() {
    var forms = document.querySelectorAll('.js-form-proccess');
    Array.prototype.forEach.call(forms, function (form) {
      form.addEventListener('tildaform:aftersuccess', function () {
       VK.Goal('lead');
      });
    });
  }
</script>

Этот код отправляет событие lead из формы в пиксель VK, засчитывая таким образом получение лида при отправке формы.

Обычно это критически важно для кампаний в рекламном кабинете VK Ads, которые настроены на получение конверсий.

Итоговый экран с кодом должен выглядеть так:

Итоговый экран с кодами

Жмём «Сохранить» и радуемся подключённой передаче события lead в пиксель VK.

Шаг 6 (для продвинутых). Проверка передачи события.

Можно пропустить, если вы не разбираетесь в тонкостях работы браузера и GET-запросах.

Для проверки срабатывания события лезем в бразуер Google Chrome, открываем свой сайт и режим отладки (просмотра кода - инструмент разработчика).

Нажимаем на вкладку «Сеть» и вбиваем в поиск rtrg

Вкладка сети в браузере Google Chrome

Перезагружаем страницу кнопкой «F5».

Видим, что в блоке соединений появился GET-запрос к файлу .gif с параметрами rtrg?=VK{blablabla}.

Это значит, что пиксель работает.

Вкладка сети в браузере Google Chrome с отправленным событием пикселя

Далее переходим во вкладку «Консоль» и отправляем любую форму с сайта.

Вкладка консоли в браузере Google Chrome

Отправляем любую форму с вашего сайта и ищем XHR загрузки GET запросов. Находим отработку скрипта VK rtrg с параметром c=lead.

Вкладка консоли в браузере Google Chrome с результатом отправки события lead в пиксель VK

Событие lead успешно передаётся в пиксель vk!

Подписывайся, комментируй и делись с друзьями полезной информацией!