DEV Community: amrgharz

Why Your GA4 UTM Attribution Breaks on Next.js SPAs (And How to Fix It)

amrgharz — Mon, 21 Sep 2026 18:04:00 +0000

If you run paid campaigns or email newsletters driving traffic to a modern Next.js single-page application (SPA), your conversion data in Google Analytics 4 might be silently misattributing traffic to (direct) / (none).

A user clicks an ad with complete campaign parameters (utm_source=meta&utm_medium=paid_social&utm_campaign=launch_q3), lands on your site, browses a few pages via client-side routing, and suddenly their purchase event is credited to a direct visit.

Here is why client-side routing causes UTM data drops in GA4, and how to preserve campaign attribution reliably in Next.js.

1. The Single-Page Routing Trap

In traditional multi-page websites, every navigation triggers a full browser reload (window.location), refreshing URL state across page boundaries.

Modern frameworks like Next.js utilize client-side navigation (next/link or useRouter) using the HTML5 History API:

A visitor arrives at /landing-page?utm_source=newsletter&utm_medium=email.
GA4's config snippet reads the query parameters from the initial document load and logs session attribution.
The user clicks an internal link (<Link href="/pricing">).
Next.js pushes the route without reloading the browser.
The URL updates to /pricing, stripping the query string from window.location.search.
Subsequent virtual page_view events fire with a clean path devoid of campaign parameters.

If your tracking setup re-instantiates or reads the location object directly on sub-route transitions, your session continuity risks attribution degradation or event fragmentation.

2. Three Common Mistakes in Next.js SPA Tracking

Stripping query params too early: Developers often clean up URLs for aesthetics using router.replace(pathname) before tracking scripts initialize or server-side logs capture parameter payloads.
Malformed parameter formats: Relying on unencoded parameters or trailing slashes placed after the query string (?utm_source=twitter/) invalidates GA4 auto-parsing.
Ignoring manual session persistence: Failing to store initial acquisition parameters into sessionStorage or cookies for multi-step signup flows that traverse subdomains or isolated client components.

3. Preserving Campaign UTMs in Next.js App Router

Use a client component mounted in your root layout to catch and persist first-touch attribution parameters in sessionStorage on initial arrival:

// components/AttributionTracker.tsx
'use client';

import { useEffect } from 'react';
import { useSearchParams } from 'next/navigation';

const TRACKED_PARAMS = [
  'utm_source',
  'utm_medium',
  'utm_campaign',
  'utm_term',
  'utm_content',
];

export function AttributionTracker() {
  const searchParams = useSearchParams();

  useEffect(() => {
    // Only capture on initial entry if parameters exist
    const utmData: Record<string, string> = {};
    let hasUtm = false;

    TRACKED_PARAMS.forEach((param) => {
      const value = searchParams.get(param);
      if (value) {
        utmData[param] = value;
        hasUtm = true;
      }
    });

    if (hasUtm) {
      sessionStorage.setItem('first_touch_utm', JSON.stringify(utmData));
    }
  }, [searchParams]);

  return null;
}

Mount <AttributionTracker /> inside a <Suspense> wrapper in app/layout.tsx. If a user completes an unrouted checkout or external conversion, you can pull attribution directly from sessionStorage.getItem('first_touch_utm') to accompany server-side events.

4. Constructing Sanitized Tracking URLs

Parameter capitalization and unescaped spaces trigger fragmented rows in GA4 reports (Email vs email will register as two distinct channels).

Before deploying links across marketing channels:

Campaign UTM Builder: Generate standard-compliant, lowercase, and sanitized campaign links with the free Campaign UTM Builder.
Programmatic Sanitization: If generating marketing tracking links inside server-side pipelines or automated scripts, install omniseo-core on npm and call buildUtmUrl().

Why Your Open Graph Image Crops on LinkedIn & Discord (And How to Fix It in Next.js)

amrgharz — Mon, 21 Sep 2026 17:09:30 +0000

Few things undermine a new feature release like sharing a link on LinkedIn or Discord only to find the title cropped in half or the brand logo chopped off at the bottom.

If you designed your Open Graph asset at 1200x630 and assumed every platform renders it identically, you have likely hit the aspect ratio trap.

Here is why it happens and how to structure your Open Graph assets and dynamic Next.js App Router metadata to look sharp across every platform.

1. The Aspect Ratio Trap: 1.91:1 vs 1:1 vs 16:9

While the standard Facebook Open Graph recommendation is 1200x630 px (1.91:1), platforms interpret cards differently:

LinkedIn Feed: Scales 1200x627 or 1200x630 cleanly on desktop, but dynamically center-crops on mobile viewports.
Discord: If your image is under 300px or has dimensions Discord flags as a thumbnail, it forces a tiny 1:1 square crop to the right of your text instead of a full-width card. Full embeds crop to 16:9.
X / Twitter (summary_large_image): Displays at 2:1 or ~16:9, frequently chopping off 15–20 pixels from the top and bottom margins compared to a 1.91:1 canvas.

The Universal Fix: The 40px Safe Zone

Always design your base image at 1200 x 630 px, but enforce an internal safe zone:

Canvas: 1200px x 630px
Safe Area: 1080px x 520px (Center aligned)
Margin: Keep all essential text, logos, and focal points at least 60px from the edges and 40px from top/bottom.

2. Dynamic Next.js App Router Setup

If you use Next.js 14/15 App Router, configure your metadata object with explicit width, height, and card format tags:

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next';

type Props = {
  params: Promise<{ slug: string }>;
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug);

  const ogUrl = `https://omniseotools.com/api/og?title=${encodeURIComponent(post.title)}`;

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      url: `https://omniseotools.com/blog/${slug}`,
      siteName: 'OmniSEO Tools',
      images: [
        {
          url: ogUrl,
          width: 1200,
          height: 630,
          alt: post.title,
        },
      ],
      type: 'article',
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [ogUrl],
    },
  };
}

Important: Specifying width: 1200 and height: 630 inside the openGraph.images array helps platforms like LinkedIn and Facebook compute aspect ratios immediately without having to pre-fetch the full binary asset before determining the layout.

3. Verify Before Deploying

Instead of deploying to production and spamming post preview links to clear caches, test your Open Graph tags and crops locally:

Free Web Simulator: Test live previews for Twitter, LinkedIn, and Discord in real time using the free Social Meta & OpenGraph Card Simulator (https://omniseotools.com/tools/open-graph-meta-generator).
NPM Package: If you need programmatic validation or tag generation directly in your build pipelines, check out omniseo-core on npm (https://www.npmjs.com/package/omniseo-core).

How I Built a Zero-Latency Open Graph & SERP Previewer with Next.js

amrgharz — Sat, 05 Sep 2026 05:35:39 +0000

Most social preview debuggers and meta tag testers today are bloated, slow, or locked behind ad walls and paywalls.

I wanted a clean, browser-native suite of tools that runs 100% client-side with 0ms server latency, so I built OmniSEOtools.

Why Client-Side Matters

Instead of scraping URLs on a remote server, testing your tags and title dimensions directly in the browser gives instant feedback.

Here is what is currently live and open:

Twitter / X Card Previewer — Test 1.91:1 social card crops and text truncation.
Google SERP Pixel Ruler — Real-time 600px desktop and mobile snippet simulator.
LinkedIn Post Inspector — Accurate preview of feed post cutoffs.

The project is built using Next.js (App Router), Tailwind CSS, and is open-sourced on GitHub.

Would love feedback from other developers on what other SEO or meta utilities you'd find useful to have client-side!