Реалізація динамічного ремаркетингу на сайті

Реалізація динамічного ремаркетингу на веб-сайті

Динамічний ремаркетинг відрізняється від звичайного тим, що в рекламних об'явленнях показуються конкретні товари, які користувач переглядав на сайте. Людина дивилася ноутбук за 89 000 рублів — у баннері появляється саме цей ноутбук з ціною і фотографією. Це потребує технічної зв'язки між сайтом, продуктовим фідом та рекламною платформою.

Продуктовий фід

Основа динамічного ремаркетингу — фід з даними про товари. Рекламні платформи підтягують з нього інформацію для генерації об'явлень.

Формат фіду для Google Merchant Center:

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:g="http://base.google.com/ns/1.0">
  <channel>
    <title>Каталог товарів</title>
    <link>https://example.com</link>
    <item>
      <g:id>PRODUCT_123</g:id>
      <g:title>MacBook Pro 14 M3 Pro</g:title>
      <g:description>Ноутбук Apple з чіпом M3 Pro, 18 ГБ пам'яті, SSD 512 ГБ</g:description>
      <g:link>https://example.com/catalog/laptops/macbook-pro-14</g:link>
      <g:image_link>https://example.com/images/products/mbp14.jpg</g:image_link>
      <g:price>89900 RUB</g:price>
      <g:sale_price>79900 RUB</g:sale_price>
      <g:availability>in stock</g:availability>
      <g:condition>new</g:condition>
      <g:brand>Apple</g:brand>
      <g:google_product_category>Electronics > Computers > Laptops</g:google_product_category>
      <g:custom_label_0>bestseller</g:custom_label_0>
    </item>
  </channel>
</rss>

Генерація фіду на Laravel:

// FeedController.php
class FeedController extends Controller
{
    public function googleMerchant(): Response
    {
        $products = Product::where('is_active', true)
            ->where('stock', '>', 0)
            ->with('category', 'images')
            ->get();

        return response()
            ->view('feeds.google-merchant', compact('products'))
            ->header('Content-Type', 'application/xml; charset=UTF-8');
    }
}

// routes/web.php
Route::get('/feeds/google-merchant.xml', [FeedController::class, 'googleMerchant'])
    ->middleware('cache.headers:public;max_age=3600');

Фід оновлюється автоматично — ціни і остатки актуальні.

Розмітка подій для Google Ads

Динамічний ремаркетинг Google потребує передачі ecomm_prodid (ID товару) та ecomm_pagetype (тип сторінки):

// На сторінці каталогу
gtag('event', 'view_item_list', {
  items: products.map(p => ({
    item_id: p.id,
    item_name: p.title,
    item_category: p.category,
    price: p.price,
  })),
});

// На сторінці товару — ключове событие для динамічного ремаркетингу
gtag('event', 'view_item', {
  items: [{
    item_id: 'PRODUCT_123',
    item_name: 'MacBook Pro 14 M3 Pro',
    item_category: 'Ноутбуки',
    price: 89900,
    currency: 'RUB',
  }],
});

// На сторінці кошика
gtag('event', 'view_cart', {
  value: 89900,
  currency: 'RUB',
  items: cartItems.map(item => ({
    item_id: item.product_id,
    item_name: item.product_name,
    price: item.price,
    quantity: item.quantity,
  })),
});

Розмітка для Meta Dynamic Product Ads

Meta потребує content_ids та content_type: 'product':

// Перегляд товару
fbq('track', 'ViewContent', {
  content_ids: ['PRODUCT_123'],
  content_type: 'product',
  value: 89900,
  currency: 'RUB',
});

// Кошик
fbq('track', 'AddToCart', {
  content_ids: ['PRODUCT_123', 'PRODUCT_456'],
  content_type: 'product',
  value: 94800,
  currency: 'RUB',
  num_items: 2,
});

// Початок оформлення
fbq('track', 'InitiateCheckout', {
  content_ids: ['PRODUCT_123', 'PRODUCT_456'],
  content_type: 'product',
  value: 94800,
  currency: 'RUB',
  num_items: 2,
});

VK Dynamic Retargeting

VK передає события через піксель з product events:

// Перегляд товару
VK.Retargeting.ProductEvent('view_product', {
  id: 'PRODUCT_123',
  price: 89900,
  currency: 'RUB',
});

// Додавання в кошик
VK.Retargeting.ProductEvent('add_to_cart', {
  id: 'PRODUCT_123',
  price: 89900,
  currency: 'RUB',
});

// Покупка
VK.Retargeting.ProductEvent('purchase', {
  id: 'PRODUCT_123',
  price: 89900,
  currency: 'RUB',
  order_id: 'ORDER_789',
});

Фід для ВКонтакте відправляється в форматі YML або CSV через кабінет реклами → «Каталог товарів».

Інтеграція через dataLayer + GTM

Щоб не дублювати код для кожної платформи — передавайте события в dataLayer, а GTM-теги трансльтують їх у потрібний формат:

// Єдине событие — GTM сам розкладає по платформам
window.dataLayer.push({
  event: 'product_view',
  product: {
    id: 'PRODUCT_123',
    name: 'MacBook Pro 14 M3 Pro',
    category: 'Ноутбуки',
    price: 89900,
    currency: 'RUB',
    brand: 'Apple',
    stock: 'in_stock',
  },
});

У GTM створюється по одному тегу для Google Ads, Meta та VK. Всі три теги використовують змінні з dataLayer — міняєте структуру в одному місці.

Перевірка зв'язки фід ↔ піксель

Критичний момент: ID товарів у пікселе (content_ids, item_id) повинні точно збігатися з полем id у фіді. Невідповідність — найчастіша проблема при настройці динамічного ремаркетингу.

// Перевірка — виводимо у консоль що передається в піксель
console.log('Product IDs in pixel:', cartItems.map(i => i.product_id));
console.log('Expected format in feed: e.g. "PRODUCT_123"');

У Meta Events Manager розділ «Test Events» показує дані в реальному часі — можна перевірити збіг ID.

Графік

Генерація фіду + розмітка подій для однієї платформи: 1 день. Настройка для всіх трьох (Google + Meta + VK) через GTM: 2-3 дні. Server-Side события для обходу блокування: ще 1-2 дні.