react-server-side-gtm

import React, { useEffect } from 'react'; import TagManager from 'react-server-side-gtm'; const GtmInitializer = () => { useEffect(() => { const gtmId = process.env.NEXT_PUBLIC_GTM_ID ?? 'GTM-XXXXXX'; // Use env var or default if (gtmId === 'GTM-XXXXXX') { console.warn('GTM ID is not configured. Using placeholder GTM-XXXXXX. Please set NEXT_PUBLIC_GTM_ID.'); } // Initialize GTM when the component mounts TagManager.initialize({ gtmId: gtmId, dataLayer: { event: 'page_view', pagePath: window.location.pathname, pageTitle: document.title, userId: 'USER_12345', // Example custom user ID userProject: 'web_application', }, // Optional: Specify a custom dataLayer name if needed // dataLayerName: 'myCustomDataLayer', // Optional: Configure custom GTM server-side container endpoint // src: 'https://your-custom-gtm-server.com', }); // Simulate a user action after some time const timer = setTimeout(() => { TagManager.dataLayer({ dataLayer: { event: 'promo_view', promotionId: 'SUMMER_SALE', position: 'top_banner' }, }); console.log('Pushed a simulated promo_view event to dataLayer.'); }, 3000); return () => clearTimeout(timer); }, []); const handleProductClick = (productId) => { TagManager.dataLayer({ dataLayer: { event: 'product_click', productId: productId, category: 'Electronics', list: 'Search Results' }, }); alert(`Product ${productId} clicked! Event sent to GTM.`); }; return ( <div> <h1>Welcome to your Application!</h1> <p>This page integrates Google Tag Manager for analytics and server-side tagging.</p> <button onClick={() => handleProductClick('P1001')}>View Product P1001</button> <p>Open your browser's developer tools and check the Network tab or GTM Debugger for dataLayer events.</p> </div> ); }; export default GtmInitializer;