skills.rest
SilverAssist
SilverAssistOFFICIAL
Explore all skills by this author →
GitHub

gtm-optimization

Replace inline GTM/GA scripts with dynamic imports in Next.js apps.

1|Updated Jan 31, 2026
Search Tags:#performance#analytics#next.js#gtm#dynamic-import#third-parties
One-click install
npx skills add https://github.com/SilverAssist/performance-toolkit --skill gtm-optimization
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gtm-optimization
Source: https://github.com/SilverAssist/performance-toolkit/tree/main/src/templates/skills/gtm-optimization
Command: npx skills add https://github.com/SilverAssist/performance-toolkit --skill gtm-optimization

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps Next.js apps run GTM/GA analytics without blocking the initial render by replacing inline script patterns with a dynamic import approach via @next/third-parties. It reduces render-blocking JavaScript and improves Core Web Vitals while preserving analytics fidelity.

Core Features & Use Cases

  • Dynamic import pattern for GTM/GA using @next/third-parties to load analytics client-side after hydration.
  • Reduces render-blocking JavaScript and improves FCP, LCP, and TBT in production environments.
  • Use cases include migrating from inline <Script> tags to a reusable analytics wrapper in Next.js apps and applying the pattern to GA4 and GTM deployments.

Quick Start

  1. Install the required dependency: npm install @next/third-parties
  2. Create a small client wrapper component that dynamically loads GTM/GA after hydration
  3. Replace inline analytics Script usage in your root layout with the wrapper and set environment variables NEXT_PUBLIC_GTM_ID or NEXT_PUBLIC_GA_ID

Frequently Asked Questions about gtm-optimization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I stop Google Tag Manager from blocking rendering in a Next.js app?▼

To stop Google Tag Manager from blocking rendering in Next.js, replace inline script tags with a dynamic import pattern using @next/third-parties. This defers analytics loading until after hydration, reducing render-blocking JavaScript and improving Core Web Vitals.

What's the best way to load GA4 dynamically in Next.js to improve LCP?▼

The best way to load GA4 dynamically in Next.js is creating a client-side wrapper component using dynamic imports with `ssr: false` via @next/third-parties. This non-blocking approach loads analytics after hydration, improving FCP, LCP, and TBT.

How do I migrate from inline script tags to a dynamic import pattern for GTM?▼

Migrating from inline script tags to a dynamic import pattern for GTM involves installing @next/third-parties, creating a client wrapper that dynamically loads analytics, and replacing inline Script usage in your root layout with this wrapper.

Does this dynamic import approach for GTM work with Next.js environment variables?▼

Yes, the dynamic import approach for GTM works with Next.js environment variables by configuring `NEXT_PUBLIC_GTM_ID` or `NEXT_PUBLIC_GA_ID`. The wrapper component reads these variables to initialize analytics client-side after hydration.

Why does my Next.js analytics script hurt TBT and how do I fix it?▼

Your Next.js analytics script hurts TBT because inline scripts execute during the main thread's busy period. Fix it by replacing inline tags with a dynamic import wrapper using @next/third-parties to load GTM or GA after hydration, reducing render-blocking JavaScript.

Related Skills

Explore More Software Engineering Skills→
omerakbenomerakben
1

nextjs-app-router

Instrument Next.js App Router apps with PostHog analytics for client and server events.

Community
Advanced
bluebricks-nlbluebricks-nl

performance

Analyze web performance and optimize loading speed, runtime efficiency, and resource utilization.

Official
Advanced
vercelvercel
45

enable-analytics

Integrate Vercel Analytics, Speed Insights, and Google Tag Manager into Next.js storefronts.

Official
Intermediate
ihj04982ihj04982

dynamic-imports-for-heavy-components

Implement dynamic imports for heavy components using Next.js next/dynamic.

Community
Basic