How do you validate and troubleshoot your Tags on Single Page Applications or CWA pages?

[Anasooya]

We have many urls which are single page applications or CWA journeys. For example: if there is a product journey for credit cards, only after filling up all the necessary steps and form details can we navigate to the application approval or application confirmation page. 

My question is how can we validate and troubleshoot whether doubleclick tags are working fine on these types of journeys without really filling up the form and hit submit. The problem here is that unless we navigate to the exact joruney URL we are unable to check the tag config or test the tag firing through Tealium Webcompanion or Chrome Developer tools. Is there any other way to check this?

Also we don't have a stagging environment. 

[UnknownJ]

Hi @Anasooya,

Typically in a single page application that's expected to fire multiple tags, those tags will have either load rules or dynamic lookup values scoped to data layer variables as opposed to being URL based as per traditional site tags.

The easiest way to test specific points in the journey without navigating to them would be to simulate the contents of the data layer expected at that point. So for example, if you had a credit card journey and you wanted to check that your tagging configuration for the "customer declined" page is correct, you could open the JS console and run the following:

utag.view({
  JourneyName: "applyccc",
  JourneyStep: 4,
  JourneyAction: "Credit Decline",
  ApplicationState: "Declined"
});

Or equivalent. You would then be able to validate that the tags you'd expect to see fire on the decline page are indeed firing.

The trick of course is to ensure that you have the precise spec for what data should be present in the datalayer on the decline page, but arguably if you don't have that then you wouldn't have been in a position to set up the tags in the first place - one assumes that if you're testing that you've configured everything correctly, then your starting point was having a spec to build load rules / lookups from.

In terms of validating that the contents of the datalayer matches what's in the spec for a given page in a journey, arguably that falls to the developers and the team that define the data requirements - nobody should be asking you to add tags to a page until it's been validated that it's generating the right data.

Hope that helps.

[Anasooya]

Thanks for your suggestions @UnknownJ

I am fairly new to tealium and tag management so not sure where to open the JS console to run the program. Is it the console option in the  Chrome browser when we select Inspect button? Any chance you can provide screenshots of the steps you have suggested. I am not sure where to run the program and how to validate that the expected tags are indeed firing.

[BenStephenson]

Hi @Anasooya

There's some top tips for debugging using the browser dev tools here: https://www.120feet.com/blog/

End of shameless plug :)

[vinayreddy · Accepted solution]

Hi @Anasooya, Why don't you check the data in the dashboard to see if the information is getting sent to the vendor(Double click) or not.

To validate the multiple tagging issues, I assume you have some kind of analytics tracking on those pages(example: Google analytics, Adobe analytics) if you know what are the expected values on the confirmation page you can simply compare the starts vs completes. If your completes are higher than starts then you are double tagging if it is under then you are good.