Google Tag Manager Macros

gtm_macros.js

/*
 * Custom JS macros for creating tags in GTM that populate event information from
 * element attributes.
 *
 * Author: Joshua Kehn <[email protected]>
 * 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.
 */