GTM Blueprint: Checkbox Click Counter

Being able to track when and where users click is a well-worn tool of the Analytics trade. In fact, much of the tracking done through the Google Tag Manager / Google Analytics combo relies on this ability.

As much information as there is about tracking various types of clicks, there is scant information available on how to track the number of times an object is clicked.

Despite the lack of direction on how to do this, there are a few uses for measuring the number of clicks on an object, including:

• As a standard of engagement with an object
• Gauging the stick-to-itiveness of site users insisting that something is a link
• Capturing actions that depend on the number of clicks

Our inspiration for this solution fell into the last category. We needed to track what options a user had selected for a download. Unfortunately, the site didn’t have unique CSS for selected or unselected options. Fortunately, we came up with a click counter solution that works in this case, and in others.

Below, we've outlined key steps to get started. 

Create a tag to initialize the Click Counter with a dataLayer.push

The first step is setting up a tag to place the click counter variable in the dataLayer and assign it a numeric value of 0.

To do this, in the Tags section of your Google Tag Manager container, click the New button. Select Custom HTML as the Tag Type.

In this example, we named this tag “dataLayer.push – Initialize Click Counter.” It's recommended to include dataLayer in the name as it's an important element to remember.

The next step is adding the custom HTML to your custom HTML tag. The only thing that will change in the code is the name of the Data Layer Variable.

For the sake of an example, let’s say you’re trying to track clicks on a checkbox that toggles between checked and unchecked on click.

You can use the following code to initialize a counter for that button:

<script>
  //Set counter to 0 on pageview
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
  'checkbox_Counter' : 0
  });
</script>

Be sure the name of your variable appropriately describes what kind of clicks you’re measuring.

Once you’ve added the custom code to your tag, the last step is to have the tag fire on Pageview. If the element you’re tracking is present across your site, you can make the tag fire on All Pages. However, it’s more efficient to confine the trigger to pages where you are tracking the number of clicks. That way, the tag and the time associated with running its code, only affect those pages.

In the end, your tag should look something like this:

Create the Data Layer Variable

Next, you’ll need to create a variable that corresponds to the dataLayer value of the Click Counter.

In the Variables section of your GTM container, under User-Defined Variables, click the New button. Select Data Layer Variable as the Variable Type.

In keeping with our checkbox example, this variable is named “DLV – Checkbox Counter,” and is assigned the exact same name (with the same capitalization) that we used in the dataLayer.

In the end, the variable should look like this:

Create a trigger you can use to update the counter

For the trigger, CSS is used to determine when the counter needs to be updated. That means you’ll need to identify a unique attribute of the color-changing button. In the example, we open developer tools to find that our checkbox has a unique id of “checkbox.”

Next, take that unique attribute and create a Trigger.

In the Triggers section of your GTM container, you’ll click the New button and choose either All Elements or Just Links as the Trigger Type – depending on whether the element you’re tracking is a link.

You’ll set the trigger to fire only on some clicks, and then specify the unique attribute that you found as the condition.

When complete, the tag looks like this:

In the next step, we can use this trigger to fire another dataLayer push that increases our click counter by 1 for each click.

Create a tag to increment the counter

This step is largely the same as creating the tag to initialize the counter in the dataLayer. The steps are laid out below.

(1) Create a new Custom HTML tag
(2) Give it a name like “dataLayer.push – Increment Click Counter”
(3) Add the trigger you just created (which, for me, is Checkbox Clicks)
(4) Add the following code to your tag, with the appropriate Variable names (i.e., update ‘checbox_Counter’ and {{DLV – Checkbox Counter}} as necessary):

<script> 
  //Increment counter by 1 on click
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
  'checkbox_Counter' : {{DLV - Checkbox Counter}}+1
  });
</script> 

After completing those steps, your tag should look something like this:

Transform the counter to provide important information

If you’re only trying to collect the number of times an object was clicked, you may proceed to the next step. This step is determined by your needs. What data are you trying to collect about this interaction? In the case of the checkbox, we could be trying to collect the number of times it was clicked or the status of the checkbox (selected or unselected when a specified action occurs). Let’s use a common use case of this technique: Recording marketing opt-in status on a form submission. To transform the click counter to a read of the checkbox’s current status, we’ll need to use a Custom Javascript Variable. In the Variables section of your GTM Container, click the New button and choose Custom Javascript as the Variable Type. Before we paste in the code, we need to think about a couple of things:

• How many variations does the clicking pattern involve?
• What is the order of those variations?

