Single-Page App (SPA) Support

The wrapper's MutationObserver detects new slot divs within 300ms of DOM insertion — SPA route changes, infinite scroll, and dynamic content are handled automatically, no config needed.

Single-page applications (SPAs) built with React, Vue, Angular, or similar frameworks change the page content dynamically without full browser reloads. The Advlume wrapper includes built-in SPA support that handles this automatically using a MutationObserver.

How SPA support works

After initial setup, the wrapper installs a MutationObserver on document.body that watches for new child elements being added anywhere in the DOM. When new data-advlume-slot elements appear (e.g. after a route change), the wrapper:

Detects the new slots within 300ms of them appearing in the DOM (debounced to avoid thrashing on rapid renders).
Filters out any slots that were already auctioned to prevent double-loading.
Runs a new Prebid auction for in-viewport slots immediately.
Sets up lazy-loading for out-of-viewport slots (200px root margin for SPA-discovered slots).
Defines new GPT slots and refreshes them after the auction.

No additional configuration is needed for this to work — SPA support is always active.

What you need to ensure

Render the script tag once. Add the Advlume <script> tag to your application's root HTML template (e.g. index.html in React/Vue) — not inside a component that gets remounted. Loading it multiple times will cause duplicate initialisation.
Render slot divs dynamically. Add data-advlume-slot divs in your route components or page components as normal. When the component mounts and the divs appear in the DOM, the wrapper's MutationObserver will pick them up.
Do not manually destroy slots. Do not call GPT's destroySlots() API or clear the DOM slot manually. Let the wrapper manage the GPT slot lifecycle.

Route change handling

On a route change, your framework typically removes the previous page's component from the DOM and renders the new one. The MutationObserver fires when the new slot divs appear. Old slot divs that were removed from the DOM are automatically cleaned up — the wrapper tracks registered slot IDs and skips any that no longer exist in the DOM when auctioning.

Infinite scroll and dynamically loaded content

If your site loads new articles or content blocks infinitely as the user scrolls, and those blocks contain ad slot divs, the MutationObserver will fire for each new block. The lazy-load observer (with its 200px margin) handles slots that are off-screen when inserted, so ads in newly loaded content will be auctioned as the user approaches them, not all at once.

Debugging SPA slot discovery

Open the browser console. When the SPA observer fires, you will see:

[advlume] SPA: discovered 2 new slot(s)
[advlume] Active bidders: adformOpenRTB, adkernel, ...
[advlume] GAM targeting for advlume-mid-article-0: ...