Webflow tracking: Formularer, e-commerce og GA4 korrekt opsat

Webflow er en kraftfuld platform for design og udvikling, men har ingen native tracking-integration som Shopify eller WordPress. Al tracking skal implementeres manuelt via custom code — hvilket giver fuld kontrol, men også flere muligheder for fejl.

Webflows tracking-udfordring

Til forskel fra Shopify (native Google-app) og WordPress (plugins som GTM4WP), har Webflow:

• -Ingen native GTM-integration — Du indsætter scripts manuelt i Project Settings
• -Ingen automatisk dataLayer — Du skal selv bygge event-pushes
• -Begrænsede checkout-hooks — Webflow E-commerce har lukkede checkout-sider
• -SPA-lignende navigation — Webflows Interactions og page transitions kan bryde tracking

Det betyder at en standard "kopier GA4-script ind" tilgang typisk giver mangelfulde data.

Trin 1: Installer GTM i Webflow

I Project Settings

1. 1.Gå til Webflow Project Settings → Custom Code
2. 2.Indsæt GTM head-snippet i "Head Code"
3. 3.Indsæt GTM body-snippet i "Footer Code" (der er ikke et body-felt, men footer kører tidligt nok)

Verificer

Publicér din side og åbn GTM Preview. Container-ID skal vises som aktiv.

Vigtigt: Brug ikke Webflow-sider med "Page Settings" custom code TIL GTM — indsæt det på projekt-niveau så det dækker alle sider.

Trin 2: Formular-tracking

Webflow-formularer er den mest almindelige konverteringshandling. Men de sender ikke automatisk events til dataLayer.

Metode 1: GTM Form Submission trigger

GTMs native Form Submission trigger kan fange Webflow-formularer — men det er upålideligt fordi Webflow bruger AJAX-submit (siden genindlæser ikke).

Metode 2: Custom dataLayer push (anbefalet)

Tilføj et script der lytter efter Webflows form success-event:

Scriptet placeres i Project Settings → Custom Code → Footer Code. Det pusher et generate_lead event til dataLayer som GTM kan fange med en Custom Event trigger.

Metode 3: Thank-you page redirect

Redirect brugeren til en /tak side efter formularindsendelse. Opsæt et GA4 event i GTM der fyrer på /tak URL'en. Simpelt men mister data hvis brugeren aldrig når tak-siden.

Trin 3: E-commerce tracking (Webflow E-commerce)

Webflow E-commerce har sin egen checkout-flow der er mere lukket end Shopify. For fuld e-handelssporing:

Hvad du kan tracke

• -view_item — Produktsider (via custom script på produkttemplaten)
• -add_to_cart — Tilføj til kurv-knap (via DOM event listener)
• -purchase — Ordrebekræftelsessiden (Webflow sender dig til en /order-confirmation side)

Hvad der er svært

• -begin_checkout — Webflows checkout er lukket for custom scripts
• -add_payment_info — Ikke tilgængeligt
• -Dynamiske produktdata — Du skal hente pris, navn og ID fra DOM-elementer

Implementering

For hvert event skal du skrive et custom script der:

1. 1.Henter produktdata fra DOM-elementer (data-attributes eller tekst-indhold)
2. 2.Pusher et struktureret event til dataLayer
3. 3.GTM fanger eventet og sender det til GA4/Google Ads/Meta

Trin 4: Consent Mode

Webflow har intet native cookiebanner. Du har to muligheder:

Tredjeparts-CMP (anbefalet)

Brug Cookiebot, CookieInformation eller Finsweet Cookie Consent (Webflow-specifik).

For Consent Mode v2-integration:

1. 1.Tilføj CMP-scriptet via GTM (ikke direkte i Webflow)
2. 2.Opsæt Consent Initialization tag i GTM med default "denied"
3. 3.CMP opdaterer consent state via gtag()

Finsweet Cookie Consent

Et Webflow-specifikt værktøj der integrerer med Webflows Attributes-system. Det er gratis og populært i Webflow-community'et, men tjek at det understøtter Consent Mode v2 med alle fire signaler.

Trin 5: Meta Pixel og CAPI

Meta Pixel

Indsæt Meta Pixel via GTM (ikke direkte i Webflow):

1. 1.Opret et Custom HTML tag med Pixel base code
2. 2.Sæt consent requirement til ad_storage
3. 3.Tilføj event-specifikke tags for Lead, Purchase osv.

Conversions API

For CAPI på Webflow anbefales server-side GTM:

1. 1.Browser-events sendes via web-container til sGTM
2. 2.sGTM videresender til Meta med server-side data (IP, User Agent)
3. 3.Deduplication via fælles event_id

Læs mere om Meta CAPI opsætning.

De mest almindelige Webflow tracking-fejl

1. Scripts der blokerer rendering

Custom code i head kan sænke din side. Brug async/defer på tracking-scripts og sørg for at GTM er det eneste script i head.

2. SPA-navigation bryder tracking

Webflow Interactions med page transitions kan forhindre GTM i at registrere sidevisninger. Løsning: Brug History Change trigger i GTM i stedet for standard Page View.

3. Formular-events fanges ikke

Webflows AJAX-formularer sender ikke standard form submit events. Brug custom dataLayer push (se Trin 2).

4. E-commerce data mangler currency

Webflow E-commerce viser priser i den valgte valuta, men sender ikke altid currency-parameteren til dataLayer. Hardcode currency: "DKK" i dine event-pushes.

5. Staging vs. production

Webflows staging-domæne (*.webflow.io) og dit produktionsdomæne er forskellige. Sørg for at din GTM-container og consent-setup fungerer på begge — eller brug GTM Environments til at skelne.

Webflow tracking-tjekliste

1. 1.GTM installeret på projekt-niveau (ikke sidestil)
2. 2.GA4 modtager sidevisninger på alle sider
3. 3.Formular-tracking aktiv via custom dataLayer push
4. 4.E-commerce events (view_item, add_to_cart, purchase) med korrekte parametre
5. 5.Consent Mode v2 Active med tredjeparts-CMP via GTM
6. 6.Meta Pixel styret via GTM med consent-check
7. 7.Ingen scripts i head der blokerer rendering
8. 8.SPA-navigation håndteret med History Change trigger

Vil du vide om din Webflow-tracking er korrekt? Kør en gratis tracking audit — den tjekker automatisk dine tags, consent og event-data. Eller læs mere om Webflow tracking-opsætning hos KSAnalytics.