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
- Click on the "Variables" menu option in the left navigation bar
- Scroll down to the "User-Defined Variables" section and click on "New"
- Click in the middle on the next screen to create a new variable
- Select "Custom JavaScript" in the "Page Variables" section.
- Enter a JavaScript anonymous function in the "Custom JavaScript" section.
- Return the appropriate value in the above function. This is the value that gets assigned to the variable.
- Give your variable and name and save.
- 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
- Here we created an anonymous function with opening and closing parentheses and two curly brackets
- Within these two curly brackets is our logic in this function right here.
- In this example, I am reading Document location, which gives me the domain name
- Then I am using protocol property to see if the protocol is secure or not i.e. HTTPS or HTTP
- 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
- Google Analytics 4 Setup and Audit Checklist – GA4 Made Easy
- How to Add JavaScript to Google Tag Manager (GTM)
- Google Tag Manager Preview and Debug Mode
- How to Track Events in Facebook using Google Tag Manager
- Why Is Google Tag Manager Preview Mode Not Working?
Where to get more help with JavaScript, Google Analytics 4, and Google Tag Manager?
- Workshop - We offer onsite customized workshops. Reach out to us for more details.
- Consulting - We can get you up and running with Google Analytics 4 as well as train your and your team to use it effectively. Reach out to us for more details.
- Freelancers - Join our network and get support to help your clients with JavaScript, Google Tag Manager, and more.
Learn and Master JavaScript, Google Tag Manager, and Google Analytics 4
- Get your team ready for GA4 with this online self-paced course - Google Analytics 4 Masterclass
- Optizent Academy Membership - Learn GA, GA4, GTM, BigQuery, etc. and get support from fellow members