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

Remarketing to jeden z najbardziej efektywnych kanałów w Google Ads. Możesz targetujesz użytkowników, którzy już weszli w kontakt z Twoją marką i choć nie ma jednej uniwersalnej liczby typu "2-3x lepiej", w wielu kontach remarketing realnie lepszy niż zimny ruch. Żeby jednak działał skutecznie, potrzebujesz poprawnej implementacji po stronie deweloperskiej.

Krótka odpowiedź: Remarketing Google Ads w React wymaga poprawnego Google tagu, odpowiednio skonstruowanych eventów remarketingowych i zgodności items[].id z jednym z identyfikatorów z feedu Merchant Center dla dynamicznego remarketingu. Zaawansowane listy odbiorców buduj w GA4GA4, czyli Google Analytics 4, to aktualna wersja platformy analitycznej Google do pomiaru zdarzeń i zachowań użytkowników. i łącz z Google Ads. W consent mode dla bazowego remarketingu kluczowe są ad_storage i ad_personalization, a ad_user_data dochodzi wtedy, gdy wysyłasz do Google user_id lub inne first-party dane reklamowe. Same listy potrzebują też czasu na wypełnienie zanim staną się użyteczne.

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. 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.

FAQ

Czy remarketing działa od razu po wdrożeniu taga?

Nie. Najpierw musisz zebrać użytkowników do list, odczekać synchronizację i osiągnąć minimalne progi użyteczności na danym networku. Dlatego pierwsze dni po wdrożeniu to zwykle etap walidacji danych, a nie oceny skuteczności kampanii.

Czy listy odbiorców w GA4 są zawsze lepsze niż listy budowane bezpośrednio przez tag?

Nie zawsze. Są bardziej elastyczne i zwykle lepsze do złożonej segmentacji, ale prosty remarketing tag-based nadal bywa wystarczający do podstawowych scenariuszy. Wybór zależy od złożoności produktu, jakości pomiaru i workflow zespołu.

Czy user_id rozwiązuje remarketing cross-device?

Nie, to użyteczny dodatkowy sygnał, ale skuteczność remarketingu cross-device zależy od całego ekosystemu danych, zalogowania użytkownika, konfiguracji Google i polityk reklamowych. Nie możesz traktowaćuser_id jak gwarancji.

Czy dynamiczny remarketing bez Merchant Center ma sens?

W retail praktycznie nie, ponieważ jeśli nie masz feedu produktów i spójnych identyfikatorów, lepiej myśleć o zwykłym remarketingu albo o innym typie listy odbiorców niż o „dynamicznym remarketingu” w pełnym znaczeniu.

Jak sprawdzić, czy listy remarketingowe się zapełniają?

Przejdź do Google Ads → Audience Manager i sprawdź rozmiar list po kilku dniach od wdrożenia. Minimalny próg to zwykle 100 aktywnych użytkowników w ostatnich 30 dniach dla Display, Search i YouTube. W sytuacji, jeśli listy są puste lub się nie powiększają, sprawdź w DebugView GA4 i Network tab czy eventy remarketingowe faktycznie docierają do Google.

Czy warto budować osobne listy dla różnych etapów lejka sprzedażowego?

Tak, ponieważ to jeden z kluczowych elementów skutecznego remarketingu i różne listy odbiorców wymagają różnych komunikatów oraz stawek. Przykładowo, użytkownicy z ostatnich 3 dni, którzy rozpoczęli finalizację zakupu, to całkowicie inny priorytet niż odwiedzający stronę główną sprzed miesiąca.

Czy remarketing działa identycznie w React SPA i w tradycyjnym serwisie?

W React SPASPA, czyli Single Page Application, działa bez pełnego przeładowania dokumentu przy każdej nawigacji. musisz zadbać o to, żeby eventy remarketingowe wysyłały się przy każdej zmianie zawartości ekranu, nie tylko przy pełnym przeładowaniu strony. W tradycyjnym serwisie z nawigacją page-by-page każde wejście na stronę produktu automatycznie triggeruje tagi — w SPA musisz obsłużyć to jawnie przez useEffect lub podobny mechanizm.

Podsumowanie

Remarketing Google Ads to strategia, w której frontend deweloper ma realny wpływ na jakość danych, zasięg list i sensowność późniejszej optymalizacji kampanii. Poprawna implementacja eventów, dynamiczny remarketing z Merchant Center feed i przemyślana segmentacja odbiorców zwykle dają lepszy punkt wyjścia do pracy marketingu niż chaotyczny setup „na szybko”. Kluczową kwestią są items[].id w eventach, które muszą odpowiadać jednemu z identyfikatorów z feedu Merchant Center (id, item_group_id albo display_ads_id), consent mode musi poprawnie obsłużyć ad_storage i ad_personalization, a listy odbiorców warto budować zarówno przez Google Ads tag jak i Google Analytics.

Źródła i dokumentacja

• About dynamic remarketing
• Dynamic remarketing events and parameters
• How your data segments work
• About Customer Match
• About audience segments in Audience manager
• About data segments that use User ID to advertise
• Consent mode for websites
• Tag Assistant extension