html css-selectors google-tag-manager event-tracking

Setting Up Events in Google Tag Manager with Parent/Child Attributes

Pushing code out on my site only happens monthly and I wanted to add in event tags on certain buttons on the site using google tag manager.

Because the classes & ID's are in the parents and not directly on the click attribute I was having trouble figuring out how to target the specific button. Right now every time I test it in different ways I can't seem to get it to work. I was reading this article to try to help me: http://www.periscopix.co.uk/blog/new-gtm-trigger-condition-matches-css-selector/

The piece of code I'm trying to target is users who click on the 'Apply' button.

        <div id="universal-actions" class="pull-right">
            <ul class="nav nav-pills">
                <li class="button-visit"><a href="/visit/">Visit</a></li>
                <li class="button-apply"><a href="/apply/">Apply</a></li>
                <li class="button-login"><a href="/login/">Login</a></li>

I tried a couple different variations of just targeting the ID & the li class, and just the class and the click URL, just can't seem to get it right. Most recently I tried a CSS selector of: ul.nav nav-pills > li.button-apply

Thanks for any help! I'm new to google tag manager and am really having trouble with these parent attributes.

Solution

You were close. The selector you need is ul.nav.nav-pills > li.button-apply. Notice the period between "nav" and "nav-pills" in lieu of a space. That's because the ul has two classes, and each needs to be represented with its own class selector, hence .nav and .nav-pills.