Skip to content

Instantly share code, notes, and snippets.

@joshkehn
Created January 16, 2014 19:09
Show Gist options
  • Save joshkehn/8461306 to your computer and use it in GitHub Desktop.
Save joshkehn/8461306 to your computer and use it in GitHub Desktop.
Google Tag Manager Macros
/*
* Custom JS macros for creating tags in GTM that populate event information from
* element attributes.
*
* Author: Joshua Kehn <josh@byjakt.com>
* Copyright: (c) 2014 by Joshua Kehn
* License: ISC <http://www.isc.org/downloads/software-support-policy/isc-license/>
*/
function () {
// Defined as "Fetch gtm-category attribute"
// Returns the gtm-category attribute value from the bound element.
return {{element}}.attributes["gtm-category"].value;
}
function () {
// Defined as "Fetch gtm-action"
// Returns the gtm-action attribute value from the bound element.
return {{element}}.attributes["gtm-action"].value;
}
/*
* Example Usage:
*
* ## Universal Analytics event tracking
*
* Prereq: Setup the two macros above as Custom JavaScript. [Screenshot](http://l.kehn.io/image/3o0g2s363F1F)
*
* Note: It's advantagous to add a "Delay Links" tag. "Tag Type" is "Link Click Listener set to fire on all
* pages, max wait time 2000ms and add check validation.
*
* 1. Create a new tag
* 2. Give it a name and set tag type to "Universal Analytics"
* 3. Add your UA tracking id
* 4. Create a firing rule with `{{ element classes }} contains gtm-feature-click`.
* 5. Set "Track Type" to "Event"
* 6. Set "Category" to "{{ Fetch gtm-category attribute }}" (or click +macro and click it)
* 7. Set "Action" to "{{ Fetch gtm-action }} - Click" (will set action on fired event to "[ELEMENT gtm-action VALUE] - Click")
* 8. Sprinkle code with event tracking by adding the "gtm-feature-click" class and setting "gtm-category" and "gtm-action" values.
*
* This can easily be extended to "Label" and "Value" fields using similar macros.
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment