Script Event Page

Background

When using tracking scripts, it's common to send an event when the page changes. Due to Nuxt's head implementation being async, the page title is not always available on route change immediately.

Nuxt Scripts provides the useScriptEventPage composable to solve this problem.

See the API docs for full details on the available options.

Usage

The composable works by providing a function that will be invoked whenever the page changes, providing the newly resolved title and path.

You can use this with any analytics provider where you're seeing the page title not being accurate on route change.

const { proxy } = useScriptGoogleAnalytics()

useScriptEventPage(({ title, path }) => {
  // triggered on route change
  proxy.gtag('event', 'page_view', {
    page_title: title,
    page_location: 'https://example.com',
    page_path: path
  })
})