---
name: gtm-optimization
description: Optimize Google Tag Manager and Google Analytics loading using validated dynamic import pattern with @next/third-parties. Use when GTM/GA is identified as a performance bottleneck or when implementing analytics in Next.js.
---
# Google Tag Manager & Analytics Optimization
Expert guidance for implementing GTM/Google Analytics in Next.js applications using the validated dynamic import pattern with `@next/third-parties`.
## When to Use This Skill
- GTM/Google Analytics identified as performance bottleneck in analysis
- Implementing analytics in a new Next.js project
- Migrating from inline `
```
### Issues with This Approach
1. **Inline script in JSX** - Initialization code embedded as string, harder to maintain
2. **No tree-shaking** - Doesn't leverage Next.js optimized package imports
3. **Duplicate code** - Each project reinvents the wheel instead of using official components
4. **Less optimal loading** - `lazyOnload` fires after `load` event, but `@next/third-parties` uses `afterInteractive` which is better balanced
5. **Missing official features** - `@next/third-parties/google` includes additional optimizations from Vercel
6. **No type safety** - String-based configuration prone to typos
## The Solution: Validated Dynamic Import Pattern
This pattern has been validated across multiple production projects and provides the best balance of performance and data accuracy.
### Step 1: Create Reusable Wrapper Component
```tsx
// src/components/third-party/google-tag-manager/index.tsx
"use client";
import dynamic from "next/dynamic";
/**
* Client-side wrapper for GoogleTagManager.
* Loaded dynamically after hydration to improve initial page load performance.
*
* Analytics/tracking scripts are non-critical and don't need to block the initial render.
* This implementation balances performance with data accuracy by loading after hydration
* (afterInteractive strategy internally).
*
* **Performance Impact:**
* - Reduces initial HTML size (no inline GTM script in server response)
* - Component NOT included in server-rendered HTML
* - Loads during/after React hydration begins on the client
* - Prevents render-blocking JavaScript
*
* **Why Dynamic Import with ssr: false?**
* - `dynamic()` with `ssr: false` ensures client-only loading
* - Component loads after React hydration (afterInteractive internally)
* - Better than `lazyOnload` which waits for full page load event
* - Leverages Next.js compiler optimizations and tree-shaking
*
* **Google's Recommendation vs Performance:**
* Google recommends loading GTM "as high as possible in " to capture all events
* from the start of the session. However, this creates render-blocking JavaScript.
*
* This pattern intentionally trades early event capture for improved performance by
* loading GTM in the body after hydration. This is a deliberate design choice where:
* - Traditional implementation: GTM in blocks initial render
* - This implementation: GTM loads dynamically after hydration completes
* - Trade-off: May miss some very early events (before hydration) in exchange for
* significantly improved FCP, LCP, and TBT metrics
* - In practice: Most user interactions happen after hydration, so minimal data loss
*
* Benefits of this approach:
* - No render blocking during initial paint
* - Loads after hydration, captures user interactions
* - Uses official Vercel-maintained component
* - Includes optimizations not available with manual Script tags
*
* @see {@link https://support.google.com/tagmanager/answer/14847097 | Google Tag Manager Best Practices}
* @see {@link https://vercel.com/blog/how-we-optimized-package-imports-in-next-js | Vercel: Package Import Optimization}
* @see {@link https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading | Next.js Dynamic Imports}
*
* @param {Object} props - Component properties
* @param {string} props.gtmId - Google Tag Manager ID (e.g., "GTM-XXXXXX")
* @returns {JSX.Element} Dynamically loaded GTM component
*
* @example
* ```tsx
* // In app/layout.tsx
* import GoogleTagManager from "@/components/third-party/google-tag-manager";
*
* export default function RootLayout({ children }) {
* return (
*
*
* {children}
*
*
*
* );
* }
* ```
*/
const GTM = dynamic(
() =>
import("@next/third-parties/google").then((mod) => mod.GoogleTagManager),
{ ssr: false },
);
export default function GoogleTagManager({ gtmId }: { gtmId: string }) {
return ;
}
```
### Step 2: Use in Root Layout
```tsx
// src/app/layout.tsx
import type { ReactNode } from "react";
import GoogleTagManager from "@/components/third-party/google-tag-manager";
const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID || "GTM-XXXXXX";
export default function RootLayout({
children
}: {
children: ReactNode
}) {
return (
{children}
);
}
```
### Step 3: Environment Variables
```bash
# .env.local
NEXT_PUBLIC_GTM_ID=GTM-XXXXXX
# Or for Google Analytics
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
```
## Pattern Comparison
| Aspect | Script with lazyOnload | Dynamic Import with @next/third-parties |
|--------|------------------------|----------------------------------------|
| **Bundle optimization** | Manual script injection | Leverages Next.js optimized imports |
| **SSR behavior** | Scripts rendered server-side | `ssr: false` ensures client-only |
| **Loading strategy** | `lazyOnload` (after load event) | `afterInteractive` (after hydration) |
| **Maintainability** | Inline strings in JSX | Clean component abstraction |
| **Type safety** | None (string-based) | Full TypeScript support |
| **Official support** | DIY implementation | Uses `@next/third-parties` (Vercel maintained) |
| **Tree-shaking** | No optimization | Full Next.js compiler optimization |
| **Reusability** | Copy-paste per project | Single component, easy to share |
| **Testability** | Difficult (inline strings) | Easy to mock and test |
## Performance Benefits
> **Note**: These metrics are representative measurements from production implementations.
> Actual values will vary based on GTM configuration complexity, number of tags, network
> conditions, device capabilities, and overall page weight.
### Before: Script with lazyOnload
```
HTML Size: ~45KB (includes inline script)
Parse Time: ~126ms (GTM evaluation)
TBT Impact: ~126ms blocking time
Bundle Size: No reduction
```
### After: Dynamic Import Pattern
```
HTML Size: ~40KB (no inline script)
Parse Time: ~80ms (optimized load)
TBT Impact: ~50ms (after hydration)
Bundle Size: Similar (GTM payload loads from Google's CDN, not bundled)
```
**Typical Improvements** (compared to inline Script with lazyOnload strategy):
- **TBT reduction**: 40-60% (depends on GTM tag complexity and existing page weight)
- **FCP improvement**: 15-25% (varies by network conditions and device)
- **Cleaner code**: Better maintainability (consistently achieved)
> These percentages represent the improvement when migrating from the suboptimal
> Script approach (inline strings with lazyOnload) to the dynamic import pattern
> with @next/third-parties. Your actual results may be higher or lower.
>
> Note: Bundle size improvements are minimal since GTM loads from Google's CDN.
> The main benefits are TBT/FCP improvements and code maintainability.
**Factors Affecting Results:**
- Complexity of GTM container (number of tags, triggers, variables)
- Existing third-party scripts on the page
- Overall page weight and JavaScript bundle size
- Network conditions and CDN performance
- Device capabilities (mobile vs desktop, CPU speed)
## Alternative: Google Analytics Only
If using GA (not GTM), use the same pattern:
```tsx
// src/components/third-party/google-analytics/index.tsx
"use client";
import dynamic from "next/dynamic";
/**
* Client-side wrapper for Google Analytics.
* Loaded dynamically after hydration to improve initial page load performance.
*
* @param {Object} props - Component properties
* @param {string} props.gaId - Google Analytics Measurement ID (e.g., "G-XXXXXXXXXX")
* @returns {JSX.Element} Dynamically loaded GA component
*
* @see {@link https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries#google-analytics}
*/
const GA = dynamic(
() =>
import("@next/third-parties/google").then((mod) => mod.GoogleAnalytics),
{ ssr: false },
);
export default function GoogleAnalytics({ gaId }: { gaId: string }) {
return ;
}
```
## Migration from Script Components
### Step 1: Identify Current Implementation
```bash
# Find Script components with Google Analytics/GTM
grep -rn "googletagmanager.com\|gtag" --include="*.tsx" --include="*.ts" src/
```
### Step 2: Remove Old Implementation
```tsx
// Remove these lines from layout.tsx
-
-
```
### Step 3: Install Dependencies (if not already installed)
```bash
npm install @next/third-parties
# or
yarn add @next/third-parties
```
### Step 4: Create Wrapper Component
Copy the wrapper component from Step 1 above to your project.
### Step 5: Update Layout
Replace Script components with the new wrapper component (Step 2 above).
### Step 6: Verify
```bash
# Build and check bundle size
npm run build
# Check for successful reduction in:
# - Page load time
# - Bundle size
# - Total Blocking Time (TBT)
```
## Verification Checklist
- [ ] Removed inline `