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:
Time Spent is always captured between two 'hits'. So if a user's session only triggers a single hit, then Time Spent is not able to be captured (and that visit is excluded from the Avg Time Spent calculation)
Bounces are counted as sessions that only have a single hit. So in an SPA scenario, this means the user only fires one tag during the entire Visit. Again, this would be excluded from Time Spent.
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:
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 etc