Configuring Custom Dimensions With Google Tag Manager

Overview

Create a custom dimension using Google Tag Manager.

See GTM Data Layer to see how pushing event data is implemented in JavaScript.

Examples

Google Tag Manager > Accounts > Swansbury Inc > staging.bfhhandwriting.com > Tags > Shopping Cart Steps

• Tracks
  • Forms as they are loaded
  • Payment method
  • Errors displayed to the end user

Workflow

JavaScript

Add data layer call above the GTM code:

<script>
	dataLayer= [{
		'cartStep': 'Order Confirmation',
		'hasError': false,
		'paymentMethod': 'PayPal',
	}];
</script>

In order to put focus on events instead of page views, use runtime JavaScript:

dataLayer.push({'cartStep': 'Billing Information'});

Configure Google Analytics custom dimensions

• Create custom dimensions for the variables
  • Load GA property > Admin tab > Property column > Custom Definitions > Custom Dimensions > New Custom Dimension button
  • Name Give the dimension variable a short, meaningful name. This is the label of the dimension that is ultimately displayed in the Custom Report.
  • Scope:
    • Hit will record the value held in the variable every time the trigger is invoked.
    • Session will record only the last value held by the variable in the session.
  • Active: checked
  • Click the Save button
• Take note of the index that is assigned to the dimension variable, e.g. 1, 2, 3, etc

Google Tag Manager

Variables

Register variables with GTM, one for each of the data layer variables in the JavaScript.

• GTM Container > Variables > User-defined variables > New button
  • Name the variable something short and desriptive.
  • Type: Data Layer Variable
  • Data Layer Variable Name: enter JavaScript variable name, e.g. `{{cartStep}}`
  • Data Layer Version: 2
  • Set Default Value: unchecked

Trigger

Define a trigger where the data layer variables are relevant.

• GTM Container > Triggers > New button
  • E.g. to collect dimensions related to views of a particular page on the site:
  • Name the trigger something short and descriptive.
  • Type: Page View
  • Trigger Type: Page View
  • Fire On: Some page views
    • Variable: Page Path
    • Match type: Starts with
    • Value: /shop-online

Tags

Tags track matching events and send them to Google Analytics.

• GTM Container > Tags > New button
  • Name the tag something short and descriptive
  • Product: Google Analytics
  • Tag Type: Universal Analytics
  • Configure Tag
    • Tracking ID GA property tracking id
    • Track Type Page View
    • More Settings
      • Custom Dimensions > Add Custom Dimension
        • Index: The index of one of the dimensions defined in GA, e.g. 1, 2, 3, etc.
        • Dimension value: GTM variable name surrounded in curly brackets, e.g. `{{cartStep}}`
  • 'Fire On Some Pages
  • In the dialog that opens, select the trigger defined above.

Debugging

Before publishing the tag, test it by selecting Preview from the Publish dropdown at the upper right of the Container page.

While the page says "Now previewing version X" when the site is visited, a console will be displayed at the bottom of the browser window.

That console will show which tags are triggered with each interaction with the site, along with the data that is passed along.

After the tag behavior is confirmed, dismiss debug mode by clicking "Leave Preview Mode" in GTM.

Publishing

The changes in GTM variables, triggers, and tags don't take effect until they are published.

• Click Publish at the upper right of the Container page.

Google Analytics custom report

• GA property page > Customization tag > New Custom Report button
  • Title: name of the report that will be displayed in the left column
  • Metric Groups: choose the metrics of interest, e.g. page views, bounce rates, etc.
  • Dimensions > + add dimension button > Custom Dimensions > Select from the dimensions created previously in the GA admin

Notes

External links

• Custom dimensions & metrics, Analytics Help
• Custom dimension tracked in GTM but not showing in GA, Stack Overflow, Sept. 2014. The question has a nice concise rundown of the steps needed to track a custom dimension using GTM.
• Previewing and Debugging, Google Tag Manager Help
• Google Tag Manager for Web Tracking, Google Developers Guide: Google Tag Manager. Describes the GTM tracking codes and how to use data layers in JavaScript.
• Learning to Use Google Analytics More Effectively at CodePen, CSS-Tricks, March 2016