Adobe Dynamic Tag Manager: Event-Based Rule Upon Unordered List

Question

If there are no Class or DIV designations for the items within this unordered list, how would you go about using the %this.innerHTML% notation to pull which link was clicked in an Event-Based rule?

< div class="relatedCategories rowBottomSpace" >

    < strong class="header black short">Related Categories</strong>

    <ul>
      <li>
    <a href="/link1" rel="link 1">LINK 1</a>
        <span>|</span>
    </li>

      <li>
    <a href="/link2" rel="link 2">LINK 2</a>
        <span>|</span>
    </li>

      <li><a href="/link3" rel="link 3">LINK 3</a>
    </li>

  </div>

Answer 1

Solution #1: Update your selector to be more specific

This is the solution I mentioned in my comment above. Assumption is that your Condition's Element Tag or Selector is something like div.relatedCategories. If you change it to specifically target links within it: div.relatedCategories a then this will reference the link that was clicked.

Solution #2: Use a custom condition and data element

Let's say for whatever reason(s) you want to keep the original higher level selector: div.relatedCategories.

Leave it as such, and then under Rule Conditions > Criteria
choose Data > Custom and then click "Add Criteria".

In the Custom code box, add the following:

var target = (event.target) ? event.target : event.srcElement;
_satellite.setVar('linkTarget',target);
return true;

This will create a data element called linkTarget which will hold an html element object reference to the clicked link. So then you can use %linkTarget.innerHTML% or alternatively, back up in the Custom code box you can set linkTarget to be target.innerHTML and then reference with %linkTarget%.