How to Set up a Custom Variable using GTM [Variable Guide]

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?

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.

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.

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

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>

‍

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

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

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:

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”: “3.23.78.141}},
{{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}}: “”