Реализация 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 Pixel, VK Pixel и Яндекс.Цель одновременно.
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'), // убрать в продакшене
]);
Проверка работоспособности
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 день.