In the case of the checkbox, there are only two variations, in order: unselected and selected. That means if a button was clicked 0 times, it’s unselected; 1 time, selected; 2 times, unselected; and so on. The code below takes advantage of that pattern and uses the modulo operator to determine the current status of the checkbox.

//computes the current status of the checkbox
function() {
  switch({{DLV - Checkbox Counter}}%2) {
  case 0:
  return 'unselected';
  break;
  case 1: 
  return 'selected';
  break;
  }
}

Create a tag to send the information to Google Analytics

The final step involves pushing the collected information into Google Analytics. In the tags section of your GTM container, click the New button and select Google Analytics as the Tag Type.

In the case of our example, where we want to track the Checkbox Status on form submit, we would use the following settings:

• Event Category: Form Submission
• Event Action: {{Form ID}}
• Event Label: Opt-In Status: {{JS – Checkbox Status}}

IF you only want to record the number of times your object was clicked, you would instead pass the {{DLV – Checkbox Counter}} into one of the parameters of your GA tag.

Make sure that your tag’s settings match the information that you’re trying to pass into Google Analytics. When it’s completely set up, the GA tag looks like this:

BONUS: Tracking number of clicks for multiple elements

Sometimes, you’ll want to track the number of clicks on multiple elements on the same page. In fact, this was our original use case. Leveling the tracking up to include the number of clicks on multiple items involves the following changes in each of the sections above.

Create a tag to initialize the Click Counters with a dataLayer.push

You’ll need to initialize a counter for each object you’re tracking. If there were multiple color-changing buttons, for example, the code might look like this:

<script> 
  //Set counter to 0 on pageview
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
  'checkbox1_Counter' : 0,
  'checkbox2_Counter' : 0,
  'checkbox3_Counter' : 0 });
</script>

Create the Data Layer Variable(s)

You’ll create a Data Layer Variable for each of the counters initialized in the dataLayer.push tag above. That is, you’ll create three variables, each with a value set to the exact name it was given in the initial dataLayer push:

DLV – Checkbox 1 Counter
DLV – Checkbox 2 Counter
DLV – Checkbox 3 Counter

Create a trigger you can use to update the counter

You’ll create a trigger to fire on the click of each tracked element. This is likely accomplished through unique CSS.

For example, the first color-change button might have an id=“checkbox1”, the second an id=“checkbox2”, and the third “checkbox3.”

Make sure your names for these triggers are identifiable, as you’ll need to distinguish between them in the next step.

Create a tag to increment the counter

If you’ve created multiple triggers above you’ll also need to create multiple tags. Each of these involves a simple change to the code, replacing variable names appropriately and ensuring that it fires with the correct trigger.

<script>
  //Increment counter by 1 on click
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
  'checkbox1_Counter' : {{DLV – Checkbox 1 Counter}}+1
  });
</script>

Transform the counter to provide important information

Here’s where the real difference comes in. If you’re simply trying to record the status of each checkbox independently, it’s a simple code expansion.

However, in our case (and probably most cases) we were trying to record a list of the selected options in a single variable. This requires reworking the Javascript of the Custom Javascript Variable considerably. Luckily, we’ve already done it.

The code below takes a few arrays of values and outputs a comma-separated list of the selected options.

//computes whether a checkbox option is selected
function() {
  // create an array to hold the options a user has selected
  var optionsArray = [];
  // create an array of the checkbox counter values from the dataLayer
  var checkboxValues = [{{DLV - Checkbox 1 Counter}}, {{DLV - Checkbox 2 Counter}}, {{DLV - Checkbox 3 Counter}}];
  // create an array of the options (in the same order as dataLayer values above)
  var checkboxTitles = ['Home Owner','Heard from a Friend','Marketing Opt-In'];

  // For each option, if counter is even == don't add to array; if odd == add to array
  var len = checkboxValues.length;
  for (i=0; i<len; i++) {
  if (checkboxValues[i]%2==1) {
optionsArray.push(checkboxTitles[i]); } 
} 

  // Return the list of options selected, separated by a comma and a space
  return optionsArray.join(", ");
}

For your purposes, you’ll need to update the following:

• checkboxValues – an array that holds all the click counter Data Layer Variables
• checkboxTitles – an array that holds all the titles of the checkboxes. These elements should be in the same order as their corresponding click counters in the checkboxValues array above.

Create a tag to send the information to Google Analytics

This step is largely the same as above. Slot the Custom Javascript Variable into your GA tag where you’d like the list to be recorded.

And there you have it!

Curious to learn how MERGE can help manage your data and unique business needs? Drop us a line, we’d love to connect with you.