React GAProvider for SPAs with Helmet

GAProvider is a reusable React component that integrates Google Analytics 4 with React SPAs using React Router and React Helmet. It automatically tracks:

• Route changes
• Page title changes (<Helmet>)
• Meta description and other SEO meta tag changes
• Canonical link changes
• Optional additional meta tags

Perfect for SPAs where the document head updates dynamically and you want accurate GA pageviews.

---

📦 Installation

# Using npm
npm install react-ga-spa-helmet

# Using yarn
yarn add react-ga-spa-helmet

---

⚙️ Usage

Wrap your app with GAProvider in main.tsx:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { HelmetProvider } from 'react-helmet-async';
import App from './App';
import { GAProvider } from 'react-ga-spa-helmet';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <HelmetProvider>
      <BrowserRouter>
        <GAProvider
          measurementId="YOUR_GA_MEASUREMENT_ID"
          trackMetaTags={['description', 'keywords', 'author', 'robots']}
        >
          <App />
        </GAProvider>
      </BrowserRouter>
    </HelmetProvider>
  </StrictMode>
);

---

📝 Props

Prop	Type	Required	Description
measurementId	string	✅	Your GA4 measurement ID (e.g., G-XXXXXXXXXX)
children	ReactNode	✅	Your app component tree
trackMetaTags	string[]	❌	Array of meta tag names to track (default: ['description','keywords','author','robots'])

---

🔹 Features

1. Automatic GA initialization – only once globally.
2. Route tracking – integrates with React Router.
3. Dynamic title tracking – works with React Helmet.
4. Meta tag tracking – description, keywords, author, robots, etc.
5. Canonical link tracking – automatically detects changes.
6. Future-proof – easily extend trackMetaTags to monitor additional SEO tags.
7. SPA friendly – handles changes without route reloads.

---

⚡ Example with additional meta tags

<GAProvider
  measurementId="G-XXXXXXXXXX"
  trackMetaTags={['description', 'keywords', 'author', 'robots', 'og:title', 'og:description']}
>
  <App />
</GAProvider>

---

📝 License

MIT License – free to use and modify.