Пиксель ВКонтакте позволяет собрать аудитории пользователей ВКонтакте посещавших ваш сайт или выполнявших на нем определенные действия для дальнейшего ретаргетинга.
Содержание
Как подключить пиксель Вконтакте
Перед выполнением подключения Пикселя ВКонтакте к сайту или странице нужно, чтобы у вас уже был свой аккаунт ВКонтакте.
1. Перейдите по этой ссылке и выберите внизу "Создать пиксель".
2. Заполните данные в появившемся окне и нажмите на кнопку "Создать".
Заметка: в поле "Разрешённый домен" укажите только имя основного домена, например, creatium.site или только имя основного поддомена, например, examples.creatium.site.
3. Скопируйте код пикселя и вставьте его в раздел "Плагины", создав плагин ”Свой код". в поле "Код перед </head>"
4. Для активации пикселя необходимо создать аудиторию ВКонтакте. Для этого перейдите по этой ссылке и нажмите ”Создать аудиторию”.
В этом окне важно выбрать пункт ”Получить с помощью пикселя” и указать именно тот пиксель, который подключен к сайту.
5. Совершите тестовые визиты на свой сайт с разных браузеров или устройств, чтобы статус пикселя сменился на "Работает".
Настройка сбора аудиторий
Приступим к настройке событий:
1. Перед настройкой событий, необходимо подключить JS API, чтобы эти события могли быть переданы в аудиторию во ВКонтакте. Для этого откройте настройки сайта (проекта) в разделе "Свой код", поле Код перед </head> и добавьте этот скрипт сразу после скрипта Пикселя ВКонтакте.
<script src="https://vk.com/js/api/openapi.js?162"></script>
Посетитель открыл сайт
Это событие будет собирать всех посетителей вашего сайта в отдельную аудиторию.
При создании Пикселя, аудитория для посетителей создается автоматически. Перейдите во вкладку “Аудитории”, нажмите на название аудитории и выберите “Редактировать правила”
В открывшемся окне нужно выбрать идентификатор аудитории
Вставьте этот id вместо "audienceID" в следующем скрипте и добавьте скрипт в поле "Перед </body>".
<script>
VK.Retargeting.Hit();
VK.Retargeting.Add(audienceID);
</script>
Отслеживание отправки форм
Для отслеживания отправки форм потребуется создать новую аудиторию. Порядок действий будет следующий:
- Нажимаем на кнопку Создать аудиторию
- В блоке Источник нужно выбрать Получать с помощью пикселя
- После выбора Источника появится выпадающий список в котором нужно будет выбрать нужный пиксель.
- В блоке Правило нужно выбрать Пользователи, посещавшие определенные страницы.
- В блоке параметры в первом поле нужно выбрать Событие содержит
- Во втором поле нужно ввести название события, в данном варианте это будет form-lead
Зачем нужен form-lead, это значение нам необходимо для отслеживания события. Чтобы аудитории не засчитывали другие события данное значение должно быть каждый раз уникальным. Например если нужно отслеживать событие только с одной формы или кнопки, нужно будет задать другое название например button-vk, form-target и т.д.
- После того как создали аудиторию нужно будет вернуться в Личный кабинет Creatuim и перейти в раздел Плагины - Свой код - код перед </body> и добавить следующий код
<script>
cr.api(function (page) {
page.waitForAppear('.cr-form', function (el) {
page.getComponent(el).on('submit', function (event) {
/* form-lead -> это название события */
VK.Retargeting.Event('form-lead')
});
});
});
</script>В коде можно поменять только form-lead все остальное не трогаем.
Сохраняем плагин, отправляем заявку и проверяем столбик Обновлено в ВК.
Отслеживание нажатия кнопок
Создаем аудиторию по инструкции выше и задаем название события vkclick-btn2
После создания аудитории нужно будет открыть редактор и задать кнопке которая будет участвовать в сборе аудитории класс vkclick-btn2
У кнопок может быть одинаковый класс vkclick-btn2, но если вам нужно для каждой кнопки задать разные аудитории, тогда у кнопки нужно будет задать другой класс, например button-wa, button-tg и т.д.
Затем создать плагин "Свой Код" и в поле "Перед /body" добавить скрипт:
<script type="text/javascript">
cr.api(page => {
const vkGoals = ['vkclick-btn2','button-wa']
/*
Если кнопок больше нужно после button-wa поставить запятую (,) открыть кавычки ('')
и вписать название кнопки ['vkclick-btn2','button-wa', 'button-tg' и т.д.]
*/
vkGoals.forEach(goal => {
page.waitForAppear(`.${goal}`, button => {
button.addEventListener('click', () => {
VK.Retargeting.Event(`${goal}`)
})
})
})
})
</script>
