Налаштування пікселів рекламних мереж на 1С-Бітрікс

Налаштування пікселів рекламних мереж на 1С-Bitrix

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

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

Два підходи:

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

Пряма установка — код пікселів вбудовується в шаблон Bitrix безпосередньо. Плюс: швидше, надійніше. Мінус: кожна зміна потребує розгортання.

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

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

Код пікселя ВКонтакте у шаблоні Bitrix (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 та відновіть на наступних сторінках.