Google Ads Remarketing w React – dynamiczne listy odbiorców i personalizacja reklam

Jak działa remarketing technologicznie?

Użytkownik odwiedza Twoją stronę → gtag wysyła dane o wizycie do Google → Google dodaje użytkownika do listy odbiorców → gdy użytkownik przegląda inne strony (Display Network, YouTube, Gmail), widzi Twoje reklamy.

Kluczowe jest by wysyłać te dane, które są rzeczywiście potrzebne, zgodne z wymaganym schematem i legalnie zebrane. Więcej sygnałów nie zawsze znaczy lepiej, jeśli są niespójne, dublowane albo zebrane bez poprawnych zgód.

Krok 1: Global Site Tag z remarketingiem

Jeśli masz już gtag z Google Ads config, remarketing bazowy jest włączony automatycznie — każdy page_view buduje podstawową listę "All visitors". Podstawowa lista to za mało — musisz segmentować użytkowników po zachowaniach.

Krok 2: Listy odbiorców budowane z eventów

Architektura eventów remarketingowych

// lib/remarketing.ts
export function sendRemarketingEvent(
  eventName: string,
  params: Record<string, unknown>,
) {
  if (typeof window === 'undefined' || !window.gtag) return
 
  window.gtag('event', eventName, {
    send_to: process.env.NEXT_PUBLIC_ADS_CONVERSION_ID,
    ...params,
  })
}
 
export const remarketing = {
  // Użytkownik przeglądał kategorię; przekaż kilka najważniejszych produktów z listy
  viewCategory: (category: string, products: Product[]) =>
    sendRemarketingEvent('view_item_list', {
      item_list_id: category,
      item_list_name: category,
      items: products.slice(0, 5).map((product) => ({
        id: product.id,
        google_business_vertical: 'retail',
      })),
    }),
 
  // Użytkownik widział produkt
  viewProduct: (product: Product) =>
    sendRemarketingEvent('view_item', {
      value: product.price / 100,
      items: [
        {
          id: product.id,
          google_business_vertical: 'retail',
        },
      ],
    }),
 
  // Dodał do koszyka (wysoki intent)
  addToCart: (product: Product) =>
    sendRemarketingEvent('add_to_cart', {
      value: product.price / 100,
      items: [
        {
          id: product.id,
          google_business_vertical: 'retail',
        },
      ],
    }),
 
  // Kupił (do wykluczenia z remarketingu lub cross-sell)
  purchase: (orderId: string, value: number, items: Product[]) =>
    sendRemarketingEvent('purchase', {
      value: value / 100,
      transaction_id: orderId,
      items: items.map((p) => ({
        id: p.id,
        google_business_vertical: 'retail',
      })),
    }),
}

Wdrożenie w komponentach

// app/products/[category]/page.tsx
"use client";
 
import { useEffect } from "react";
import { remarketing } from "@/lib/remarketing";
 
export default function CategoryPage({
  params,
  products,
}: {
  params: { category: string };
  products: Product[];
}) {
  useEffect(() => {
    remarketing.viewCategory(params.category, products);
  }, [params.category, products]);
 
  return <div>{/* product list */}</div>;
}

// app/products/[id]/page.tsx
"use client";
 
import { useEffect } from "react";
import { remarketing } from "@/lib/remarketing";
 
export function ProductDetailClient({ product }: { product: Product }) {
  useEffect(() => {
    remarketing.viewProduct(product);
  }, [product]);
 
  const handleAddToCart = () => {
    addToCart(product);
    remarketing.addToCart(product);
  };
 
  return (
    <div>
      <h1>{product.name}</h1>
      <button onClick={handleAddToCart}>Dodaj do koszyka</button>
    </div>
  );
}

Krok 3: Dynamiczny remarketing (ecommerce)

Dynamiczny remarketing zamiast generycznej reklamy pokazuje użytkownikowi konkretne produkty, które wcześniej przeglądał. Żeby to działało, potrzebne jest połączenie z Google Merchant Center.

