Site Tag: Support for Single Page Applications (SPAs)

In SPAs, content updates happen without full-page reloads, which can disrupt standard embed behavior. The Site Tag handles this through its siteNavigate event—a way to signal each “virtual” page change so the correct Dot.vu Experiences load.

Introducing siteNavigate Event

Whenever your SPA transitions to a new view or route, simply call:

window.dotVu({
  eventType: 'siteNavigate',
  accountId: 'YOUR_DOTVU_ACCOUNT_ID'
});

This tells the Site Tag to:

1. Unload all currently embedded Experiences
2. Embed any Experiences configured for the new URL

Key Use Cases

• Client-side routing frameworks
  If you use React Router, Vue Router, Angular’s router, or similar, trigger siteNavigate after each successful route change.
• Tabbed interfaces or modals
  When content panels swap without changing the URL—if you map each tab or modal to a specific Experience, fire siteNavigate with a custom window.location.href override.

Preconditions for Correct SPA Behavior

URL already changed
Your SPA must update the browser address bar before calling siteNavigate. The Site Tag reads window.location.href to decide which Experiences to load.

history.pushState({}, '', '/my-new-page');
window.dotVu({ eventType: 'siteNavigate', accountId: 'YOUR_ID' });

Embed container present in the DOM
The target element for inline embeds (for example <div id="dotvu-inline"></div>) must already be rendered when you fire siteNavigate.