Does call tracking work on single-page apps?

What happens when the page changes?

Websites built with frameworks such as React, Next.js, Vue, Nuxt or Angular often change the address without loading a new page. The tracking script watches for that, including the back and forward buttons. Each time the address changes, it asks Call Tracking for the numbers for the new page and swaps them in.

The visitor keeps the same session as they move around, so their call is still linked to the ad or search that brought them to the site.

How do you install it on a single-page app?

The same way as on any other website: add the tag once, to the app's main HTML page or through Google Tag Manager with the All Pages trigger. Don't load it again on each route change, and don't add a History Change trigger in Google Tag Manager. The script already follows route changes itself. To learn how, see Install the tracking script.

What doesn't work?

After each page change, the script gets the numbers for the new page, then watches the page for 10 seconds and swaps numbers that appear in that time. A number that appears more than 10 seconds after the page change, such as after a slow data load or in a pop-up opened later, keeps the original number until the next page change.

The number also has to be written as one piece of text, or in a tel: link, as on any website. To learn more, see Where the number can be.

So render the phone number with the page, or keep it in a shared header or footer, and it's swapped every time.