Wymagania techniczne

1. Google Merchant Center z feedem produktów,
2. Parametr google_business_vertical w eventach (ustawiony na "retail"),
3. Item ID w eventach musi odpowiadać jednemu z identyfikatorów produktu z Merchant Center feed.

Feed produktów – format

<!-- Uproszczony Merchant Center feed -->
<item>
  <g:id>SKU-12345</g:id>
  <title>Laptop ThinkPad X1 Carbon</title>
  <description>Ultrabook 14 cali, Intel i7, 16GB RAM</description>
  <link>https://example.com/products/sku-12345</link>
  <g:image_link>https://example.com/images/thinkpad-x1.jpg</g:image_link>
  <g:price>5999.00 PLN</g:price>
  <g:availability>in_stock</g:availability>
  <g:brand>Lenovo</g:brand>
  <g:condition>new</g:condition>
</item>

Ważne items[].id w Twoim evencie musi odpowiadać jednemu z identyfikatorów z feedu Merchant Center: id, item_group_id albo display_ads_id, więc jeśli się nie zgadzają, Google nie pokaże dynamicznych reklam.

// ✅ ID zgadzają się
// Feed: <g:id>SKU-12345</g:id>
// Event: items: [{ id: "SKU-12345" }]
 
// ❌ ID nie zgadzają się
// Feed: <g:id>SKU-12345</g:id>
// Event: items: [{ id: "12345" }]  – brak prefiksu SKU-

Krok 4: Listy odbiorców w GA4 → Google Ads

Alternatywa do budowania list odbiorców przez gtag: stwórz je w GA4 i połącz z Google Ads.

Jak to działa?

1. GA4 zbiera eventy (page_view, add_to_cart, purchase itd.),
2. W GA4 tworzysz segmenty odbiorców (Admin → Audiences),
3. Linkujesz GA4 z Google Ads (Admin → Google Ads Links),
4. Listy odbiorców automatycznie synchronizują się z Google Ads.

Przykłady list odbiorców w GA4

Cart Abandoners (porzucony koszyk):

Include: Users who triggered "add_to_cart" in last 7 days
Exclude: Users who triggered "purchase" in last 7 days

High-Value Browsers (użytkownicy zaangażowani):

Include: Users where session_count > 3 in last 30 days
AND page_views > 10 in last 30 days
Exclude: Users who triggered "purchase" in last 30 days

Recent Purchasers (do cross-sell):

Include: Users who triggered "purchase" in last 14 days

Blog Readers → Product Interest (content remarketing):

Include: Users who viewed pages matching "/blog/.*" in last 30 days
AND session_duration > 120 seconds
Exclude: Users who triggered "purchase" ever

Dlaczego listy odbiorców w GA4 są lepsze niż te budowane przez gtag?

GA4 pozwala tworzyć bardziej złożone segmenty – łączenie wielu warunków, wykluczenia, sekwencje zdarzeń i okna czasowe. Listy odbiorców budowane bezpośrednio przez gtag są prostsze, ale mniej elastyczne.

Minusem jest to, że taka architektura jest bardziej zależna od jakości całego pomiaru w GA4 i zwykle nie działa w pełnym sensie „real-time”. Jeśli potrzebujesz szybkich, prostych list typu „wszyscy odwiedzający” albo „porzucony koszyk”, tag-based remarketing nadal bywa wystarczający.

Krok 5: User ID jako osobny mechanizm segmentów danych

Jeśli użytkownik jest zalogowany, możesz przekazywać do Google Ads stabilny, własny user_id, ale to nie jest zwykły „przełącznik cross-device”. W praktyce chodzi o osobny mechanizm list opartych na własnych identyfikatorach użytkownika, który wymaga dodatkowej konfiguracji w Google Ads i późniejszego uploadu list user_id przez UI lub API.

To rozwiązanie:

• działa dla Search, Shopping i YouTube,
• nie jest wspierane dla Display,
• jest osobne względem funkcji User-ID w samym GA4.

