{"library":"react-server-side-gtm","title":"React Google Tag Manager with Server-Side Tagging","description":"react-server-side-gtm is a React component library designed for integrating Google Tag Manager (GTM) into React applications, with a particular focus on robust server-side tagging capabilities. As an actively maintained fork of the `react-gtm-module` library, it addresses the original project's stagnation by providing more active development and support for newer GTM features. The current stable version is `3.0.1`, with recent `v3.0.0` releases indicating an active development cycle and a steady release cadence. Key differentiators include enhanced support for server-side tagging, offering greater control over data and improved privacy compliance. It also provides flexible options for custom and multiple `dataLayer` configurations, facilitates the integration of additional events, and allows for specific configurations for custom GTM server-side containers and different deployment environments. This library is well-suited for React projects requiring advanced GTM implementations beyond basic client-side tracking, especially those leveraging the performance, security, and data accuracy benefits of server-side Google Tag Manager.","language":"javascript","status":"active","last_verified":"Wed Apr 22","install":{"commands":["npm install react-server-side-gtm"],"cli":null},"imports":["import TagManager from 'react-server-side-gtm';","TagManager.initialize({ gtmId: 'GTM-XXXXXX' });","TagManager.dataLayer({ dataLayer: { event: 'my_event' } });"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useEffect } from 'react';\nimport TagManager from 'react-server-side-gtm';\n\nconst GtmInitializer = () => {\n  useEffect(() => {\n    const gtmId = process.env.NEXT_PUBLIC_GTM_ID ?? 'GTM-XXXXXX'; // Use env var or default\n\n    if (gtmId === 'GTM-XXXXXX') {\n      console.warn('GTM ID is not configured. Using placeholder GTM-XXXXXX. Please set NEXT_PUBLIC_GTM_ID.');\n    }\n\n    // Initialize GTM when the component mounts\n    TagManager.initialize({\n      gtmId: gtmId,\n      dataLayer: {\n        event: 'page_view',\n        pagePath: window.location.pathname,\n        pageTitle: document.title,\n        userId: 'USER_12345', // Example custom user ID\n        userProject: 'web_application',\n      },\n      // Optional: Specify a custom dataLayer name if needed\n      // dataLayerName: 'myCustomDataLayer',\n      // Optional: Configure custom GTM server-side container endpoint\n      // src: 'https://your-custom-gtm-server.com',\n    });\n\n    // Simulate a user action after some time\n    const timer = setTimeout(() => {\n      TagManager.dataLayer({\n        dataLayer: {\n          event: 'promo_view',\n          promotionId: 'SUMMER_SALE',\n          position: 'top_banner'\n        },\n      });\n      console.log('Pushed a simulated promo_view event to dataLayer.');\n    }, 3000);\n\n    return () => clearTimeout(timer);\n  }, []);\n\n  const handleProductClick = (productId) => {\n    TagManager.dataLayer({\n      dataLayer: {\n        event: 'product_click',\n        productId: productId,\n        category: 'Electronics',\n        list: 'Search Results'\n      },\n    });\n    alert(`Product ${productId} clicked! Event sent to GTM.`);\n  };\n\n  return (\n    <div>\n      <h1>Welcome to your Application!</h1>\n      <p>This page integrates Google Tag Manager for analytics and server-side tagging.</p>\n      <button onClick={() => handleProductClick('P1001')}>View Product P1001</button>\n      <p>Open your browser's developer tools and check the Network tab or GTM Debugger for dataLayer events.</p>\n    </div>\n  );\n};\n\nexport default GtmInitializer;","lang":"typescript","description":"This quickstart initializes Google Tag Manager upon component mount, pushes initial page view data to the dataLayer, and demonstrates how to push custom events triggered by user actions or asynchronous operations, incorporating environment variables for GTM ID.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}