Install on React, Next.js, TanStack Start and Remix

1. Install the package

npm install @terragamingmedia/ads-react

2. Load the tag in your root layout

<TgmScript> renders the site tag. It works in server-rendered and client-only apps. Route changes are detected automatically.

Next.js (App Router), app/layout.tsx:

import { TgmScript } from "@terragamingmedia/ads-react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <TgmScript host="tgmads.example.com" />
      </head>
      <body>{children}</body>
    </html>
  );
}

• Next.js (Pages Router): put <TgmScript … /> in the <Head> of pages/_document.tsx.
• TanStack Start / React Router v7 / Remix: put it in the root route’s <head>, next to <HeadContent /> or <Meta />.
• Vite / Create React App (no SSR): wrap your app in <TgmProvider host="tgmads.example.com">, which loads the tag on mount.

Before your CNAME is verified, also pass your ids:

<TgmScript
  host="cdn.terramedia-sandbox.com"
  property="PROP-…"
  publisher="PUB-…"
  inArticle="TGM-…-INART"
  articleSelector=".post-content"
/>

With a Content Security Policy, pass nonce={nonce}. In Next.js, read it from the request headers your middleware sets.

3. Place your ad units

import { TgmAd, TgmFloating } from "@terragamingmedia/ads-react";

<TgmAd unit="TGM-ABC-HRS01" />
<TgmFloating unit="TGM-ABC-GMA01" />

<TgmAd> reserves space on the server and mounts the ad container only in the browser, so hydration never sees the tag’s iframes. When it unmounts, the tag removes its ad. In-article ads are automatic. Use articleSelector (or a data-tgm-article attribute on your article element) to point the tag at your content.

Routing

Nothing to wire. The tag starts a new page view after each client-side navigation. If your loaders make the new page render more than about a second after the URL changes, switch to manual mode and call the hook from your router:

<TgmScript host="tgmads.example.com" spa="manual" />;

// in a component that re-renders on navigation:
import { useTgmPageview } from "@terragamingmedia/ads-react";
useTgmPageview(pathname);

Do not use next/script with strategy="worker" (Partytown): the tag needs the page’s DOM.