Skip to content

Single-page apps and client-side routing

The tag handles client-side navigation by itself (spa: "auto", the default).

  • history.pushState or back/forward to another path or query starts a new page view. The tag waits for the new route to render: once your page’s DOM has changed, until it has been quiet for 250 ms. If nothing changes within a second, it assumes the route rendered before the URL changed. It never waits more than 3 seconds.
  • history.replaceState (infinite scroll, UTM clean-up) and hash-only changes never start a page view, so ads on screen stay.
  • A new page view removes the previous page’s ads, finds your article again and decides every placement on the new page. The floating banner stays unless you set floating: "per-pageview".

A <div data-tgm-unit="…"> added after load (a component mounting, “load more”) is decided automatically in the current page view. When it is removed, its ad is removed too. Units that were not filled are tried again on the next page view.

If your router renders the new page more than about a second after the URL changes (slow loaders), or you want exact control, set manual mode and tell the tag when the new page is ready:

<script async src="https://tgmads.example.com/tag.js" data-tgm-spa="manual"></script>

(or spa: "manual" in window.tgmConfig, or the spa option of the packages), then:

// after each navigation has rendered:
window.tgm?.pageview();

Calling tgm.pageview() yourself also switches the tag to manual mode. A call right after the tag’s own page view for the same URL is merged into it, so you never count a page twice.

Call Does
tgm.pageview() Starts a new page view (manual mode).
tgm.refresh(["id"]) Decides the given placements again in this page view.
tgm.destroy() Removes every ad and stops the tag. Loading tag.js again starts a fresh one.
tgm.on(event, cb) render, unfilled, viewable, close, decide, pageview, remove. Returns an unsubscribe function.
tgm.status() Configuration, state and every slot, for checking an install.