Как настроить динамический ретаргетинг ВКонтакте (про JavaScript тоже)

Я перенёс эту заметку из GitHub Gist-файла, заметка могла устареть

Чё делать-то?

  1. Поставить пиксель на сайт. Просто скопируйте js-код и установите;
  2. Опишите события и вызовите их асинхронно, то есть гарантировано после того, как vk-пиксель инициализирован;

Как описывают события?

Всего событий сейчас 12 (актуально на октябрь 2018 года). Полный список можно найти по ссылкам-первоисточникам в разделе чуть ниже. У людей много вопросов появляется в духе, что именно за код, как его добавить, что делать, причём тут пример для Google Tag Manager и т. п.

Всё проще, чем кажется.

Вам важно знать id товара из прайс-листа. Его видно в меню «Ретаргетинг» рекламных кампаний в ВК.

В примерах ниже цифры 15901 — это и есть id прайс-листа. Замените на свой.

view_home 

<script>
window.vkAsyncInit = function() { 
  VK.Retargeting.ProductEvent(15901, "view_home", {});
  console.log('VK pixel event send: view_home');
}
</script>

view_search 

<script>
window.vkAsyncInit = function() { 
  VK.Retargeting.ProductEvent(15901, "view_search", {"search_string": "ПОИСКОВЫЙ ЗАПРОС"});
  console.log('VK pixel event send: view_search');
}
</script>

view_category 

<script>
window.vkAsyncInit = function() { 
  VK.Retargeting.ProductEvent(15901, "view_category", "");
  console.log('VK pixel event send: view_category');
}
</script>

view_other 

<script>
window.vkAsyncInit = function() { 
  VK.Retargeting.ProductEvent(15901, "view_other", {});
  console.log('VK pixel event send: view_other');
}
</script>

add_payment_info 

<script>
window.vkAsyncInit = function() { 
  VK.Retargeting.ProductEvent(15901, "add_payment_info", {});
  console.log('VK pixel event send: add_payment_info');
}
</script>

purchase 

<script>
window.vkAsyncInit = function() { 
  VK.Retargeting.ProductEvent(15901, "purchase", {});
  console.log('VK pixel event send: purchase');
}
</script>

add_payment_info 

<script>
window.vkAsyncInit = function() { 
  VK.Retargeting.ProductEvent(15901, "add_payment_info", {});
  console.log('VK pixel event send: add_payment_info');
}
</script>

init_checkout 

<script>
window.vkAsyncInit = function() { 
  VK.Retargeting.ProductEvent(15901, "init_checkout", {});
  console.log('VK pixel event send: init_checkout');
}
</script>

view_product 

<script>
window.vkAsyncInit = function() { 
  VK.Retargeting.ProductEvent(15901, "view_product", {"products": [{"id": "ID ИЛИ АРТИКУЛ ПРОДУКТА"}]} );
  console.log('VK pixel event send: view_product');
}
</script>

add_to_cart 

onclick="VK.Retargeting.ProductEvent(15901, "add_to_cart", {"products": [{"id": "ID ИЛИ АРТИКУЛ ПРОДУКТА"}]});return false;"

remove_from_cart 

onclick="VK.Retargeting.ProductEvent(15901, "remove_from_cart", {"products": [{"id": "ID ИЛИ АРТИКУЛ ПРОДУКТА"}]});return false;"

Особенности

  1. Если вы используете шаблонизатор Smarty, то не забывайте оборачивать JS-код в шаблонах в теги {literal}...{/literal}

Ещё на эту тему 🔥 🔥 🔥 🔥 🔥

Куча сайтов в своих статьях, по сути, ссылается на эти материалы и/или пересказываю их, но не отвечают на вопрос «как?».