How to use DTM for Single Page Apps (SPA)?

[ParitMittal]

How to use DTM for Single Page Apps (SPA)?

[ParitMittal · Accepted solution]

Hello Everyone ,

For detailed information on using DTM for Single Page Applications (SPA) , Please see the following document : https://helpx.adobe.com/dtm/kb/How_to_use_DTM_for_Single_Page_Apps.html

Thanks & Regards

Parit Mittal

[mahmoud_Alshala]

Hi There

I've been using option # 2 in the document link above, and due to my limited coding skills, I've been trying to figure out how to prevent multiple logs from firing with no success, yet.

The details:

1. I have Data Element Rule to capture the hash value as page name

2. I have Push State or Hash change Event Rule. In Adobe Analytics section, I'm selecting "Increments Pageview", and i'm passing the data element page name, along with event1 to capture the URL hash change

3. I have load page rule that I'm also passing to capture the initial visits and also "refresh" browser activities

with this page load rule or without it, the hash change rule is still firing twice. The thing is that 1st log will tag the previous page name, and the 2nd log will tag the new page name. See attached images

I tried s.clearVars(); and s.abort = true; but none of them worked. Any advice would be appreciated!

[jantzen_b]

Do you have a URL where I can test this behavior?

[GaMeur1]

Hi,

I considered all this options, but in my opinion, there are not a good answer to what we want to do.

Here is why:

For a "classical" website, I would use "page load rules" triggered at "page bottom" (so when we fire the code "_satellite.pageBottom()". The big advantage that I see is that I can create many page load rules with different conditions to trigger them. When a page is loaded, DTM will determine which of those rules are triggered or not according to the triggering conditions. If multiple rules are triggered, all info will be sent into one (and only one) hit.

As far as I understand the 3 solutions you propose ("Direct call rules", "Push state or hash change" or "Custom Event Based rule"), it doesn't allow to have different rules with different triggering conditions firing one single page load hit.

Solution that I try to put in place: fire a Page Load Rule using _satellite.pageBottom(); on everything considered as a page view.

Problems:

1) as we are not running the header code, some prop variables and events can keep their value. We have to refresh it. So I actually fire a  direct call rule in which I use s.clearVars() and then fire the _satellite.pageBottom();...

2) Beware of not trigger many _satellite.pageBottom(); because, by default, even if you don't put the footer code, it seems that a _satellite.pageBottom(); will be implicitely triggered! So it forces you to check if the page is a "fresh new DOM" or not.

NB: I tried to use the "return false" option that's mentionned at the end of the article, but it prevents to use ANY page load rule, so that's not the spirit here.

To conclude, I would simply add that I find it very sad to have to find so many workarounds to track SPA sites.

SPA are becoming more common, so Adobe and DTM should adapt instead of proposing (bad) workarounds like those presented in the article.

[mahmoud_Alshala]

I talked to Adobe Support team and it was as easy as adding the website domain to Adobe Analytics tool in DTM

Steps: DTM > Your Website Web Property > Overview > go to Adobe Analytics Tool settings > Link Tracking > Add your site domain to "Never Track"

Thx

Mahmoud

[GaMeur1]

I'm sorry but I don't see what outbound links tracking would change here...