Настройка динамического товарного ретаргетинга Вконтакте в UMI.CMS

20.08.2019

За основу возьмем инструкцию ВК по настройке динамического ретаргетинга.

Внимание: для подключения динамического ретаргетинга в кабинет рекламодателя нужно написать в техподдержку Вконтакте.

Загрузка каталога товаров в ВК

Для работы товарного ретаргетинга нужно загрузить YML файл с каталогом в кабинет Вконтакте.

Для настройки нам понадобиться ID прайс листа:

Настройка шаблонов UMI.CMS

Перед закрывающемся тегом body добавляем код пикселя из настроек.

ID прайс листа добавим в константу в default.phtml

define('VK_PRICE_LIST_ID', 4677);

Также добавим в константу массив ID товаров, которые будут показываться посетителям, которые не посещали страницы каталога. Например читали статьи. В массив можно добавить по 2-3 популярных товара из разных категорий. При желании можно вынести эти товары в настройки сайта.

$VKProductsIds = array(2214, 160, 28090, 2349, 6781);
define('VK_TARGET_IN_OTHER_ID', serialize($VKProductsIds));

После кода пикселя вызываем шаблон:

<?php if(METHOD!='purchase' and METHOD!='cart'  and METHOD!='purchasing_one_step') echo($this->render($variables, 'blocks/footer/vk-target')); ?>

Код шаблона /php/blocks/footer/vk-target.phtml

<?php /** @var umiTemplaterPHP|ViewPhpExtension|AjaxExtension|UpmixExtension  $this */?>
<?php /** @var array $variables */?>
<?php


$products = false;
$timeOut = 3000; //тайм аут нужен в том случае, если пиксель подключается через отложенную загрузку. Можно отрегулировать величину, чтобы не было ошибок в консоли
if (METHOD=='object'){
	$event = 'view_product';
	$bValue = 50;
	$emarket_price_arr = $this->macros('emarket', 'price', array(PAGE_ID, 'default', 0));
	$price = $emarket_price_arr["price-actual"];
	$price_old = $emarket_price_arr["price-original"] ?? false;
} elseif (PAGE_IS_INDEX){
	$event = 'view_home';
	$products = unserialize(VK_TARGET_POPULAR_IDS);
	$bValue = 5;
} elseif (METHOD=='category'){
	$event = 'view_category';
	$products = unserialize(VK_TARGET_IN_CATEGORY_IDS);
	$bValue = 10;
	$timeOut = 7000;
} elseif (METHOD=='search_do'){
	$event = 'view_search';
	$products = unserialize(VK_TARGET_IN_SEARCH_IDS);
	$bValue = 30;
} else {
	$event = 'view_other';
	$products = unserialize(VK_TARGET_IN_OTHER_ID);
	$bValue = 1;
}


?>
<script>
	const eventParams = {
		<?php if(METHOD=='object'):?>
		"products" : [{"id":"<?=PAGE_ID?>", "group_id":"<?=PAGE_PARENT_ID?>", "price":<?=$price?><?php if(!empty($price_old) and $price_old>$price) echo(', "price_old:"' . $price_old)?>}],
		<?php elseif (!empty($products)):?>
		"products" : [
			<?php foreach ($products as $id):?>
				{"id":"<?=$id?>"},
			<?php endforeach;?>
		],
		<?php endif;?>
		"business_value" : <?=$bValue?>,
		"currency_code" : "RUR"
	};
	setTimeout(function() {
		VK.Retargeting.ProductEvent(<?=VK_PRICE_LIST_ID?>, "<?=$event?>", eventParams);
	}, <?=$timeOut?>);
</script>

Переменная bValue – это ценность того или иного действия на сайте. Значения можно поменять нужным образом.

Главная страница

В шаблоне главной страницы меняем вывод популярных товаров для того чтобы сохранять ID популярных товаров в константу.

<?php $vkItemsIds = array();?>
<?php if(!empty($popularGoods['lines'])):?>
	<div class="popular-goods clear-after wrapper-row">
		<h2>Популярные товары</h2>
		<div class="relative clear-after owl-carousel owl-index js_object_list" data-list="Популярные на главной" data-category_id="1" data-category_name="Главная">
			<?php $popular = $TAGMANGER?>
			<?php foreach ($popularGoods['lines'] as $key=>$item):?>
				<?php
				$object = $this->render(array('item'=>$item , 'key'=>$key+1, 'id'=>PAGE_ID), 'modules/catalog/blocks/object/object-in-related-objects');
				$object = str_replace(array("\r\n", "\r", "\n", "\n\r", "\t"), '',  $object);
				$object = str_replace(array("  "), '',  $object);
				$vkItemsIds[] = $item['id'];
				echo ($object);
				?>
				<?php $popular .= $this->render(array('item'=>$item , 'key'=>($key+1), 'list'=>'Популярные на главной', 'categoryName'=>'Главная'), 'blocks/tag-manager/object-in-list') ?>
			<?php endforeach;?>
		</div>
		<?php $popular .= ']}});</script>';?>
		<?=$popular?>
	</div>
