Настройка пикселей рекламных сетей на 1С-Битрикс

Настройка пикселей рекламных сетей на 1С-Битрикс

Пиксель ВКонтакте, пиксель Facebook/Meta, пиксель TikTok, счётчик Яндекс.Метрики — каждый из них требует установки кода на сайт и передачи событий о действиях пользователя. Задача не в том, чтобы вставить <script> в шаблон — это просто. Задача в том, чтобы отправлять правильные события с правильными данными: просмотр товара, добавление в корзину, оформление заказа, покупка.

Архитектура: GTM или прямая установка

Есть два подхода:

Через GTM — все пиксели устанавливаются в один контейнер GTM, сайт передаёт данные через dataLayer. Плюс: маркетолог управляет пикселями без разработчика. Минус: дополнительный запрос к GTM, GTM может блокироваться адблокерами.

Прямая установка — код пикселей встраивается в шаблон Битрикс напрямую. Плюс: быстрее, надёжнее. Минус: каждое изменение требует деплоя.

На практике: GTM для основных пикселей, прямая установка для счётчиков критичных конверсий.

Пиксель ВКонтакте

Код пикселя ВКонтакте в шаблоне Битрикс (header.php):

<?php
$vkPixelId = \Bitrix\Main\Config\Option::get('custom', 'vk_pixel_id', '');
?>
<?php if ($vkPixelId): ?>
<script>
!function(){var t=document.createElement("script");t.type="text/javascript",
t.async=!0,t.src='https://vk.com/js/api/openapi.js?169',
t.onload=function(){VK.Retargeting.Init("<?= htmlspecialchars($vkPixelId) ?>"),
VK.Retargeting.Hit()},document.head.appendChild(t)}();
</script>
<noscript><img src="https://vk.com/rtrg?p=<?= htmlspecialchars($vkPixelId) ?>"
style="position:fixed;left:-999px;" alt=""/></noscript>
<?php endif; ?>

Событие добавления в корзину для ВКонтакте:

// Вызывать при добавлении в корзину
if (typeof VK !== 'undefined') {
    VK.Retargeting.Event('add_to_cart');
    // Или с параметрами для динамического ретаргетинга:
    VK.Retargeting.ProductEvent(productId, 'add_to_cart', {
        price: productPrice,
        currency: 'RUB'
    });
}

Пиксель Facebook/Meta

<?php $fbPixelId = \Bitrix\Main\Config\Option::get('custom', 'fb_pixel_id', ''); ?>
<?php if ($fbPixelId): ?>
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '<?= htmlspecialchars($fbPixelId) ?>');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=<?= htmlspecialchars($fbPixelId) ?>&ev=PageView&noscript=1"/></noscript>
<?php endif; ?>

Событие ViewContent на странице товара — в шаблоне компонента:

// result_modifier.php компонента catalog.element
$this->arResult['FB_CONTENT'] = json_encode([
    'content_ids' => [$arResult['ID']],
    'content_type' => 'product',
    'value' => (float)($arResult['CATALOG_PRICE']['BASE']['PRICE'] ?? 0),
    'currency' => 'RUB'
], JSON_UNESCAPED_UNICODE);

// В template.php
fbq('track', 'ViewContent', <?= $arResult['FB_CONTENT'] ?>);

Счётчик Яндекс.Метрики с целями

<?php $yandexMetrikaId = \Bitrix\Main\Config\Option::get('custom', 'ym_counter_id', ''); ?>
<?php if ($yandexMetrikaId): ?>
<script type="text/javascript">
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
var z = m[i],d=e.createElement(t),n=e.getElementsByTagName(t)[0],b=e.location;
z.l=1*new Date();d.async=1;d.src=r+'?'+Math.random();
k=function(){n.parentNode.insertBefore(d,n)};
if(e.readyState=='loading'){e.addEventListener('onreadystatechange',k)}else{k()}}
(window, document, 'script', 'https://mc.yandex.ru/metrika/tag.js', 'ym'));
ym(<?= (int)$yandexMetrikaId ?>, 'init', {
    clickmap:true,
    trackLinks:true,
    accurateTrackBounce:true,
    webvisor:true,
    ecommerce:"dataLayer"
});
</script>
<?php endif; ?>

Событие покупки для всех пикселей

На странице «Спасибо за заказ» единый блок для всех пикселей:

<?php
$orderId = (int)($_SESSION['SALE_ORDER_ID_REDIRECTED'] ?? 0);
if ($orderId > 0):
    $order = \Bitrix\Sale\Order::load($orderId);
    $orderPrice = $order ? (float)$order->getPrice() : 0;
    $orderCurrency = $order ? $order->getCurrency() : 'RUB';
?>
<script>
(function() {
    var orderId = '<?= $orderId ?>',
        orderPrice = <?= $orderPrice ?>,
        currency = '<?= htmlspecialchars($orderCurrency) ?>';

    // ВКонтакте
    if (typeof VK !== 'undefined') {
        VK.Retargeting.Event('purchase');
    }

    // Facebook
    if (typeof fbq !== 'undefined') {
        fbq('track', 'Purchase', {
            value: orderPrice,
            currency: currency,
            order_id: orderId
        });
    }

    // Яндекс.Метрика — цель
    if (typeof ym !== 'undefined') {
        ym(<?= (int)\Bitrix\Main\Config\Option::get('custom', 'ym_counter_id') ?>,
           'reachGoal', 'purchase', {
            order_price: orderPrice,
            currency: currency
        });
    }
})();
</script>
<?php endif; ?>

Consent Mode и согласие пользователя

Европейский GDPR и российский 152-ФЗ требуют согласия пользователя на передачу данных пикселям. Google Consent Mode v2 и аналоги позволяют откладывать активацию пикселей до получения согласия.

Базовая реализация:

// Устанавливаем до загрузки GTM
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

// По умолчанию — отказ
gtag('consent', 'default', {
    'ad_storage': 'denied',
    'analytics_storage': 'denied',
    'wait_for_update': 500
});

После согласия пользователя (через баннер куки):

gtag('consent', 'update', {
    'ad_storage': 'granted',
    'analytics_storage': 'granted'
});

Сохранить выбор пользователя в localStorage и восстанавливать на следующих страницах.