Реалізація Retargeting Pixel інтеграції для ремаркетингу
Ретаргетинговий піксель — це JavaScript-код від рекламної платформи, який встановлюється на сайт і фіксує відвідувачів у аудиторії для подальшого показу реклами. Піксель пише cookie в браузер користувача, передає дані візиту на сервери платформи, і користувач починає бачити вашу рекламу у пошуку, соцмережах та партнерських мережах.
Основні пікселі
Найчастіше встановлюють: Meta Pixel (Facebook/Instagram), VK Pixel, Google Ads remarketing tag, Яндекс.Аудиторії піксель, TikTok Pixel. Кожен має свій синтаксис, але логіка одна — базовий код на всіх сторінках плюс события на конкретних діях.
Meta Pixel
<!-- Базовий код — у <head> всіх сторінок -->
<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', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>
События для ремаркетингу:
// Перегляд товару
fbq('track', 'ViewContent', {
content_ids: ['PRODUCT_123'],
content_type: 'product',
value: 4900,
currency: 'RUB',
});
// Додавання в кошик
fbq('track', 'AddToCart', {
content_ids: ['PRODUCT_123'],
content_type: 'product',
value: 4900,
currency: 'RUB',
num_items: 1,
});
// Покупка
fbq('track', 'Purchase', {
value: 14700,
currency: 'RUB',
content_ids: ['PRODUCT_123', 'PRODUCT_456'],
content_type: 'product',
num_items: 2,
});
VK Pixel
<script type="text/javascript">
!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("VK-RTRG-XXXXXX-XXXXX"),VK.Retargeting.Hit()},
document.head.appendChild(t)}();
</script>
// События VK
VK.Retargeting.Event('add_to_cart');
VK.Retargeting.Event('purchase');
VK.Retargeting.ProductEvent('view_product', { id: 'PRODUCT_123', price: 4900, currency: 'RUB' });
Яндекс Аудиторії піксель
Яндекс використовує два різні інструменти: лічильник Метрики для ремаркетингу і піксель Аудиторій для зовнішніх сайтів.
<!-- Яндекс.Метрика — якщо сайт уже має лічильник, ремаркетинг настраюється через цілі -->
<script>
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();k=e.createElement(t);a=e.getElementsByTagName(t)[0];
k.async=1;k.src=r;a.parentNode.insertBefore(k,a)})(
window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(COUNTER_ID, "init", { clickmap: true, trackLinks: true, accurateTrackBounce: true });
</script>
// Досягнення цілі для ремаркетингової аудиторії
ym(COUNTER_ID, 'reachGoal', 'add_to_cart');
ym(COUNTER_ID, 'reachGoal', 'purchase', { order_price: 14700, currency: 'RUB' });
Встановлення через GTM
Рекомендований способ — через Google Tag Manager. Всі пікселі додаються в GTM, а не напрямку в код сайту. Це дозволяє додавати/видаляти пікселі без деплойу.
На сайте потрібно тільки:
<!-- GTM контейнер — у <head> -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- GTM noscript — одразу після <body> -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
У GTM створюються теги для кожного пікселя з потрібними тригерами. События передаються через dataLayer:
// Передача события в dataLayer для GTM
window.dataLayer = window.dataLayer || [];
// На сторінці товару
dataLayer.push({
event: 'view_item',
ecommerce: {
items: [{
item_id: 'PRODUCT_123',
item_name: 'MacBook Pro 14',
item_category: 'laptops',
price: 89900,
currency: 'RUB',
quantity: 1,
}],
},
});
GTM-тригер Custom Event: view_item запускає теги Meta, VK і Яндекс одночасно.
Server-Side Pixel (Conversions API)
Браузерні пікселі блокуються AdBlock і iOS ITP. Server-Side Conversions API вирішує проблему: события відправляються з сервера напрямку на API рекламної платформи.
// Meta Conversions API — відправка события з сервера
$response = Http::withHeaders([
'Authorization' => 'Bearer ' . config('meta.access_token'),
])->post("https://graph.facebook.com/v18.0/{$pixelId}/events", [
'data' => [[
'event_name' => 'Purchase',
'event_time' => time(),
'action_source' => 'website',
'user_data' => [
'em' => hash('sha256', strtolower(trim($user->email))),
'ph' => hash('sha256', preg_replace('/\D/', '', $user->phone)),
'client_ip_address' => $request->ip(),
'client_user_agent' => $request->userAgent(),
],
'custom_data' => [
'value' => $order->total,
'currency' => 'RUB',
'order_id' => (string) $order->id,
],
]],
'test_event_code' => config('meta.test_code'), // видалити в production
]);
Перевірка роботоспособности
Meta: розширення Meta Pixel Helper у Chrome показує які события срабатывають і з якими даними. VK: розділ «Статистика» в кабінеті аудиторій — повинні появлятися дані через 30-60 хвилин. Яндекс: «Метрика → Звіти → Аудиторія» — розділ «Ремаркетинг».
Графік
Встановлення базових пікселів (Meta + VK + Яндекс) через GTM: 2-4 години. Розмітка подій (ViewContent, AddToCart, Purchase) через dataLayer: 4-8 годин. Server-Side Conversions API для Meta: 1 день.