Create a Content Custom Dimension for Google Analytics with JTM

A common use case with tracking is a situation where a variable is selected from a website (such as a page title) and submitted as a custom dimension with Google Analytics. In this guide we will show you how to extract values in the front end and submit those with a tag in the Jentis Tag Manager (JTM).

Prerequisites

Our goal is to track a custom dimension with a meaningful value. The scope of this dimension in Google Analytics will be HIT (so this value is only valid per this event) and those are the outlines of our definition.

Now we need to implement all the required parts in the JTM to actually track this value with each pageview.

The steps of this process are:

1. Implement a JTM Frontend Variable to select the value.
2. Update the JTM Google Analytics server side pageview tag to submit the custom dimension value.
3. Preview and publish this new version of the JTM

Creating the JTM Frontend Variable

Lets navigate to the JTM Data Source section “Frontend Variables” and create a new entry.

(click the “Plus” icon in the lower right corner to create a new element)

Give it a clear name, such as “CSS Selector – Author Title”, optionally a short description and add the following JavaScript function to actually retrieve the value.

function(){
  var selector = ".h4 #author";
  var nodes = document.querySelectorAll(selector);
  if(nodes && nodes.length > 0)
    return nodes[0].innerText;
  else
    return null;
}

Adjust the value of the “selector” variable accordingly (here: .h4 #author)! So if you need the inner text of a button, go to your website and inspect that element. In your browsers web developer tools you can right click that HTML element and select “copy: selector” that will give you the reference to actually point to the element you need.

On a side note: if the value you are looking for is not available from a CSS Selector, make sure to also check the following guide – Data Layer Variable Reference

So now we have that element we can use this Frontend Variable in a JTM server side tag.

Update the JTM Google Analytics Tag

Jentis will now do the heavy lifting for you! It will make sure that this frontend variable is only evaluated when required (saving website performance) and submitted to the server in a data model that makes the value re useable as an input to a backend variable or in a tag. The latter is the way to go in this guide.

Lets open an existing tag on our server side setup where we want to use this new element (Frontend Variable) as a custom dimension value.

(navigate to the Server Tag Mananger and edit the Tags by clicking the edit button with the “pageview” tag of Google Analytics)

(edit the tag and define the Custom Dimension ID (index) and Value)

Here we will need to map the Custom Dimension Value property to the new Frontend Variable. You can simply use the interface to select the variable or the {{<variable_id>}} notation.

Here you can select the Frontend Variable. After this is done you can simply click the Save button and we are done with the configuration.

Preview and Publish

Making sure everything is working as expected we can use the preview. That is found in the “Deployment: Versions”. Where you can see all your existing versions and preview each one. Select the currently edited version (highlighted green, this is the latest version). This one contains our new custom dimension and is yet to be published.

In the preview of this version we can inspect the server to server communication from your Jentis server to the Google Analytics server. Make sure to visit your website with the quick-link to actually simulate the pageview that contains the value for our Frontend Variable.

In this preview you will find the request that contains the custom dimension value: cd1: "Joe Average" (as for our example).

Now the only step left to do is to release this JTM version to public and we are done!