I am trying to track the bounce rates and time on each screen for a single page application. I wanted to know for each dynamically driven screen of the SPA how to accurately add bounce rates and time on screen for each screen so that I know what areas of the SPA get the most / least attention.
Question: How would I trigger a new bonce rate / time on screen for each screen of the SPA?
Great question - we've been getting more and more SPA-focused questions all the time.
A few items to alert you to:
OK, now that we have that out of the way 🙂
There are plenty of different SPA methodologies for tracking, but this is my preferred way: Each "screen" is considered a page, and therefore fires an s.t() pageview tag. It's important to have a consistent and scalable pagenaming structure. For example:
spa: product 1
spa: product 1: detail
spa: product 2
spa: product 2: detail
The fun part is, deciding when to actually fire each of these s.t() pageview tags. My preference is to fire them whenever the "screens" are viewed. This can often be done via landing, deep-linking, menu-clicking, or scrolling. If a page is viewed, fire the s.t(). The scrolling scenario is often the toughest, but DTM makes things easier.
The advantage of doing things this way is you'll get everything you need:
bounce rate per page
time spent per page
exit rate per page
pageviews per page
Hope that helps!
Perfect!! thank you for the detailed answer as it's now clear exactly what I need to do.
Thanks again for all your help,