Using DTM "Element Exists" Conditions Event in a SPA | Community
Skip to main content
haddnin
Level 2
August 16, 2019
Solved

Using DTM "Element Exists" Conditions Event in a SPA

  • August 16, 2019
  • 2 replies
  • 4882 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Vijaya_Vignesh1

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.

2 replies

Vijaya_Vignesh1
Vijaya_Vignesh1Accepted solution
Level 2
August 30, 2019

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
haddninAuthor
Level 2
September 5, 2019

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.