Fix GTM issues in a Next.JS project
code
No description.
CONTEXT: Single Page Application (SPA) met client-side routing — bijv. Next.js App Router.Google Tag Manager (GTM) is geïnstalleerd via next/script of @next/third-parties/google (GoogleTagManager). Probleem:Bij client-side navigatie wordt geen nieuwe pageview geregistreerd. GTM vuurt alleen bij een echte page load. Oplossing:1. Standaard pageview uitschakelen in de GA4-configuratie (send_page_view = false)2. Virtuele pageview sturen naar de GTM dataLayer bij route changes3. In GTM een GA4 event-tag gebruiken die reageert op dit custom event (met alle variabelen) BELANGRIJK — dubbele pageviews voorkomen:- Bij eerste page load vuurt GTM al een pageview (of de GA4 config tag).- Als de tracker-component bij eerste mount ook een virtual_page_view stuurt → dubbele pageview.- Daarom: eerste render overslaan, alleen bij echte route changes pushen. --- DEEL 1: GTM-CONFIGURATIE 1. Data Layer-variabelen (Menu > Variabelen > Door gebruiker gedefinieerde variabelen): - DLV - page_location (Data Layer Variable, key: page_location) - DLV - page_path (Data Layer Variable, key: page_path) - DLV - page_title (Data Layer Variable, key: page_title) 2. Google-tag configuratie: - Type: Google-tag: configuratie-instellingen - Configuratieparameter: send_page_view | Waarde: false - Deze variabele gebruiken in de GA4-tag(s) 3. GA4 Event-tag: - Tagtype: Google Analytics: GA4-gebeurtenis - Metings-ID: jouw G-XXXXX - Configuratie: de bovenstaande Google-tag configuratie (send_page_view = false) - Gebeurtenisnaam: page_view - Gebeurtenisparameters: - page_location → DLV - page_location - page_path → DLV - page_path - page_title → DLV - page_title 4. Trigger: - Type: Aangepaste gebeurtenis - Gebeurtenisnaam: virtual_page_view (of de naam die je in de code gebruikt) - Deze trigger koppelen aan de GA4 event-tag --- DEEL 2: NEXT.JS IMPLEMENTATIE Optie A — Met @next/third-parties/google: - GoogleTagManager in layout: <GoogleTagManager gtmId="GTM-XXXXX" />- Component: sendGTMEvent({ event: 'virtual_page_view', page_path, page_location, page_title })- Eventnaam moet overeenkomen met de GTM-trigger (bijv. virtual_page_view) Optie B — Handmatig dataLayer.push: - window.dataLayer.push({ event: 'virtual_page_view', page_path, page_location, page_title })- Zelfde eventnaam als in GTM-trigger TECHNISCHE EISEN VOOR DE TRACKER-COMPONENT: 1. Maak een aparte component: VirtualPageViews of GTMRouteTracker2. Gebruik: - usePathname() - useSearchParams() (voor volledige URL inclusief query string) - useEffect() - useRef() om de eerste render te detecteren3. Logica: - Eerste render: GEEN event pushen. Alleen de huidige path opslaan in een ref. - Volgende renders: alleen pushen als het pad is gewijzigd. - Voorkom dubbele pageviews: eerste mount = geen push.4. Data die je pusht: - event: "virtual_page_view" (of overeenkomstig met GTM-trigger) - page_path: pathname + query string (bijv. /pagina?foo=bar) - page_location: window.location.href (of window.location.origin + fullPath) - page_title: document.title5. Controleer of window bestaat; initialiseer dataLayer indien nodig6. Wrap de component in <Suspense fallback={null}> als je useSearchParams gebruikt7. Plaats de component in de root layout (bijv. in <body>) EXTRA:- Voeg een korte comment toe waarom de eerste render wordt overgeslagen (voorkomen dubbele pageviews).- Optioneel: path-exclusies (bijv. /studio, /admin) via een configuratie. OUTPUT:- Volledige, productieklare component- Inclusief imports- Inclusief duidelijke inline comments- Geen uitleg buiten de code
Jeff Goldberg·public·3h