Сбор аудиторий с Пиксель ВКонтакте

 

Пиксель ВКонтакте позволяет собрать аудитории пользователей ВКонтакте посещавших ваш сайт или выполнявших на нем определенные действия для дальнейшего ретаргетинга.

Содержание

Как подключить пиксель Вконтакте

Перед выполнением подключения Пикселя ВКонтакте к сайту или странице нужно, чтобы у вас уже был свой аккаунт ВКонтакте.

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>

Отслеживание отправки форм

Для отслеживания отправки форм потребуется создать новую аудиторию. Порядок действий будет следующий:

  1. Нажимаем на кнопку Создать аудиторию
  1. В блоке Источник нужно выбрать Получать с помощью пикселя
  1. После выбора Источника появится выпадающий список в котором нужно будет выбрать нужный пиксель.
  1. В блоке Правило нужно выбрать Пользователи, посещавшие определенные страницы.
  1. В блоке параметры в первом поле нужно выбрать Событие содержит
  1. Во втором поле нужно ввести название события, в данном варианте это будет form-lead
Зачем нужен form-lead, это значение нам необходимо для отслеживания события. Чтобы аудитории не засчитывали другие события данное значение должно быть каждый раз уникальным. Например если нужно отслеживать событие только с одной формы или кнопки, нужно будет задать другое название например button-vk, form-target и т.д.
  1. После того как создали аудиторию нужно будет вернуться в Личный кабинет 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>

ТЕХНИЧЕСКАЯ ПОДДЕРЖКА

Не можете найти то, что ищите?

Напишите нам. на связи 24/7. Среднее время ожидания ответа: 10-15 минут. Также вы можете вступить в наш Телеграм-чат, где собралось много специалистов и пользователей.

Поддержка Creatium

Агенты ответят через 10 минут

Агенты ответят

Блог, курсы и полезные материалы 

Платформа сайтов любой сложности