React Next Google Tools

A lightweight, easy-to-use library for integrating Google Analytics into both React and Next.js applications. No complex configurations—just plug it in, provide your Measurement ID, and start tracking page views!

✨ Features

Universal Support: Works seamlessly with Next.js and standard React projects.
Simple Integration: Initialize Google Analytics with a single component.
Zero Config Bloat: Just pass your Measurement ID. No extensive setup required.
TypeScript Ready: Comes with type definitions for a smooth developer experience.

🚀 Getting Started

Installation

npm install react-next-google-tools or yarn add react-next-google-tools

Usage with Next.js

To integrate with Next.js, simply add the component to your _app.tsx or _app.js file. Ensure you’re using the GoogleAnalytics component inside your main layout or _app file, so it initializes across all pages.

// pages/_app.tsx
import React from 'react';
import { GoogleAnalytics } from 'react-next-google-tools';

function MyApp({ Component, pageProps }) {
  return (
    <>
      {process.env.NODE_ENV === 'production' && (
        <GoogleAnalytics id="G-XXXXXXXXXX" isNextJs />
      )}
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

Note: Replace G-XXXXXXXXXX with your actual Google Analytics Measurement ID.

Usage with React

For React projects (e.g., CRA, Vite, or other build systems):

// src/App.tsx
import React from 'react';
import { GoogleAnalytics } from 'react-next-google-tools';

function App() {
  return (
    <div>
      <GoogleAnalytics id="G-XXXXXXXXXX" isNextJs={false} />
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;

🔧 Props

id (string, required):
Your Google Analytics Measurement ID (e.g., G-ABC123XYZ).
isNextJs (boolean, optional):
Defaults to true. If you’re using React without Next.js, set this to false.
This determines how the analytics script is injected. Next.js uses next/script, while pure React falls back to a standard <script> tag.

🏗 Contributing

We welcome contributions! Here’s how you can help:

Check issues:
See if your suggestion or bug report is already listed in Issues.
Open a new issue:
If it’s not there, create a new issue describing the feature or bug.
Fork & Create a PR:
- Fork the repository and create a new branch for your feature/bugfix.
- Commit your changes with clear, descriptive messages.
- Submit a pull request, referencing the issue if applicable.

Code of Conduct:
We follow the Contributor Covenant Code of Conduct. By participating, you help create a welcoming community for everyone.

🧪 Development Setup

Clone the Repository:

git clone https://github.com/yourusername/react-next-google-tools.git
cd react-next-google-tools

Install Dependencies:

npm install

Build the Package:

npm run build

Link Locally for Testing:

npm link

In your test project:

npm link react-next-google-tools

This allows you to test changes before publishing.

📜 License

This project is licensed under the MIT License. You’re free to use, modify, and distribute it, as long as you respect the license terms.

🌍 Community

Feel free to open an issue for questions, suggestions, or just to say hello. We’re building a community of developers who want simple and effective analytics integrations.

If you find this project helpful, please give it a ⭐ on GitHub—it means a lot to us!

Made with ❤️ by Varun Deva

varundeva/react-next-google-tools