Если у вас недостаточно опыта в работе с JavaSсript, мы настоятельно рекомендуем обратиться к помощи разработчиков вашего сайта или других специалистов для настройки динамического ретаргетинга.

Как получить пиксель?
1. Перейдите в рекламный кабинет.
2. Выберите раздел Ретаргетинг.
3. Перейдите в раздел Пиксели.

4. Нажмите на кнопку Создать пиксель.

5. Укажите название пикселя, домен и тематику вашего сайта.
.
Скопируйте сгенерированный код и получите PIXEL_ID. Этот ID должен обязательно присутствовать в том коде, что вы поставите на свой сайт.

Как установить продуктовые события на сайт?
Кроме установки на сайте кода пикселя ретаргетинга, необходимо прописать параметры и типы событий, по которым будут собираться данные об аудиториях. Ознакомиться с технической документацией по установке пикселя вы можете здесь. Для корректной работы вам понадобятся PIXEL_ID и price_list_id, полученный при загрузке прайс-листа.

Типы продуктовых событий, параметр products_event:

• view_home – посещение главной страницы;
• view_category – посещение страницы категорий каталога;
• view_product – посещение карточки товара;
• view_search – посещение страницы поиска;
• view_other – посещение любых других страниц;
• add_to_wishlist – добавление товара в список желаний;
• add_to_cart – добавление товара в корзину;
• remove_from_wishlist – удаление товара из списка желаний;
• remove_from_cart – удаление товара из корзины;
• init_checkout – начала покупки;
• add_payment_info – введение платежной информации;
• purchase – совершение покупки.

Параметры:

• products: array // optional, example: [{"id":"123","recommended_ids":"23,44"}] Список товаров с дополнительной информацией по ним, описание типа product - ниже.
• products_recommended_ids: string // optional, example: qwe789,rty777 Список рекомендованных товаров, в том случае, когда конкретных товаров либо нет, либо хочется порекомендовать какие-то товары без привязки к конкретным товарам.
• category_ids: string // optional, example: 12,23,34 Список категорий товаров, в том случае, когда конкретных товаров либо нет, либо хочется дополнительно охватить какую-то категорию полностью.
• business_value: int // optional, example: 1000 Ценность этого события для бизнеса в условных единицах, от 1 до 1000000.
• currency_code: string // optional, example: RUR Валюта для полей price и price_old.
• total_price: int // optional, example: 3000 Общая стоимость товаров из поля products.
• search_string: string // optional, example: чехлы для телефона Поисковой запрос пользователя.

Крайне желательно, чтобы для большинства событий (даже view_home) было заполнено одно из полей products, category_ids, products_recommended_ids.

Поля объекта product:

• id: string // example: abc123 ID товара из прайс-листа.
• group_id: string // optional, example: 22 Группа товаров. Если пользователь смотрит не конкретную модель, а все варианты какой-то модели.
• recommended_ids: string // optional, example: qwe789,rty777 ID рекомендованных товаров для конкретного товара или группы товаров.
• price: int // optional, example: 1000 Специальная цена конкретного товара или группы товаров для данного пользователя.
• price_old: int // optional, example: 2000 Старая цена для данного пользователя. Учитывается, если задано поле price.
• price_from: bool // optional, example: 1 Если передано, то поле price указывает цену "от". Учитывается, если задано поле price.

Пример вызова:
Предварительно подключите vk.com/js/api/openapi.js и инициализируйте пиксель при помощи VK.Retargeting.Init()

// PHASE I: Initialisation phase
<div id="vk_api_transport"></div>
<script type="text/javascript">
 window.vkAsyncInit = function() {
 VK.Retargeting.Init(PIXEL_ID);
 };

setTimeout(function() {
 var el = document.createElement("sсript");
 el.type = "text/javascript";
 el.src = "vk.com/js/api/openapi.js?150";;;
 el.async = true;
 document.getElementById("vk_api_transport").appendChild(el);
 }, 0);
</script>

// PHASE II: When product event should be fired
// Detailed info (in Russian) https://vkcom.github.io/vk-ads-retargeting-demo/index.html
const eventParams = {
"products": [{"id":"456", "recommended_ids":"abc456,def789"}, {"id":"672", "group_id":"678","recommended_ids":"abc456,def789"}],
"products_recommended_ids": "55,166,754",
"business_value": 88,
"total_price": 34899
};
VK.Retargeting.ProductEvent(PRICE_LIST_ID, "view_product", eventParams);

Подробное описание вызова:
VK.Retargeting.ProductEvent(PRICE_LIST_ID, products_event, { <параметры> });
price_list_id: int // ex: 12345 // ID прайс-листа.
products_event: string // ex: view_product // Тип продуктового действия (см.выше).

Установка пикселя с помощью Google Tag Manager
Установка возможна через Custom HTML Tag.

<div id="vk_api_transport"></div>
<script type="text/javascript">
// Подключаем OpenAPI
 setTimeout(function() {
 var el = document.createElement("sсript");
 el.type = "text/javascript";
 el.src = "vk.com/js/api/openapi.js?148";;;
 el.async = true;
 document.getElementById("vk_api_transport").appendChild(el);
 }, 0);
// Коллбек, который будет вызван после инициализации OpenAPI
 window.vkAsyncInit = function() {
// Инициализация пикселя
 VK.Retargeting.Init(PIXEL_ID);
// Тут идет заполнение параметров для отправки
// Отправляем событие
 VK.Retargeting.ProductEvent(price_list_id, "view_product", eventParams);
};
</script>

Пример кода для Google Tag Manager:
<div id="vk_api_transport"></div>
<script type="text/javascript">
 setTimeout(function() {
 var el = document.createElement("sсript");
 el.type = "text/javascript";
 el.src = "vk.com/js/api/openapi.js?148";;;
 el.async = true;
 document.getElementById("vk_api_transport").appendChild(el);
 }, 0);
window.vkAsyncInit = function() {
 VK.Retargeting.Init(PIXEL_ID);
 VK.Retargeting.Hit(); // Это вместо первого вызова пикселя
 // Генерация событий для динамического ретаргетинга
 // Просмотр товара
 // Это пример кода, который собирает данные о товарах, его нужно заменить на код, специфичный для вашего проекта
 if (window.location.href.search(/catalog\/[0-9]+\/[0-9]+/) > 1) {
 var eventParams = {
 "products": [{"id": gtm_rem_vk_product_id, "price": gtm_rem_vk_price, "price_old":gtm_rem_vk_price_old}]
 };
 // Отправка события
 VK.Retargeting.ProductEvent(PRICE_LIST_ID, "view_product", eventParams);
 }
};
</script>

Установка пикселя с помощью DigitalDataManager
Пользователи платформы для управления маркетинговой инфраструктурой DigitalDataManager могут воспользоваться готовым решением.
Для этого нужно авторизоваться на платформе, пройти на вкладку «Интеграции», кликнуть на блок с логотипом ВКонтакте, указать ваш PIXEL_ID и настроить передачу событий.
Подробная инструкция по интеграции доступна по ссылке.