Using DTM "Element Exists" Conditions Event in a SPA

[haddnin]

Hello,

Has anyone been able to use "enters viewport" or "element exists" Event Type in DTM with a Single Page Application? I would like to track when an error occurs. When an error occurs, an error element is added to the view with an element ID. I would like to track when that element (ID) is added to the DOM in order to track how many errors occur in a user session. In my implementation, when the error element shows on screen, nothing happens in Adobe Analytics debugger. Has anyone been able to successfully accomplish this? I can't find anything on this subject.

Using a dataLayer is out of the question because we don't have access to the code base.

[Vijaya_Vignesh1 · Accepted solution]

Hi Haddnin,

I am not sure of the element exists condition, but I used a different way to accomplish similar request.

Store the error message value in a data element. the error message will be available either in innerHTML or innertext or value.

Now use this data element in the Event based rule using 'data element changed' condition and now the rule will get triggered whenever the text appears or changes.

you can even pass the error message to a prop to understand what message was displayed to the user.

Let me know if this works for you.

[haddnin]

Vijaya,

Thank you for responding, but this did not work on my implementation. When an error occurs, a new error view is rendered which contains the element with the ID. Because the element is not in the DOM initially, there is no 'data element change'. The element is introduced into the DOM via the new view, which is why I thought that 'enters viewport' or 'element exists' events should work.