Optimize Framework Integration

SPA frameworks route on the client, so ads need to be told to refresh on each navigation. The flow is the same everywhere — only the navigation hook differs.

// 1. Initialize the queue early (do this once, at app root).
window.optimize = window.optimize || { queue: [] }

// 2. On every route change:
window.optimize.queue.push(() => {
  window.optimize.pushAll()
})

Queued callbacks run as soon as the Optimize loader is ready, so step 2 is safe to call before the script has finished downloading. For Next.js, see the Next.js install guide.

React (React Router)

import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'

export function OptimizeRefresh() {
  const { pathname } = useLocation()
  useEffect(() => {
    window.optimize.queue.push(() => window.optimize.pushAll())
  }, [pathname])
  return null
}

Mount <OptimizeRefresh /> once in your root layout.

Vue 3 (Vue Router)

import { watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
watch(() => route.fullPath, () => {
  window.optimize.queue.push(() => window.optimize.pushAll())
})

Run from your root App.vue setup().

SvelteKit (Svelte 5)

<script>
  import { page } from '$app/state'
  import { browser } from '$app/environment'

  $effect(() => {
    page.url.pathname
    if (browser) window.optimize.queue.push(() => window.optimize.pushAll())
  })
</script>

On Svelte 4, swap $app/state for $app/stores and use $: $page.url.pathname, ... instead of $effect.

Angular

import { Router, NavigationEnd } from '@angular/router'
import { filter } from 'rxjs/operators'

constructor(private router: Router) {}

ngOnInit() {
  this.router.events
    .pipe(filter((e) => e instanceof NavigationEnd))
    .subscribe(() => {
      window.optimize.queue.push(() => window.optimize.pushAll())
    })
}

To refresh only a subset of placements, swap pushAll() for refresh(placementId).