enters viewport condition in DTM

Hello, Yabagna, and welcome to the Marketing Cloud community.

Is it possible that you have more than one element in the page with the same ID? (e.g. a parent <div>)
If so, you'll need to remove the duplication (IDs need to be unique). You might have some luck with a more specific selector, e.g. p#ApplyFormError

Also, have you tried unchecking the "Apply event handler directly to element" option?
In most cases, it shouldn't be necessary to have this checked.

If that doesn't help, can you share a link to the page you are trying to implement this on?

If the page in question is not publicly accessible, or for some other reason you are unable to share, I'd recommend using a JavaScript debugger to determine if this event is firing; and if so, when.

Thanks for sharing a link to the page. It was helpful in determining what's going on.

The paragraph in question is hidden by default (because div#page has display:none set) - which, to a browser, means the element still exists and is still rendered (just not displaying). More to the point, hidden elements like this are rendered in the browser at the x/y coordinates of 0,0. Therefore, the reason the rule is firing is because 0,0 is always in the viewport when the page loads. Just one of those fun things about HTML/CSS/JavaScript and browsers. 

There are a few ways to achieve the desired behavior without changing much, but note that you'll need to make changes to your page's code (i.e. not just in DTM) to get there.

First, you should note that <p>s can't contain <div>s (invalid HTML), so at the very least, you need to change the <p> into a <div>. Here's a snippet of the invalid markup from your page:

        <p>If you’ve already registered, sign in using the box in the top right corner.</p> <p id="ApplyFormError" class="error"> <div class="validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none"></li> </ul></div> </p>

Instead of just changing the <p> to a <div>, I'd recommend changing to something like this:

<p>If you’ve already registered, sign in using the box in the top right corner.</p> <div id="error-container"></div>

And then change the invalidHandler function of $('#ApplyForm').validate (in your '/Scripts/desktop.js' file) to dynamically create the div#ApplyFormError (instead of inserting HTML and showing the element). e.g.:

$('#ApplyForm').validate({ debug: true, invalidHandler: function (form, validator) { $("#error-container").append("<div id='ApplyFormError' class='error'><p>Hey, you've left a field incomplete or incorrect. Give it another try.</p><div class='validation-summary-valid' data-valmsg-summary='true'><ul><li style='display:none'></li></ul></div></div>") },

(You could, of course, create the element in some other part of your various JavaScript files, but without being more familiar with your code, this seems a logical place to make the change.)
 

Once you do that, your 'enters viewport' rule should function as expected. (If you changed the condition to p#ApplyFormError as I suggested before, then you'll need to remove the p and save/approve the rule before it'll work with the above changes.)

Ok I understand that. The thing is that i can't do any changes on the code since an agency develop the site. I can't ask for any code change right now
Is there any other way I can get that rule to fire without having to change the js or the html code?
Thank you so much for taking some of your time to help me with this :)

We are trying to track when a user gets this error and count it as a page viewed.
I'm having the same issue trying to find out how to set a rule that differentiates pages that share the same url

for example to enter this site:  http://stage.mltapthefuture.com/ you have to add you age and submit it in order to see the homepage, however the homepage has the same url as the age gate page, which is http://stage.mltapthefuture.com/
How can i set a rule to track each of those pages separately?

As long as you are sending the title of the page (document.title), you should be able to differentiate the two.
When the age verification screen appears, the title is "Miller Lite Tap The Future - AV" and it changes to "Miller Lite Tap The Future - Home Page" after you've submitted a valid birthdate and the page shows the main content.

Assuming you're using Adobe Analytics, you could just update s.pageName with the new page title and then send a new image request (e.g. via s.tl).

Well that can be a good option! :)

Now how do i do to caputre that and translate it into a rule?
Should i create a event based rule with the condition "element exists" ? If so how can will the selector will be in this case?

Thank you for your time! you've really helpfull :D

It looks like the page markup is very similar on the home page as to what's on the Apply page, so you can use a similar rule to the one we discussed for the Apply page, and then add some JavaScript to the rule to update s.pageName to equal the new document.title (and send the page view for tracking).

That is, you would use the same Rule Condition (checking if the div#page is displaying) with an 'enters viewport' event. (You could use a different kind of event than 'enters viewport', but this type of event should work for your needs.) You could check for the #page div itself coming into view (by putting #page as the selector), or you could check for the navigation bar (by putting .container-top-nav-bar as the selector), or really anything else that exists inside of the div#page.
I don't know when the existing scripts on your site change the document.title to "Home Page", and you need to make sure your rule doesn't fire until after the document.title changes, so I'd recommend testing with this rule by setting the selector to different elements - try the two I suggested above first, but if neither works, then try a few more elements a little farther down on the page. The testing you do is just to ensure you get the timing right.

The last (and perhaps the most important) bit is to add the JavaScript to your rule as well - this is what will update the page title and then send the data for tracking. Again, you'll have to test this, but you could do something like:

s.pageName = document.title; s.t();

Just in case you need it, this is a helpful resource: https://microsite.omniture.com/t2/help/en_US/dtm/index.html#Troubleshooting

Unfortunately it did not work since the #AV and all of its elements are always in display block, However i noticed that all of the #AV content is removed when you go to the home page (i think it uses some kind of ajax to do it) and i tried to create an page load rule whit a script that evaluates if the #AV has any child, it work but the thing is that it only works when i update the page, and I need to work as soon as you see the home page. So i tried creating a event based rule with this conditions but seems that is not working. I'm missing something in the settings? Or is there a way to create a rule that fires without the need of updating the page and using this script condition ?