W warstwie tagowania user_id przekazujesz najlepiej przy zdarzeniu logowania albo przy istniejącym evencie Google Ads, gdy masz dostęp do stabilnego identyfikatora użytkownika:

// Po zalogowaniu
export function sendLoginWithUserId(userId: string) {
  if (typeof window === 'undefined' || !window.gtag) return
 
  window.gtag('event', 'login', {
    user_id: userId,
  })
}

Jeśli masz już event remarketingowy, user_id możesz dodać bezpośrednio do jego payloadu. Samo przesłanie user_id nie tworzy jeszcze gotowej listy remarketingowej. Najczęściej praktyczniejszą podstawą do codziennego remarketingu pozostają dobrze spięte listy w GA4, klasyczne segmenty Google Ads i Customer Match.

Krok 6: Customer Match (first-party data)

Customer Match pozwala uploadować listy klientów (email, telefon) do Google Ads i targetować ich reklamami. W epoce cookieless, first-party data to ma istotną rolę.

// Server-side: upload customer list
// app/api/ads/customer-match/route.ts
export async function POST(request: NextRequest) {
  const { emails } = await request.json()
 
  // Google Ads API – OfflineUserDataJobService
  // Hashuje i uploaduje emaile jako Customer Match list
  // ...
}

To jest zaawansowany temat wymagający Google Ads, APIAPI, czyli Application Programming Interface, definiuje sposób komunikacji między aplikacjami lub modułami. Tu chodzi o konwencje plików Next.js, które zamieniają eksportowaną funkcję w gotowy plik sitemap.xml lub robots.txt. ale warto wiedzieć, że istnieje. Warto też pamiętać, że dostępność i zastosowanie Customer Match zależą od polityk, typu konta oraz regionu. Przykładowo, użycie tych list na części inventory w EEA/UK/CH jest dziś bardziej ograniczone niż kiedyś.

Consent i remarketing

Remarketing wymaga zgody użytkownika na:

• ad_storage: granted – przechowywanie cookies reklamowych i odczyt reklamowych identyfikatorów
• ad_personalization: granted – personalizacja reklam, w tym remarketing
• ad_user_data: granted – przesyłanie do Google danych użytkownika do celów reklamowych, np. user_id albo danych do enhanced conversions

Dla bazowego remarketingu kluczowe są ad_storage i ad_personalization. Jeśli ad_personalization jest ustawione na denied, remarketing jest wyłączony. ad_user_data staje się istotne wtedy, gdy chcesz przekazywać do Google własne dane użytkownika do zastosowań reklamowych.

// Sprawdź consent przed wysyłaniem eventów remarketingowych
export function canDoRemarketing(): boolean {
  return (
    localStorage.getItem('consent_ad_storage') === 'granted' &&
    localStorage.getItem('consent_ad_personalization') === 'granted'
  )
}
 
export function canSendAdUserData(): boolean {
  return localStorage.getItem('consent_ad_user_data') === 'granted'
}
 
export function sendRemarketingEvent(
  eventName: string,
  params: Record<string, unknown>,
) {
  if (!canDoRemarketing()) return
  // ... wysyłka eventu
}

Strategie remarketingowe – podsumowanie dla dewelopera

Debugowanie remarketingu

Tag Assistant – Chrome extension → weryfikuje czy Google tagi i eventy remarketingowe odpalają się poprawnie.

GA4 DebugView – sprawdź czy eventy view_item, add_to_cart itd. dochodzą.

Google Ads → Audience Manager – po kilku dniach sprawdź, czy listy odbiorców się zapełniają. Minimalne progi różnią się w zależności od sieci: 100 aktywnych użytkowników dla Display i Gmail, 1 000 dla Search (RLSA) i YouTube. Customer Match rządzi się częściowo innymi zasadami.

Network tab – szukaj requestów do googleads.g.doubleclick.net – to remarketing pixel.