{"id":11711,"library":"react-ga","title":"React Google Analytics Module (Universal Analytics)","description":"react-ga is a JavaScript module designed for integrating Google Universal Analytics (UA-xxxxxx-x properties) tracking into React applications. It provides a React-friendly wrapper around the core Google Analytics library, offering an opinionated API to standardize instrumentation. The current stable version is 3.3.1, released in June 2022. However, this library is now considered deprecated because Google Universal Analytics ceased processing new hits on July 1, 2023, in favor of Google Analytics 4 (GA4). react-ga does not support GA4's `G-` measurement IDs, making it unsuitable for new analytics implementations or existing ones that have migrated to GA4. For GA4 integration, users should consider `react-ga4` or direct `gtag.js` implementations.","status":"deprecated","version":"3.3.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-ga/react-ga","tags":["javascript","React","GA","Google Analytics","Universal Analytics","typescript"],"install":[{"cmd":"npm install react-ga","lang":"bash","label":"npm"},{"cmd":"yarn add react-ga","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-ga","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for type checking React component props, particularly for the OutboundLink component.","package":"prop-types","optional":false},{"reason":"Peer dependency for React components, specifically for the OutboundLink component. Supports React versions 15.6.2 through 18.","package":"react","optional":false}],"imports":[{"note":"This is the standard named import for the main ReactGA object, providing all tracking methods. CommonJS `require` works but ESM is preferred in modern React projects.","wrong":"const ReactGA = require('react-ga');","symbol":"ReactGA","correct":"import ReactGA from 'react-ga';"},{"note":"Use this path to import the core non-React specific analytics functionalities, if you don't need the React components (like OutboundLink) or want to avoid React as a direct dependency.","symbol":"ReactGA","correct":"import ReactGA from 'react-ga/core';"},{"note":"OutboundLink is a named export for a React component that handles tracking outbound clicks. It requires React to be a peer dependency.","wrong":"import OutboundLink from 'react-ga';","symbol":"OutboundLink","correct":"import { OutboundLink } from 'react-ga';"}],"quickstart":{"code":"import ReactGA from 'react-ga';\nimport React, { useEffect } from 'react';\n\nconst GA_TRACKING_ID = process.env.REACT_APP_GA_UA_ID ?? 'UA-000000-01'; // Use a Universal Analytics ID\n\nfunction App() {\n  useEffect(() => {\n    if (GA_TRACKING_ID.startsWith('UA-')) {\n      ReactGA.initialize(GA_TRACKING_ID, { debug: process.env.NODE_ENV === 'development' });\n      ReactGA.pageview(window.location.pathname + window.location.search);\n      console.log('ReactGA initialized and pageview sent for UA ID:', GA_TRACKING_ID);\n    } else {\n      console.warn('GA_TRACKING_ID is not a Universal Analytics ID (UA-). react-ga only supports Universal Analytics. Please use react-ga4 for GA4 (G-) IDs.');\n    }\n  }, []);\n\n  const handleButtonClick = () => {\n    if (GA_TRACKING_ID.startsWith('UA-')) {\n      ReactGA.event({\n        category: 'User',\n        action: 'Clicked Button',\n        label: 'Demo Button'\n      });\n      console.log('GA Event sent: Clicked Demo Button');\n    }\n  };\n\n  return (\n    <div>\n      <h1>Welcome to React-GA Demo</h1>\n      <p>This demo uses react-ga for Universal Analytics tracking.</p>\n      <button onClick={handleButtonClick}>Track Me</button>\n      <p>Check your Universal Analytics dashboard for data.</p>\n      <p>Note: Universal Analytics is deprecated. For GA4, use react-ga4.</p>\n    </div>\n  );\n}\n\nexport default App;\n","lang":"typescript","description":"This quickstart demonstrates how to initialize `react-ga` with a Universal Analytics tracking ID and send a pageview and a custom event. It includes a warning for users attempting to use GA4 IDs."},"warnings":[{"fix":"Migrate your analytics implementation to Google Analytics 4 (GA4). `react-ga` does not support GA4's `G-` measurement IDs. Consider using `react-ga4` (a separate library) or integrating the native `gtag.js` directly for GA4 tracking.","message":"Google Universal Analytics (UA) has been officially deprecated and stopped processing new hits on July 1, 2023. This means `react-ga`, which is built exclusively for UA properties, no longer collects data for standard UA properties.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"When initializing, include `siteSpeedSampleRate: 100` in the `gaOptions` object to send 100% of page timing hits. Example: `ReactGA.initialize('UA-XXXXXXXXX-X', { gaOptions: { siteSpeedSampleRate: 100 } });`","message":"The default `siteSpeedSampleRate` for Universal Analytics is 1%, meaning only a small fraction of page timing hits are sent. This can lead to insufficient data for performance analysis.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure `debug: true` is only enabled in non-production environments. A common pattern is `ReactGA.initialize('UA-XXXXXXXXX-X', { debug: process.env.NODE_ENV === 'development' });`","message":"Using the `debug: true` option in `ReactGA.initialize` will log analytics calls to the console, which is useful during development but should be avoided in production environments to prevent unnecessary console output and potential performance overhead.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Call `ReactGA.initialize` early in your application's lifecycle, typically within a `useEffect` hook in your root component or in your application's entry file, ensuring it runs only once.","message":"The `ReactGA.initialize` function must be called exactly once before any other tracking functions are invoked. Calling it multiple times or after other tracking calls can lead to inconsistent or lost data.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Provide a valid Universal Analytics tracking ID (e.g., 'UA-12345-1') to `ReactGA.initialize`. If you intend to use GA4, you must switch to a GA4-compatible library like `react-ga4` as `react-ga` does not support GA4 measurement IDs.","cause":"The `ReactGA.initialize` method was called without a Universal Analytics (UA-XXXXXX-X) tracking ID, or with an invalid format like a GA4 (G-XXXXXX) measurement ID.","error":"Error: `gaTrackingID` is required to initialize Google Analytics"},{"fix":"1. Verify `ReactGA.initialize` is called once with a correct `UA-` tracking ID. 2. Disable ad-blockers for testing. 3. Add `debug: true` to `initialize` options to see console logs. 4. If using GA4, migrate to `react-ga4`. 5. Set `siteSpeedSampleRate: 100` in `gaOptions` for more comprehensive data collection.","cause":"This usually indicates incorrect initialization, an invalid tracking ID, an active ad-blocker, or that you are using a GA4 `G-` measurement ID instead of a Universal Analytics `UA-` tracking ID. Additionally, the `siteSpeedSampleRate` default of 1% can make it seem like no data is being collected.","error":"No data appearing in Google Analytics Realtime/Standard Reports"}],"ecosystem":"npm"}