There are a couple of ways of doing this. I would first try, a link trigger or a click trigger.

The rule would be:

Click Element – matches CSS selector – .dropdown-menu .ddc-span4 a

if you want it to fire on the header2 only

#template-header-2 .dropdown-menu .ddc-span4 a

To check the header:

I would create a separate CJS variable using JQuery code that returns the header. Which can then be added to the event label/Category/Action or checked when firing the trigger.

The JQuery would be something like:

function() {
  return jQuery({{Click Element}}).closest(".ddc-span4").children("h4").text();
}

I’m trying to add triggers to a website I can’t edit the HTML or CSS on.

I need it to fire on the links under the SERVICE & PARTS drop-down-menu.

Part 1. trying to get all web links under the word “Service” to fire without having to make a trigger for each one.

Part 2. Trying to get all web links under the word “Parts” to fire without having to make a trigger for each one.

Part 3. I’m trying to set this up so when new web links are added to these drop-downs it will always trigger.

I have attempted to try and trigger them with conditions of “matches CSS selector” but, both of the CSS <ul drop-downs are the same. The only unique way I see to separate them is by having the trigger use the <li class="ddc-span4" and only fire if the <h4 tag has the word “Service” or “Parts” to separate these links from each other.

<h4 rold="heading aria-level"3">Service</h4>
<h4 rold="heading aria-level"3">Parts</h4>

I have attempted to create a User-Defined Variable following this: https://www.youtube.com/watch?v=26JfSV_LUzA

However, when I run the google_tag_manager[“GTM-XXXX”].dataLayer.get("gtm.element") in the console it comes back with “undefined” even though it shows content in the data layer.

Any guidance with what the best direction would be to accomplish this is appreciated.