Next.js · Produkcja B2B

MAMA Food

Strona w trzech językach zbierająca zapytania, przygotowana do pomiaru i pozycjonowania

MAMA Food produkuje bazy do lodów, mieszanki i sorbety dla lodziarni i producentów. Strona w Next.js, po polsku, angielsku i grecku, zbiera zapytania i prośby o próbki. Przejąłem istniejącą stronę i dodałem to, czego potrzebowała, żeby mierzyć leady i pozycjonować się we właściwym języku: Consent Mode v2, wiarygodne zdarzenie leada, ustawienia języków i adresów kanonicznych oraz obrazy Open Graph dla każdej podstrony.

Rola: Programista rozwijający istniejącą stronę (29 z 85 commitów)
Okres: kwiecień - wrzesień 2026
Technologie: Next.js 16
React 19
TypeScript
Tailwind CSS 4
GTM
Consent Mode v2
next/og
sharp
Strona: mama-food.pl(otwiera się w nowej karcie)

MAMA Food: strona główna na ekranie komputera

języki: PL, EN, EL: 3
adresów w sitemapie z hreflang: 18
obraz Open Graph na stronę: ~600 → ~90 KB

Kontekst

To nie jest sklep: jedyną konwersją jest formularz zapytania albo próbki. Dlatego zdarzenie leada i zgody są sednem analityki.

Strona istniała już w Next.js. Moja praca to warstwa między kodem a biznesem: co indeksuje Google, co liczy GA4 i jak wygląda udostępniony link.

Co zrobiłem

Google Tag Manager z Consent Mode v2, domyślnie bez zgody, i baner cookies z prawdziwym panelem kategorii oraz linkiem do ustawień w stopce
Język strony wysyłany do dataLayer, żeby raporty dało się dzielić według języka
Zdarzenie generate_lead wysyłane dopiero po udanym wysłaniu formularza, z blokadą podwójnego wysłania
Polski jako język domyślny, poprawione canonical, hreflang i x-default, do tego sitemap i robots.txt
Obrazy Open Graph generowane dla każdej podstrony i każdego języka przez next/og i sharp, zapisywane jako JPG
Deterministyczny identyfikator buildu, ikony, manifest i weryfikacja w Search Console

Trudne momenty i jak je rozwiązałem

Problem
Googlebot nie wysyła nagłówka Accept-Language, więc trafiał na wersję angielską, a adresy kanoniczne wskazywały starą, niedziałającą domenę.
Rozwiązanie
Polski stał się językiem domyślnym dla zapytań bez preferencji językowej, a canonical, hreflang i x-default wskazują aktualne adresy.
Problem
React 19 nie pozwala na tagi script bezpośrednio pod <html>, a tam siedziały skrypty zgód i GTM.
Rozwiązanie
Oba trafiły do <body>, a mały skrypt inline w ES5 odtwarza zapisaną zgodę, zanim załaduje się gtm.js, więc tagi nie ruszają przed decyzją odwiedzającego.
Problem
Wbudowany wyzwalacz formularza w GTM liczył leada nawet przy pustym, niepoprawnym formularzu.
Rozwiązanie
Własne zdarzenie generate_lead wysyłane dopiero po potwierdzeniu wysyłki przez serwer, przetestowane w 6 scenariuszach.