Element Attribute Variables for GTM V2

A few months back I did a post on creating a macro within Google Tag Manager which will allow you to pull out any attribute you want from an HTML element.

While the post got a lot of attention, and I hope has helped a few of you out, unfortunately it is already outdated.

With the on-set of version 2 of Google Tag Manager, there is one slight change that has taken place in the otherwise simple implementation of pulling relevant attributes from elements to use within GTM.

If you haven’t read the initial post, please go there first before continuing on with this article:
Element Attribute Macros for Google Tag Manager

Okay, all caught up on your reading? Let’s get to work then.

As many of you who have already upgraded to version 2 of GTM know, there is a large graphical interface difference, and two other small, but prevalent changes. Rules have now become Triggers and Macros have become Variables.

Everything still works the same, but the naming conventions have changed. With that said, we will be creating a new variable, no longer a macro.

Now for the simple change from my first post. The only thing you need to do is where you originally referenced {{Element}}, you must now reference {{Click Element}}. Yep that’s it, as simple as that.

custom element attribute variable javascript
Simply replace {{Element}} with {{Click Element}}

You now have the power to upgrade your original version 1 implementation, full of custom attribute macros I hope, and more easily convert it to version 2, with variables.

For those who have not yet upgraded to version 2, I would highly encourage it. The new interface is much easier to work with and understand, especially for those of us without a heavy programming background.

The word from Google is that they will be upgrading everyone’s account automatically in the coming weeks (possibly longer), so if you are nervous about messing with your current setup, just hang in there and Google will take care of your tag manager upgrade soon.

7 responses on "Element Attribute Variables for GTM V2"

  1. Thanks for the help, Chris. Found plenty of articles that showed how to use a Custom Javascript Macro in GTM to read a tag attribute, but none identified this change from v1 to v2. My container is v2.

    Out of curiosity, do you know if this is documented somewhere in the Google Tag Manager documentation? If not, how did you figure it out?

    Thanks again.

    • Jeff,

      My apologies for the late response, I have been out of town for a few weeks and didn’t catch this comment right away.

      Honestly I struggled with this for quite a while, figuring out that I had to reference {{Click Element}} instead of the V1 {{Element}}.

      I couldn’t find it in Google’s documentation, however, I happened upon it within an article from Simo Ahava. See here: http://www.simoahava.com/analytics/variable-guide-google-tag-manager/

      It mentions within that one of the default variable values for a click is Click Element. I tried that to see how it would work for this setup and voila!

      Thanks for the comments, keep them coming. Let me know if there is anything else you are curious about.

  2. Hi Chris,

    Thanks for some great posts.. However I can’t get this one to work.. I’ve tried with this custom JS:

    function() {
    var e = {{Click Element}};
    return e.getAttribute(‘title’);
    }

    Can you see if something is wrong? Sorry… bit of a JS novice 🙂

    Thanks!

    Regards

    • mads,

      This should be all you need. I would say the only thing to check is if you are using version 1 or version 2 of GTM. In version 1, this would need to read {{element}} , if version 2 then {{Click Element}} would be true.

      Other than that what you have posted here should definitely return the value of the clicked element’s title attribute.

Leave a Message

top
Copyright 2017 by Chris Kujawski Privacy Policy