Tracking Promotions, Links & Button Clicks

We want to fire a Google Tag Manager tracking event any time a promotion is clicked so that we can measure the success of that promotion in various analytics platforms.

Acceptance Criteria:

• The dataLayer code provided below is fired by a JavaScript event whenever the green Track Me button/link is clicked.
• Replace $PROMOTION NAME$ with the actual name of the promotion, e.g. "Winter Sale."
• This code fires before any navigation occurs.

					dataLayer.push({
	'event': 'promotionClick',
	'promotionName': '$PROMOTION NAME$'
});
				

There are three possible solutions to tracking button/link/promotion clicks.

1. Using JavaScript & the dataLayer: We ask the developer to send an event (promotionClick) along with a variable (promotionName) to Google Tag Manager's dataLayer.

   In Google Tag Manager we'll set up a trigger for the promotionClick event and a variable for promotionName. We'll then create a Universal Analytics tag to fire an event that includes our promotionName variable.

   We want the name of the promotion/button/link as a variable so that we can distinguish between various promotions/buttons/links. If your client has a lot of promotions, you might even consider a promotionType variable to group them together.

2. Using Google Tag Manager Only: We use GTM to identify our green Track Me button based on its Class, ID, URL, or Text. We'll use ID. To do this we go to Variables and enable the built-in Click ID variable, and then create an All Element Click trigger on the Click ID of "track-me" as that's the ID of our green button.

   We'll also need to populate our promotionName variable. To do this we need to create a new DOM Element variable. We'll use the Element ID (track-me) and leave the Attribute Name blank to get the text value of the button, in this case, "Track Me."

   There are so many ways that this could go wrong. Any element with this ID, on any page on the website, will trigger this currently. Any change to the ID of the button will break this tracking. We don't even really get a good value for "promotionName" as the button text is likely something like, "Looking for winter sales?" Rather than what might be our internal reference, "Winter Promo." Many avoidable problems are caused by over-using this solution.

This section covers the best practice implementation, "Using JavaScript & the dataLayer."

1. Set up the promotionClick Trigger.
   1. Go to Triggers > New.
   2. Name the trigger after the event name, in this case promotionClick.
   3. Click Trigger Configuration.
   4. Choose Custom Event, under Other.
   5. For the event name, type promotionClick.
   6. Click Save.
2. Set up the promotionName variable.
   1. Go to Variables > New.
   2. Name the Variable after the variable name, in this case promotionName.
   3. Click Variable Configuration.
   4. Choose Data Layer Variable, under Page Variables.
   5. For the Data Layer Variable Name, type promotionName.
   6. Click Save.
3. Set up the UA - Promotion Tracking tag.
   1. Go to Tags > New.
   2. Name the Tag using this structure: Channel Acronym - Verbose Name of Tracked Item. In this case (where UA means Universal Analytics), UA - Promotion Tracking.
   3. Click Tag Configuration.
   4. Choose Google Analytics: Universal Analytics, under Featured.
   5. Change Track Type to Event.
   6. Use the naming convention: Category = Broad Event Grouping, Action = Event Type, Label = Event Name, Value = Dollar Value or empty. In this cause, Category = Promotion, Action = {{promotionName}}, Label = Button Text
   7. For Google Analytics Settings, select your settings variable (which you set up here!), in this case UA - Production Settings.
   8. Under Triggering, click "Choose a trigger.."
   9. Select your event trigger, in this case promotionClick.
   10. Click Save.

You're done! Now preview your container, or refresh your preview, and test out your implementation. If you haven't written your own tracking code, click the Add Demo Code button near the top of the page.

Promotions are usually set up in specific components like carousels, ad bars above or below the navigation, or ad units on pages like eCommerce category pages or product pages. If you're setting these up, it's a good idea to use a specific class for links within those units, e.g. .promo-link

Besides having a mechanism to select the link, it's a simple matter of adding a click event handler. The code you're going to get from the analytics specialist is going to be dataLayer.push({ .. }); so you just need to wrap that around your event listener.

Here's how I'm tracking clicks on the green Track Me button--note that I'm using the ID of track-me on that button.

					document.getElementById('track-me')
.addEventListener('click', function() {
	dataLayer.push({
		'event': 'promotionClick',
		'promotionName': 'Winter Sale'
	});
});
				

Note: This methodology does not apply to form tracking. In those cases we want to track a successful form submission.