Element Attribute Macros for Google Tag Manager

html-element-tag

*Update*:

With the on-set of version 2 of Google Tag Manager, the tactics used below have changed slightly. If you have upgraded to version 2, please see the newest post: Element Attribute Variables for GTM.

Original Post

For everyone that has gone through a Google Tag Manager implementation, you undoubtably know of the ever popular auto-event tags. I use auto-event click tags on everyone of my GTM related properties and love the ease of use for their implementation.

There is only one major issue I have run into, which always occurs when working with code that I haven’t developed and have no access to getting changed in a timely manner. That is being able to extract other element attributes than the default macros allow for in Google Tag Manager.

By default you can easily pull the following attributes for a given element:

  • class(es)
  • id
  • target
  • text
  • url

But for anything else you may want to pull in, you are left to coding. Thankfully there is an easy way around this, with a small, simple line of custom javascript. Don’t let the custom worry you, I’m gonna walk through this step by step.

So now for the actual scenario which gave me this problem with an implementation.

  • The Site: this very blog you’re reading.
  • The Task: Tracking clicks on social shares (please share above) as an event
  • The Issue: All of the classes for each social network are the same and the only differentiation is the title attribute (which cannot be pulled by a default GTM macro)
  • The Solution: Create a custom javascript macro to grab the title attribute from each social share

First you need to create the macro you will then use to pull the title attribute of an element.1. Go to New -> Macro.

2. Give the macro a name (I chose element title)

3. Select the macro type, Custom JavaScript

4. Enter the following code in the Custom JavaScript box:

function() {
var elem = {{element}};
return elem.getAttribute(‘title’);
}

element-title-macro-gtm
Creating the element title macro in Google Tag Manager

Basically what this does is create a function that will fire to enable the code that will retrieve the macro’s value. We create a variable, I call it elem (short for element), and have it equal to {{element}}. This is an already established macro that gets the clicked or current element (through auto-event variables. This is why you must use auto-event variables in conjunction with this macro method (more on this later).

That’s it, you have created the macro to grab the title attribute for the element you designate.

Now you must set up the event call with a new Universal Analytics tag to track an event.

For this you can create a new tag. I called mine Social Share Event, but you can use whichever naming convention you prefer. The tag type is Universal Analytics (or classic analytics if you have not converted to Universal Analytics). Then go ahead and enter your Google Analytics Tracking ID, and select track type event.

element-title-event-code
Creating the event tag trigger for the Element Title

For this particular instance, I went ahead and hard coded my event category and action (Social Sharing, Share) because this event trigger will only vary in the label I want to collect. This is where the event will differentiate between Facebook, Google Plus, Twitter, and the other social share buttons being clicked. In that area, you want to place the macro we just created.

Now time to create the rule to only fire on the social sharing click. I won’t go into too much detail, since this is really about creating the macro, but basically I set up the rule to fire an event whenever there is a click on any page throughout the site. However that click will only fire when it is a click on an element with the class “lrshare_iconsprite32” which is the class that the social share plugin has defaulted for each of the share buttons.

gtm-rule-creation
Rule creation to trigger the event in Google Tag Manager

I hope this will help you to extract other known element attributes to use in your analytics data. Things like src, title, alt, and more are now possible.

Chris Kujawski

Founder and instructor at Digital Metrics Guru.

A passionate and driven digital marketer, specializing in Google Analytics, Tag Manager and Data Studio. A qualified expert in Google Analytics and Adwords, with more than 10 years experience delivering sound solutions to clients worldwide.

View all posts

4 comments

  • Hi Chris,

    I’m missing some content in this blog related to this sentence “This is why you must use auto-event variables in conjunction with this macro method (more on this later).” I couldn’t find “more on this later” in your post and I think I’m missing a macro to get this to work.. Can you assist? Thanks 🙂

    • Yeah, thanks for the catch. I think I missed out on representing this later in the article. In version 1 of GTM (which is now outdated) there were what is considered aut0-event variables (or macros).

      Basically you had to create an auto-event macro which would listen for an action on page, such as a click. Then in your rule, you would have to reference that auto-event macro by using {{event}} equals gtm.click. This is represented in the last image seen above.

      In version 2, which is now current for most all containers, this is no longer the case as you no longer need to create any aut0-event variables (were macros), as they are now baked in.

    • Just out of curiosity, this would happen to be the Mads that was at the GACP Summit earlier this week? We met during the reception on the first evening?