- Step 1: Create the DataLayer in WordPress (or whatever CMS you’re using)
- Step 1.1: Turning on Visitor Data in GTM4WP
- Step 1.2: Find The Names That WP4GTM Uses for dataLayer Variables That You Need
- Step 2: Create your Google Analytics (GA) Custom Dimension
- 2.1 Locating Custom Dimensions under Custom Definitions in Google Analytics
- 2.2 Custom Dimension Names, Scope, & Index
- Step 3: Create the User Defined Variable in Google Tag Manager (GMT)
- Step 4: Create the Custom Tag in Google Tag Manager (GTM)
- Step 5: Create the Custom Trigger in Google Tag Manager (GTM)
- Step 6: Test Logging To Ensure Proper Functionality
Custom dimensions allow you to take all kinds of data about your visitors and turn them into additional dimensions which you can use to segment data in Google Analytics. You can use these as secondary dimensions in standard reports, or as primary dimensions in custom reports.
Step 1: Create the DataLayer in WordPress (or whatever CMS you’re using)
How you do this will depend on what information you want to access. For instance, accessing a user’s IP address will generally require different steps than accessing member information from your database. For the IP address example, you have to capture and store the IP address in a variable in the dataLayer. However, to access member information from the database you need to use the right commands and functions to surface with your database.
In this specific example, I am accessing member information from the database, however, this particular approach also incorporates a solution for IP addresses. For this WordPress example, I use GTM4WP.
This can be found and installed like most plugins, via the WordPress Plugin Directory directly through your WordPress site. It’s called “DuracellTomi’s Google Tag Manager for WordPress” by Thomas Geiger.
Step 1.1: Turning on Visitor Data in GTM4WP
Enabling visitor data in GTM4WP will take visitor data and store it in the dataLayer.
In the video, I show how you enable visitor information. It is located under the basic data tab in GTM4WP, which you locate at settings > Google Tag Manager. In this particular example, I am going to observe user types which GTM4WP happens to call user names. You’ll see that I have already selected all these.
Step 1.2: Find The Names That WP4GTM Uses for dataLayer Variables That You Need
If you go to the GTM4WP website you’ll find a section dedicated to explicating the dataLayer variable names of the various dimensions it allows you to access. If you navigate to the section titled “Data about the logged in user on the site,” you’ll see things like visitorId and visitorLoginState.
We’ll use these in the next step.
Step 2: Create your Google Analytics (GA) Custom Dimension
The data is going to stream over from the user behavior on your website, through Google Tag Manager, and into Google Analytics. In the video above I create the custom dimension for the data stream to belong to. Custom dimensions are located under custom definitions in Google Analytics.
2.1 Locating Custom Dimensions under Custom Definitions in Google Analytics
- Click Admin, located on the bottom left of most screens at time of writing
- Locate the Property Column, towards the right
- Locate Custom Definitions towards the bottom of this column
- Click Custom Dimensions
2.2 Custom Dimension Names, Scope, & Index
In this example, I make 2 custom dimensions in GA. These names must be exactly the same as the variable names in the dataLayer created by GTM4WP.
In this case, I am making one with the variable name visitorId and another for variable visitorUsername. visitorUsername is a new addition to the plugin and not actually present in the documentation I shared above. However, it functions as expected.
The scope could belong to user, but what if users upgrade to a new membership type? In this case, I want to scope my dimension at the session level.
Take note of the index number for the custom dimension! After you create it, it will be in the third column of your new custom dimension’s row.
Step 3: Create the User Defined Variable in Google Tag Manager (GMT)
Remember, the data is going from my website to GTM, then to GA.
- We’ve set up the dataLayer in WordPress and identified the name of the variable we want to use.
- We’ve created a custom dimension in GA with the same variable name.
- So now we move upstream to GTM and create the dataLayer variable there.
In the video, I create a dataLayer variable in GTM with the variable name visitorUsername, which is simply a bucket for several user types. Keep in mind now, since we are working in multiple platforms, variable names will have their specific names within the platforms. In the example above, I name this dataLayer variable “GA – DL – visitorUsername,” which we will use in the very next step.
Step 4: Create the Custom Tag in Google Tag Manager (GTM)
Now that we have the variable defined in all the platforms that will be using the data, we have to create a tag for the variable to belong to, and also use the tag to tell GTM how it’s going to use the variable by adding some custom dimension variable details.
4.1 Creating An Event Tag
The tag is an event tag, for which we name the event category, action, and label. As with most things in GTM and GA, you want to make sure you have and respect a naming convention. I go into more depth on event naming conventions elsewhere, which I will link to in the near future.
The event “Label” here will be the GTM name of the dataLayer variable we made in the last step, in this case, “GA – DL – visitorUsername”
4.2 Adding Custom Dimension Variable Details
In the video above, I created the event tag, filled in the 3 event names, then saved and published the work, but I forgot to do something very important. Luckily, I caught this mistake by performing Step 5 below.
I forgot to use the tag to tell the second half of the story. The tag is currently listening for an event named gtm.load, but then what? I made no mention of the custom dimensions it needs to capture for GA.
So here I modify the tag I just made and insert the custom dimension data. You’ll see that I add the index from step 2.3 and the corresponding variable name.
Step 5: Create the Custom Trigger in Google Tag Manager (GTM)
Now that we have all the platforms using the same variable names, and GTM knows how it’s going to use the variable, we have to tell it when to use the variable. GTM4WP automatically attaches an event name to the dataLayer, it’s called “gtm.load”. In the I use GTM preview mode to show how you can identify the name of a dataLayer if you didn’t create it yourself.
By creating an event trigger in GTM with the name of the event from the dataLayer, we are telling GTM to watch out for an event with a specific name, in this case “gtm.load”
Step 6: Test Logging To Ensure Proper Functionality
You probably noticed that in each video, I have GTM preview mode activated (the toolbar along the bottom of the screen), but I am also using the GA Debug chrome extension which is presented within the console area of Chrome on the right side of the window.
Here I show how I test my setup to make sure the information is being passed from my website into GA. You know it’s working because on the right-hand side, I can spot the new dimension being sent to Google Analytics.