<?php endif;?>
<?php
define('VK_TARGET_POPULAR_IDS', serialize($vkItemsIds));
?>

Нужно добавить 3 строки:

 <?php $vkItemsIds = array();?>
.............................
 <?php $vkItemsIds[] = $item['id'];?>
............................
<?php define('VK_TARGET_POPULAR_IDS', serialize($vkItemsIds));?>

Страница объекта каталога

В шаблон объекта каталога добавляем обработчик добавления в корзину:

<script>
	var button = document.getElementById('eec_adgood');
	if (typeof(button) != 'undefined' && button != null){
		button.onclick = function(){
			var eventParamsCart = {
				"products" : [{"id":"<?=PAGE_ID?>", "group_id":"<?=PAGE_PARENT_ID?>", "price" : <?php echo $price?><?php if(!empty($priceOld) and $priceOld>$price) echo(', "price_old:"' . $priceOld)?>}],
				"business_value" : 100,
				"currency_code" : "RUR"
			};
			VK.Retargeting.ProductEvent(<?=VK_PRICE_LIST_ID?>, "add_to_cart", eventParamsCart);
		};
	}
</script>

Страница каталога

В шаблон вывода объектов в категории добавляем:

 <?php $vkItemsIds = array();?>
.............................
 <?php $vkItemsIds[] = $item['id'];?>
............................
<?php define('VK_TARGET_IN_CATEGORY_IDS', serialize($vkItemsIds));?>

Обработчик добавления в корзину в категории:

$(document).ready(function(){
    //добавить в корзину в категории
    $(".add_basket").on('click', function (e) {
        var $listDataTag = $(this).closest('#container');
        var id = $(this).data('pid');
        var $objectDataTag = $(this).closest('.catalog-item-wrapper');
        var price = $objectDataTag.data("price");
        var categoryId = $listDataTag.data("category_id");
        var eventParamsCart = {
            "products" : [{"id":id, "group_id":categoryId, "price" : price}],
            "business_value" : 100
        };
        VK.Retargeting.ProductEvent(4677, "add_to_cart", eventParamsCart);
    });
});

Оформление заказа

В шаблон /php/modules/emarket/purchasing_one_step.phtml добавляем:

$cart = $this->macros('emarket', 'cart');
$products = '';
foreach ($cart['items'] as $item){
	$products = $products . '{"id": "' . $item["element_id"] . '", "price" : ' . $item["price"]["actual"] . '},';
}

<script>
<?php if (!USER_IS_SV): ?>
	const eventParams = {
		"products" : [<?=$products?>],
		"business_value" : 500,
		"currency_code" : "RUR",
		"total_price" : <?= $cart["total-price"]["actual"] ?>
	};
	function onCheckout(step) {
		if (step === 3){
			option = $('input[name=delivery-id]:checked', '#purchase_form').siblings('label').text();
			setTimeout(function() {
				VK.Retargeting.ProductEvent(3332, "add_payment_info", eventParams);
			}, 2000);
		}
	}
	setTimeout(function() {
		VK.Retargeting.ProductEvent(4677, "init_checkout", eventParams);
	}, 4000);
<?php endif;?>
</script>

Функция onCheckout должна выполняться на шаге подтверждения платежной информации.

Совершение покупки

В шаблоне /php/modules/emarket/purchase/result_successful.phtml

Добавляем в цикл, в котором выводится информация о товарах в заказе:

$products = '';
...................
$products = $products . '{"id": "' . $id . '", "group_id":"' . $itemPage[0]->getParentId() . '", "price" : ' . $itemPage[0]->getValue('price') . '},';
<script> 
   const eventParams = {
	    "products" : [<?=$products?>],
	    "business_value" : 1000,
	    "currency_code" : "RUR",
	    "total_price" : <?= $total_price-$delivery_price; ?>
    };
    setTimeout(function() {
	    VK.Retargeting.ProductEvent(4677, "purchase", eventParams);
    }, 4000);
    
</script>

Поиск на сайте

В шаблон /php/modules/search/search_do.phtml добавляем

$vkItemsIds = array();
.....................
if ($key<10) $vkItemsIds[] = $item['id'];
.....................
<?php define('VK_TARGET_IN_SEARCH_IDS', serialize($vkItemsIds));?>

Comments 0

Добавить комментарий

Your email address will not be published. Required fields are marked *