Custom JavaScript Google Tag Manager – What, Why, and How to create with an Example

Custom JavaScript Variables in Google Tag Manager allows you to create your own variables to provide you with the data that is not available in any of the in-built variables or is not directly available anywhere on the page. It allows you to take other variables, do additional processing on them and convert them into a new variable.

 

How to create Custom JavaScript Variable in Google Tag Manager

  1. Click on the "Variables" menu option in the left navigation bar
  2. Scroll down to the "User-Defined Variables" section and click on "New"
  3. Click in the middle on the next screen to create a new variable
  4. Select "Custom JavaScript" in the "Page Variables" section.
  5. Enter a JavaScript anonymous function in the "Custom JavaScript" section.
  6. Return the appropriate value in the above function. This is the value that gets assigned to the variable.
  7. Give your variable and name and save.
  8. Now you can use this variable in other variables. tag and triggers.

Custom JavaScript Variable to get users web protocol (example)
I'm going to write a very simple

This is a very simple example to show how the Custom JavaSctipt works. I will be adding more examples in various posts.

In this example, I want to know if the user is using HTTPS or HTTP version of the site. Of course, all the sites should be using the HTTPS version else users are going to get security messages from the web browser but many companies still use the HTTP version and this is a way to know if the user is hitting HTTP or HTTPS version. Ver

Follow the above steps to step 4 listed in the above section

Write the following JavaScript in the "Custom JavaScript" section

function () {
var protocolVal;
protocolVal = document.location.protocol;
return protocolVal;
}

 

Click on "Save"

Give the variable a name and your variable is ready.

Recap of the logic

  1. Here we created an anonymous function with opening and closing parentheses and two curly brackets
  2. Within these two curly brackets is our logic in this function right here.
  3. In this example, I am reading Document location, which gives me the domain name
  4. Then I am using protocol property to see if the protocol is secure or not i.e. HTTPS or HTTP
  5. Finally, I am assigning that to a variable and returning the value.

 

This is a simple function that we created but you can write any complex logic that you want. The key is to use an anonymous function and return a value. The returned value then becomes the value of the variable.

 

Custom Variable Google Tag Manager Video

 

Learn JavaScript for Google Tag Manager

If you want to master JavaScript for Google Tag Manager then checkout the complete course for Marketers and Marketing Analysts to learn JavaScript. This course is focused on teaching you the fundamentals and applications in Google Tag Manager. Even though examples are in Google Tag Manager (GTM), you can use them for Adobe Analytics using Adobe Launch as well or any other marketing analytics tools.

Other Google Tag Manager posts that might like

Where to get more help with JavaScript, Google Analytics 4, and Google Tag Manager?

Learn and Master JavaScript, Google Tag Manager, and Google Analytics 4

Leave a Reply

Your email address will not be published. Required fields are marked *