Google Tag Manager event tracking for dom elements

Question

with Google Tag Manager Auto-Event Tracking (dataLayer.push), I want to track this information:

1. the name of the links clicked in my menu, for example:

   <ul class="my-nav"> <li> <a href="http://www.anothersite.com" target="_blank" rel="external">Anoter site</a> </li> </ul>

so: 'Another site'

1. I want to push the name of the parent link name of the clicked link with this structure:

<li>Linkname <ul> <li> <a href="http://www.website.com" target="_blank" rel="external">Website name</a>
<li> <ul> <li>

So there: I want 'Linkname'

1. the 'status' of a toggle link - whether the element has a class 'open' or not

   <a class="content-toggler open" href="#">Hide all the content</a>

I have read through many tutorials and walkthroughs, but most talk about tracking links that go to external sites in general, or submit events and so on. Here I want to track the name of a link in a certain dom tree. And I want to track the element 'status' with a certain class.

Please explain how this can be achieved, or refer me to articles that have an example to this kind of events, not only to general walkthroughs.

Many many thanks!

Answer 1

Let's start with the last one. 1) What you have to do it to create a link click listener (new tag-->tag type-->Link click listener) and run it on all the pages (or only the pages where it is relevant). This will generate an event for GoogleTagManager that you an use in a rule.

2) Create a rule like the following. This will trigger an event that we will do in the next stage

3) Set an event like the following. Note that I added an element id. If you have more than one toggle open link, you need to find a way how to distinguish between them on google analytics. ID could help you. Also note that using gtm you can only use the classes, not one specific class. (as far as I know)

Now let's go back to the first one. You can use the same method used here above, but instead of putting the {{element classes} as the value of the event, you can create a new macro that will employ the inner text of that link (gtm.element.innertext). On how to do it, read here: http://www.swellpath.com/2013/10/google-tag-manager-inspecting-andconfiguring-auto-event-tracking/

For the second one, you need the innertext of a third level parent. I'm not sure how to implement it other than using javascript that will call an event through the data layer.

So I would suggest a solution like the following:

1. Create an event on GTM that listens to events that are pushed via the data layer. On how to do this, go to this post: http://moz.com/ugc/tracking-google-analytics-events-with-google-tag-manager Start with "Tracking Google Analytics Events with GTM: The Second Way" and do steps: 1,2 and 3.

2. Create javascript code that is executed when the link is clicked. This JS will take the text of that 3rd parent element whenever that link is clicked. Again, I suggest to provide IDs so the task will be easier.

Then, the same JS code should then run this code

dataLayer.push({ 'event':'GAevent', 'eventCategory':'Navigation Clicks', 'eventAction':'Menu Item Click', 'eventLabel':'Outbound Click', 'eventValue:***YOUR 3RD LEVEL PARENT TEXT HERE***});

Then the event with the value is registered via google analytics.

Note that all the names I gave for the event values in my reply are based on my understanding of your needs. You will need to adjust them to what you want to achieve with this event tracking.