· 7 min read

How to Set up a Custom Variable using GTM

One can work with GTM and not need any custom variable. However, marketers who would like to start using it professionally eventually find out that built-in variables come in limited in some cases. That’s when you’ll realize how you can take your GTM game a step further with custom ones.

Thus, we’ve prepared a Google Tag Manager variable guide for you to understand the concept and learn how to set up your own user-defined variable as well as to use it for personalized marketing with popup campaigns (the last one is a good-to-know instruction on our side).

Let’s start off with the basics.

What are variables in Google Tag Manager?

Variables in GTM are named placeholders for values that you define. These values are populated when code is run on your website or mobile app. Variables are used both in triggers and tags in GTM:

  • In triggers; variables determine filters specifying when a GTM tag should fire.
  • In tags; variables capture dynamic values. E.g.: pass a product ID to a conversion tracking tag.

In Google Tag Manager, variables are sorted into two main categories; built-in variables and user-defined variables. Tag Manager comes with pre-made built-in variables that are ready to use for most trigger and tag configurations. However, you aren’t limited to the built-in variable library–GTM allows creating your custom variables as well.

What are built-in variables?

Google Tag Manager built-in variables

As we mentioned earlier, built-in variables are a set of ready-made variables that can’t be customized.

New containers don’t have any user-defined variables at the beginning, while some built-in variables will be pre-enabled. You can enable or disable the built-in variables in the right sections as you like.

What is a constant variable in Google Tag Manager?

Another term you’ll come across when using GTM is the ‘constant variable.’ A constant variable is a reusable variable that you have to use often or that might require updating in the future. So, constant variables in GTM are used for storing static or dynamic values that you’ll use frequently. It’s best to store such variables as ‘constant’ to resort to a time-saving solution when configuring tags.

The most common use case of constant variables is Google Analytics. For example:

  • With a constant variable, you won’t have to go to Google Analytics Admin to copy each time you want to configure an Analytics tag. Instead, you’ll only keep the {{ID analytics}} variable name in mind.

The built-in variables in GTM come in the following categories:

  • For web containers (Clicks, Errors, Forms, History, Pages, Scroll, Utilities, Videos, Visibility)
  • For AMP containers (Device & Browser, Interaction, Miscellaneous, Page and Content, Pages, Performance, Utilities)
  • For Android containers (Application, Device, Utilities, Campaign Event Parameters, Other Event Parameters)
  • For iOS containers (Application, Device, Utilities, Campaign Event Parameters, In-App Purchase Event Parameters, Notification Event Parameters, Other Event Parameters)
  • For legacy mobile containers (Application, Device, Utilities)

How to create a custom variable in Google Tag Manager

When we say custom variables, we mean custom user-defined web variables in GTM. It’s an option GTM provides for variables that might not be covered in its own built-in library.

Follow the steps below to create a new user-defined variable in Google Tag Manager:

Step 1: Click Variables on the left-hand navigation menu.

Click variables on Google Tag Manager

Step 2: In the User-Defined section, click on the New button to create a new variable.

create a new user-defined variable on GTM

Step 3: Click on Variable Configuration and then, select a variable type.

click variable configuration

Step 4: Complete the configuration options for the selected variable type.

variable configuration options on GTM

Step 5: Name your variable and make it something descriptive of its function. Click the Save button.

Here’s a list of the variable types Tag Manager supports:

  • Navigation
  • HTTP Referrer
  • URL

  • Page variables
  • 1st party cookie
  • Custom JavaScript
  • Data layer

  • Page elements
  • Auto-event variable
  • DOM element
  • Element visibility

  • Utilities
  • Constant
  • Custom event
  • Lookup table
  • Random number
  • Environment name
  • Google Analytics settings
  • RegEx table

  • Container data
  • Container ID
  • Container version number
  • Debug mode

How to use variables for popup personalization

The only way to utilize Google Tag Manager for marketing isn’t just for tracking purposes. You can also combine it with the Popupsmart popup campaign builder to personalize your website popups and to prefill forms. Hee’s how:

GTM for Dynamic Text Replacement

Popupsmart has a dynamic text replacement feature called Smart Tags. Basically smart tags are dynamic texts in curly braces such as {{Name}} which dynamically change into the specified data such as the user’s name.

Of course, the Smart Tags must be fed with data first. In that respect, you can add the Popupsmart JavaScripted API to GTM by following the steps below.

Step 1: To set up a custom tag on GTM to feed the dynamic texts on your popup, enter the snippet code as below. Also, you may set up the variable types as you need; this is only an example.

<script> psMetaData.add({ name: {{variableName}} }) </script>

PSmetadata on Google Tag Manager

Step 2: Click on Triggering and the “+” sign to add a new trigger.

adding a new trigger on GTM

Step 3: Then, click on Trigger Configuration and select Window Loaded from the opening sidebar as seen below.

select windowloaded as trigger type

Step 4: You’ll see two options you may choose; All Windowloaded Events or Some Window Loaded Events.

  • If you choose “some,” then you need further configuration to use this trigger only on specific Page Hostname, URLs, Paths, or Referrers. Additionally, you can choose a built-in variable or add a new custom variable.
  • If this sounds advanced to you, just select All Windowloaded Events.

Don’t forget to save and publish the tag.

Now you have defined a new tag to feed the data on your popup. This tag will fire when the conditions match and add the info to the dynamic text.

Here’s an example popup created with Popupsmart:

dynamic popup example made with Popupsmart

The following are predefined smart tags available to use directly on your Popupsmart popups. The text following a colon ( : ) is for exemplary purposes of how the dynamic content will look.

{{ip”: “}},
{{date_MM_dd_yyyy}}: “03/05/2021",
{{date_MMMM_dd}}: “May 03",
{{date_dddd_dd_MMMM_yyyy}}: “Monday, 03 May 2021",
{{country}}: “United States”,
{{region}}: “Ohio”,
{{city}}: “Ohio”,
{{countryCode}}: “US”,
{{language}}: “Turkish”,
{{os}}: “Mac OS X 10.15",
{{browser}}: “Chrome 90.0",
{{referrer}}: “”,
{{utmCampaign}}: “”,
{{utmSource}}: “”,
{{utmMedium}}: “”,
{{utmContent}}: “”