fix: record client navigations in apps without pages

src/runtime/plugin.ts

@@ -190,12 +190,18 @@ export default defineNuxtPlugin((nuxtApp) => {
 
   refreshHistory()
   nuxtApp.hook('app:mounted', async () => {
+    const landing = visitedRoute()
     if (options.trackOnRouteChange) {
-      router.afterEach((to, from, failure) => {
-        if (!failure && to.fullPath !== from.fullPath) void capture(to)
+      // Without pages, Nuxt updates the route object `from` refers to before afterEach runs,
+      // so `from` already matches `to`
+      let lastFullPath = landing.fullPath
+      router.afterEach((to, _from, failure) => {
+        if (failure || to.fullPath === lastFullPath) return
+        lastFullPath = to.fullPath
+        void capture(to)
       })
     }
-    await capture()
+    await capture(landing)
   })
 
   return {

test/fixtures/route-change-pages/app.vue

@@ -0,0 +1,3 @@
+<template>
+  <NuxtPage />
+</template>

test/fixtures/route-change-pages/nuxt.config.ts

@@ -0,0 +1,11 @@
+import UtmModule from '../../../src/module'
+
+export default defineNuxtConfig({
+  modules: [UtmModule],
+  routeRules: {
+    '/static': { prerender: true },
+  },
+  utm: {
+    trackOnRouteChange: true,
+  },
+})

test/fixtures/route-change-pages/package.json

@@ -0,0 +1,5 @@
+{
+  "private": true,
+  "name": "route-change-pages",
+  "type": "module"
+}

test/fixtures/route-change-pages/pages/next.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+defineOptions({ name: 'NextCampaignPage' })
+</script>
+
+<template>
+  <h1>Next campaign</h1>
+</template>

test/fixtures/route-change-pages/pages/static.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { useAsyncData } from '#imports'
+
+defineOptions({ name: 'StaticLandingPage' })
+
+const { data: heading } = await useAsyncData('heading', async () => 'Campaign landing')
+</script>
+
+<template>
+  <main>
+    <h1>{{ heading }}</h1>
+    <NuxtLink to="/next?utm_source=next">Next campaign</NuxtLink>
+  </main>
+</template>

test/fixtures/route-change-pages/plugins/tracked-routes.client.ts

@@ -0,0 +1,9 @@
+import { defineNuxtPlugin } from '#imports'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const trackedRoutes: string[] = []
+  Object.assign(window, { trackedRoutes })
+  nuxtApp.hook('utm:before-track', ({ route }) => {
+    trackedRoutes.push(route.fullPath)
+  })
+})

test/fixtures/route-change/app.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { navigateTo, useNuxtUTM } from '#imports'
+
+const utm = useNuxtUTM()
+const lastSource = ref<string>()
+
+async function openNewsletter() {
+  await navigateTo('/?utm_source=newsletter')
+  const { lastTouch } = await utm.getAttribution()
+  lastSource.value = lastTouch?.utmParams.utm_source ?? 'none'
+}
+</script>
+
+<template>
+  <button type="button" @click="openNewsletter">Newsletter</button>
+  <p v-if="lastSource">Last touch: {{ lastSource }}</p>
+</template>

test/fixtures/route-change/nuxt.config.ts

@@ -0,0 +1,8 @@
+import UtmModule from '../../../src/module'
+
+export default defineNuxtConfig({
+  modules: [UtmModule],
+  utm: {
+    trackOnRouteChange: true,
+  },
+})

test/fixtures/route-change/package.json

@@ -0,0 +1,5 @@
+{
+  "private": true,
+  "name": "route-change",
+  "type": "module"
+}

test/integration-route-change-pages.test.ts

@@ -0,0 +1,27 @@
+import { fileURLToPath } from 'node:url'
+import { describe, it, expect } from 'vitest'
+import { setup, createPage } from '@nuxt/test-utils'
+
+type TrackingWindow = { trackedRoutes: string[] }
+
+describe('Route change tracking with pages', async () => {
+  await setup({
+    rootDir: fileURLToPath(new URL('./fixtures/route-change-pages', import.meta.url)),
+    server: true,
+    browser: true,
+  })
+
+  it('tracks a prerendered landing once, then the route navigated to', async () => {
+    const page = await createPage('/static?utm_source=static')
+    await page.getByRole('link', { name: 'Next campaign' }).click()
+    await page.waitForFunction(() =>
+      (window as unknown as TrackingWindow).trackedRoutes.includes('/next?utm_source=next'),
+    )
+
+    expect(await page.evaluate(() => (window as unknown as TrackingWindow).trackedRoutes)).toEqual([
+      '/static?utm_source=static',
+      '/next?utm_source=next',
+    ])
+    await page.close()
+  })
+})

test/integration-route-change.test.ts

@@ -0,0 +1,36 @@
+import { fileURLToPath } from 'node:url'
+import { describe, it, expect } from 'vitest'
+import { setup, createPage } from '@nuxt/test-utils'
+
+describe('Route change tracking without pages', async () => {
+  await setup({
+    rootDir: fileURLToPath(new URL('./fixtures/route-change', import.meta.url)),
+    server: true,
+    browser: true,
+  })
+
+  it('captures a client-side navigation to new campaign parameters', async () => {
+    const page = await createPage('/?utm_source=landing')
+    await page.waitForFunction(() => window.localStorage.getItem('nuxt-utm-data'))
+    await page.getByRole('button', { name: 'Newsletter' }).click()
+    const lastTouch = page.getByText(/^Last touch:/)
+    await lastTouch.waitFor()
+
+    expect(new URL(page.url()).search).toBe('?utm_source=newsletter')
+    expect(await lastTouch.textContent()).toBe('Last touch: newsletter')
+    const history = await page.evaluate(() =>
+      JSON.parse(window.localStorage.getItem('nuxt-utm-data') ?? '[]').map(
+        (entry: {
+          utmParams: { utm_source?: string }
+          additionalInfo: { landingPageUrl: string }
+        }) => [entry.utmParams.utm_source, new URL(entry.additionalInfo.landingPageUrl).search],
+      ),
+    )
+    expect(history).toEqual([
+      ['newsletter', '?utm_source=newsletter'],
+      ['landing', '?utm_source=landing'],
+    ])
+
+    await page.close()
+  })
+})