Install on Angular, Svelte and other frameworks

Any framework can use the site tag and <div data-tgm-unit="…"> placements directly (see Install on any HTML site). The tag detects route changes and placements mounted later. The @terragamingmedia/ads package adds a typed, SSR-safe loader:

npm install @terragamingmedia/ads

import { loadTag } from "@terragamingmedia/ads";

// In the browser only, once (repeated calls return the same tag):
const tgm = await loadTag({ host: "tgmads.example.com" });
tgm?.on("render", ({ targetId }) => console.log("ad in", targetId));

loadTag returns null during server rendering. Render placements only in the browser, so hydration never sees the tag’s iframes.

Angular

app.component.ts

constructor() {
  afterNextRender(() => void loadTag({ host: "tgmads.example.com" }));
}

<div data-tgm-unit="TGM-ABC-HRS01" ngSkipHydration></div>

Svelte and SvelteKit

<script>
  import { onMount } from "svelte";
  import { loadTag } from "@terragamingmedia/ads";
  onMount(() => loadTag({ host: "tgmads.example.com" }));
</script>

{#if browser}
  <div data-tgm-unit="TGM-ABC-HRS01"></div>
{/if}

Astro

Put the site tag in your base layout’s <head> and the <div data-tgm-unit> placements in your pages. With view transitions, the tag starts a new page view on each navigation.