GTM Advance Tracking

GTM Advance Tracking is a lightweight analytics helper that seamlessly connects your Google Tag Manager (GTM) container with Google Analytics 4 (GA4) inside Next.js or React applications.
It automatically detects and sends key user interactions — such as page views, scroll depth milestones, and custom events — straight to your GTM data layer, which can then be forwarded to GA4 or any other tracking service you configure.

By using this library, you eliminate repetitive tracking code across pages and components, maintain a consistent analytics structure, and gain advanced insights into how users engage with your app — all without writing custom event handlers for each action.

🚀 Installation

Install using npm or yarn:

npm install gtm-advance-tracking
# or
yarn add gtm-advance-tracking

🧠 Features

• ✅ Auto page tracking via Next.js App Router
• ✅ Scroll depth tracking (50% & 90%)
• ✅ Manual event tracking with trackEvent()
• ✅ Works with Google Tag Manager + GA4
• ✅ Written in TypeScript
• ✅ Lightweight (~2 KB gzipped)

⚙️ Setup in Next.js

1. Initialize GTM inside your layout.tsx or _app.tsx.

2. Track custom events anywhere in your code with trackEvent("EventName", { key: value }).

📊 Example Events

| Event Name | Description | Auto / Manual | |-------------|-------------|----------------| | page_view | Triggered on every route change | Auto | | scroll_50_percent | Triggered when user scrolls 50% down the page | Auto | | scroll_90_percent | Triggered when user scrolls 90% down the page | Auto | | AddToCart | Example of manual custom event | Manual |

🔧 Integration Notes

• Requires NEXT_PUBLIC_GTM_ID environment variable.
• Pushes events to window.dataLayer for GTM to forward to GA4 or other tags.
• Fully compatible with Next.js App Router and Server Components.

📚 Documentation

Full guide: sarmadgardezi.com/gtm-advance-tracking

GitHub Repo: Advance-Google-Tracking-npm

🪪 License

MIT © Sarmad Gardezi