Analytics tagging on animation screen

[harshu24]

Hi,

I have a scenario where there is an animation screen with 5 screens, can we track how many users saw and exited each screen as it is an animation screen?

[Jennifer_Dungan]

Can you explain more what you mean by an "animation screen with 5 screens"?

I am picturing something like a little mini SPA inside of a traditional website... something that shows some info with a little "next" button (or maybe it's based on a timer), and that screen "slides out" and the next "slides in", there is no URL change.... When the last screen is, the last next or timer trigger then takes the user to a new URL.

If this is the case, there are a few ways of handling it...

One, you can have your developers add some custom triggers for each loaded screen, or if you are using an event based data layer, push a data layer event for each screen (i.e. screen 1, screen 2, screen 1 [again], screen 2, screen 3, etc) - basically something that you can listen for and create tracking from.

If there is a little "progress indicator" at the bottom that allows people to skip screens, then this solution also works well since you will know that a user went from screen 1 to screen 5 (and skipped 2-4).

The other option is to create your own click triggers on the next/previous buttons, progress buttons... but this can be harder to determine what screen the user is on... sometimes you can determine this through the DOM (what is hidden and what is visible) but it's a lot more work and less reliable... but in a pinch, you might have to do this as a temp solution (or a full one if you can't get the devs to build you what you need)

In either scenario, you could choose to track this as a single Page View when the URL is loaded, and each screen as an action... or you could treat each screen as a page view (if all / most of the content that the user is seeing is changing... it's essentially a new page of content, the URL is just the same).... that's a decision that will have to be made by you and your stakeholders....

[igupta · Accepted solution]

In addition to above, sharing implementation ideas considering it's a on page element change with associated event listeners

1. Use enters viewport using custom text filters if necessary for condition to trigger events

2. Use mutation observers in JavaScript if it's one element within SPA

3. Use event listeners and pass event as custom Event to trigger rule via custom event

Best,

Isha

[Jagpreet_Singh_]

Hi @harshu24  Did you find the suggestions helpful? Let us know if you need any further information! If the solution works for you, please mark the answer as correct to help others. And if you’ve found your own solution, we’d love for you to share it with the community. Thank you!

[harshu24]

Hi @Jennifer_Dungan, I perfectly understood your context, this is something like our WhatsApp status, 

On App, it will something like this, so we can solution it by treating it as page View right and tracking exit button clicks?