Single-page applications¶

Websites built with React, Next.js, Vue, Nuxt, Angular or similar frameworks change the URL without loading a new page. The tracking script handles this without extra configuration, with limits described on this page.

What the script does¶

When the URL changes without a page load, including the back and forward buttons, the script runs again: it tells Call Tracking about the new page, receives the numbers for the pool rules that apply to that path, and swaps them into the page.
The visitor's session continues across navigations. The landing page, referrer, UTM parameters and click IDs are those of the first page in the session.
After each run, the script keeps watching the page for a short time and swaps numbers that appear while it does.

Limits¶

Numbers added late aren't swapped. If your app renders the phone number well after a navigation, for example after a slow data fetch or when a modal opens later, the visitor sees the original number until the next navigation. Render the number with the page, or keep it in a shared header or footer.
Numbers rendered as separate elements aren't matched. Keep the whole number in one text node and in a tel: link. See Where the number can be.
Server-side rendering. The script runs in the browser only. Server-rendered pages work the same way as any other page.

Install¶

Install the script once in the app's HTML shell, in <head>, or through Google Tag Manager with the All Pages trigger. Don't add a History Change trigger in Tag Manager and don't load the script again on route changes; the script already listens for them.

Verify¶

Navigate between routes and confirm the number stays swapped on each. Then follow Verify the installation.