jc2391
jc2391

Reputation: 15

ADOBE DTM - Creating an Event based Rule based on Active CSS

I am trying to create an event-based rule on Adobe DTM so that an event is recorded anytime a menu li class changes from "item" to "item-active". The report should return the data-reference or data-index value of the item-active li.

<div class="menu">
<ul class="list">

<li class="item" data-reference="#chapter1" data-index="1">
<div class="number"><a href="#chapter1">1</a></div></li>

<li class="item-active" data-reference="#chapter2" data-index="2">
<div class="number"><a href="#chapter2">2</a></div></li>

<li class="item" data-reference="#chapter3" data-index="3">
<div class="number"><a href="#chapter3">3</a></div></li>

</ul>

The menu is for a long-form article and the class changes to item-active when a user scrolls down to the specified chapter. How would I go about creating an event-based rule based on the above information?

Thanks

Upvotes: 0

Views: 536

Answers (2)

Mark Stringham
Mark Stringham

Reputation: 421

Adobe recently added a condition to event-based rules called "data element changed"

This condition will continuously "listen" for changes to a specified data element value and send analytics any time a value change is detected.

While most often discussed in connection with the AEM Context Tool, you should be able to leverage this "listener" if you can update a data element any time the class value changes (link click, URL hashtag, etc.).

Upvotes: 2

Till B&#252;ttner
Till B&#252;ttner

Reputation: 46

you could use the the event type "pushState or haschange" to check if the hash in the URL has changed, because you work with jump marks.

Or you can use the event type "enters viewtype" if your chapters have different id in the headline/div-tags.

Kind regards Till

Upvotes: 0

Related Questions