How to create a custom JavaScript variable in Google Tag Manager?

Checkout abandonment is a great pain point in the lives of a lot of online store managers who want to improve their conversions. Finding out the products that are in the cart when it is getting abandoned on the Checkout page can give you a lot of insights. In my experience, you can easily get various cart data by creating custom JavaScript variable in Google Tag Manager. This post tells you how.

First step in the journey of Google Analytics and Google Tag Manager, popularly called GTM, is the process of setting your website up in GTM and your tracking data in Google Analytics. The GTM data that you set up is generally visible in the Events section of Google Analytics.

The cart data that we are going to capture through the Google Tag Manager tags would be visible under Events section of Google Analytics which is found under the section titled Behavior.

In short, Events are user or system generated actions that happen on the website. Example of a user generated events could be the click of the “Add to Cart” button. Example of a system generated event could be loading of a page.

In order to capture the product cart data, the fundamental requirement is that the website should be sending the cart information in the data layer. You can have your developer set that up for you website. In case you have a WooCommerce store, you can install free plugin, titled GTM4WP (Google Tag Manager for WordPress), that would inject the requisite data in the DataLayer. Checking a couple of boxes in this plugin’s settings would set up your online store to send the required data to your Google Tag Manager tag.

The first step in configuring your GTM tag is to identify the “key” that is being generated by the website. This key would contain the required (cart) data and would be picked by GTM to extract the values required to display in Analytics.

You can check your dataLayer by going to More Tools > Developer Tools in Chrome and type dataLayer at the prompt in the Console tab.

Once you have the key, start Google Tag Manager and

Step #1 – Create a new Variable.

Step #2 – Give your variable a name and click on the Grey circle at the center of the window to open up “Choose variable type” panel. Select “Data Layer Variable”.

Step #3 – Type the exact name of your key in the “Data Layer Variable Name” text box and select “Version 1” from the “Data Layer Version” drop down box and click the Save button.

Note: GTM requires you to create this variable before you can use this in a “Custom Javascript” variable that we need in order to capture the cart information.

In case you try to use the “key” directly in your Custom Javascript, you may get the following error:-

Unknown variable ‘ecommerce’ found in another variable. Edit the variable and remove the reference to the unknown variable.

In case you land here looking for the solution to this error, make sure you complete step #1, #2 & #3. It could be a little frustrating to set this simple thing up as there is no reference to be found easily. I would write the steps again here:-

1. Create a Data Layer Variable.
2. The name would be the key name that appear in Data Layer. Don’t use curly braces to enclose it when you type it in the ‘Data Layer Variable Name’ box.
3. Use the name of the variable (not the key name but the custom name that you gave it) in your custom JavaScript.

Let us know through the comment if you still face an issue while setting it up.

“ecommerce” is the key name used in the custom JavaScript variable that we used as it is generated by gtm4wp which is quoted in the Error example above. In your case, the ‘key name’ might be different. Refer your developer to find out the key name.

Step #4 – Create a custom JavaScript variable.

In Google Tag Manager create another new Variable. This time choose Custom JavaScript type variable. In the new window, copy the following code in the code window. Give it a name and click Save.

function() {
  var ecom = {{var - ecom}},
      myProducts = [];

  for( var i=0; i<ecom.checkout.products.length; i++ ) {
    myProducts.push(ecom.checkout.products[i].name);
  }

  return myProducts.join(",");
}

You can now attach it to a new tag that triggers on Checkout Page Views. Use your custom variable in Events Label of this to get the list of products in your Analytics > Events.

You are not set up to see the Product Names in your Analytics account.

This is not limited to just the Product Names. You can capture whatever data you want as per your particular use case, as long as it is being published by the website, using Google Tag Manager.