Page Variables and Pageview Triggers in Google Tag Manager

So as you already probably know, Google Tag Manager is an amazing tool that lets you manage your tracking codes and activates them whenever you need it. With GTM, you can fire your tags whenever a visitor submits a form, clicks a link, etc.

But the most basic one (yet, still very crucial) is the moment when the page loads. You can instruct Google Tag Manager to fire a tag only on certain pages. That is possible thanks to two components: pageview triggers and page variables.

Table of Contents

• Pageview-based triggers
• Pageview-based trigger on a particular page
• Built-in page variables
• Page Path vs Page URL
• Custom Page variables
• Example of a Custom Page variable
• Multiple URLs in a single trigger
• Track page views in a single-page application
• Several ideas/examples where Page variables and Pageview triggers are useful
• Page Variables and Triggers in GTM: Final Words

 

Pageview triggers

When you create a new Google Tag Manager container, it already contains one default trigger – All Pages. Although you cannot see it in the list of triggers, you can find it when you try to create a new tag and click its “Triggering”.

This trigger cannot be deleted and it fires every time a Google Tag Manager container loads on a page. And that obviously happens on All Pages.

If you want to customize this behavior and fire a certain tag just on some pages, you need to create a new trigger. In GTM interface, go to Triggers > New > Trigger Configuration. You will see 3 types of triggers:

• Page View. This is the earliest moment when you can fire your tags. This is the moment when GTM container loads.
• DOM Ready. This is the 2nd stage of the page loading process. This trigger is activated when the page’s document object model is loaded. In other words, the browser has rendered elements on a page.
• Window Loaded. This is the final stage of the page loading process. It means that the page is fully loaded (including with 3rd party scripts).

Which one to choose?

• If you want to fire a tag ASAP on a page (and that tag does not rely on other website elements, their content/text/etc.), then use this trigger type.
• If you want to fire a tag and it must send a value of a particular website element (e.g. its text), then you should use DOM Ready trigger or Window Loaded
• If you want to fire a tag and be sure that before that, the page has fully loaded, then use Window Loaded trigger.

 

Pageview trigger on a particular page

Let’s say that you have created a Page View trigger and want it to be activated only on page X. To achieve this, you need to click Some Page Views and then enter the condition, for example, Page Path equals /pages/contact-us/

But which variable should you choose when? Let’s find out.

 

Built-in page variables

Currently, Google Tag Manager offers 4 standard page variables

• Page Hostname
• Page URL
• Page Path
• Referrer

By default, they are all enabled and you can find them by going to the Variables section of your GTM container.

If you click the Customize button in the top right corner of the built-in variables list, you will also see them being enabled. Let’s take a quick look at what each variable means:

• Hostname returns the hostname (domain) of the URL without, e.g. www.example.com
• Page URL returns the full URL without the hash fragment (#), e.g. https://www.example.com/welcome?gclid=aabbcc123
• Page Path returns only the pathname in the URL (in other words – everything after the hostname, except port, fragment, and query). If the page URL is https://www.example.com/welcome?gclid=aabbcc123, this variable would return /welcome/ value.
• Referrer returns the page address that a visitor previously visited (including query parameters) and then landed on the current page. But due to various privacy changes in the industry and configurations on a page, this variable can return an empty value or just the hostname.

 

Page Path vs Page URL

If you’re just starting with web tracking and have absolutely no prior technical knowledge of the web, you might be confused about which variable to use when. Let’s take a look.

Page Path returns way less info compared to the Page URL. Page Path returns only what comes after the hostname (domain) but before the question mark “?” (a.k.a. query parameters), hashmark “#” (a.k.a. URL fragment), colon “:” (a.k.a. port).

It just returns the subdirectory (page) on which you currently are.

If you want to also use query parameters (e.g. utm_parameters) in your triggers, then Page Path variable is a wrong choice. You should instead use the Page URL because it returns:

• protocol (e.g. https://)
• hostname (e.g. www.example.com)
• page path (e.g. /pages/contact-us/)
• query parameters (e.g. ?utm_medium=referral&utm_source=othersite.com)

To sum up, the difference between the Page URL and Page Path is that Page URL returns almost the entire URL while Page Path just returns the value that comes after the hostname (but before the query parameter).

If on the other hand, you want to isolate and access only other parts of the URL (but without getting the full URL, you will have to rely on custom page variables. Continue reading and I’ll show you how.

Custom Page variables

Another amazing thing in GTM is its customization possibilities. If the built-in functionality is not enough for you (it probably won’t), you can do some awesome user-defined stuff.

In Google Tag Manager’s interface, go to Variables and scroll down till you see the User-defined variables section. Click new and choose URL variable.

The URL Variable can be used to access components of the current page URL. This is a very versatile Variable type, and is especially useful for traversing query parameters and hash fragments in your URLs. Note: There are Built-In Google Tag Manager Variables for some situations (i.e. Page URL, Page Hostname, Page Path).

Let’s say the address of the web page that I am currently on is https://www.example.com/welcome:8080?gclid=aabbcc123#home. Now I will describe every component type that is available in the URL variable:

• Full URL – returns the full URL without the hash fragment, e.g. https://www.example.com/welcome?gclid=aabbcc123.
• Protocol – returns the protocol of the URL, e.g. https.
• Host Name – returns the hostname of the URL without the port number, e.g. www.example.com. You can choose to Strip ‘www.’ to strip the ‘www’ subdomain from the hostname.
• Port – returns the port number used in the URL. In my example, the variable will return 8080 value. Or 80 for HTTP / 443 for HTTPS, if the URL had no port number.
• Path – returns only the pathname in the URL (in other words – everything after the hostname, except port, fragment, and query). In my example, I would get /welcome/ value. You can also specify Default Pages to strip pages with names like ‘index.html’ or ‘index.php’ from the return string.
• Query – returns the entire query parameter string (without leading ‘?’), if you don’t specify a query key. In my case I could specify query key to gclid, thus URL variable’s value would be aabbcc123. If you do specify a query key, but that key is absent, the variable’s value would be undefined.
• Fragment – returns the value of the URL’s fragment without the leading ‘#’, in my case value would be home.

You can expand the More Settings tab to find a source selector. In this selector, you can choose the Variable whose return value the URL Variable will access (for example, Click URL). But by default, the URL variable returns parts of the Page address.

 

Example of a Custom Page variable

If you’re using an email marketing tool, you’ve probably already noticed that after a recipient clicks a link in your email, he/she is redirected to your website. The link contains a lot of parameters after a question mark, e.g. https://www.mybusiness.com/?utm_campaign=awesomecampaign&utm_source=campaignid&utm_medium=email.

These 3 query keys are called UTM parameters. They are especially useful when it comes to tracking campaigns in Google Analytics.

You can easily turn utm_campaign, utm_source and utm_medium into GTM variables and then utilize them in triggers or tags. Just create three variables with the following settings:

After you have created these three variables, enable Preview and Debug mode in GTM and head to the website where you’re working on. At the end of URL add ?utm_medium=test1&utm_source=test2&utm_campaign=test3. If the URL you’re working on already has some query (it starts with a question mark), then just add &utm_medium=test1&utm_source=test2&utm_campaign=test3 to the end of the link and hit enter.

The page will refresh, GTM Preview and Debug console will load. Click on any event (e.g. Page view) and open the Variables tab. The result should look like this:

Now you can use these variables in your triggers if you wish. Of course, an alternative solution could be to use the condition: Page URL contains utm_medium=xxxxxx.

But if you want to pass the actual value of utm_medium with some tag, then the URL variable is irreplaceable here.

 

Multiple URLs in a single trigger

In some cases, you might want to fire a tag on ONE of many possible pages (e.g. if a visitor visitors ANY of 5 pages, you want to fire a tag). What I’ve noticed among beginners is that they try to create the following trigger:

Unfortunately, this will not work because ALL of the conditions must be met in a trigger. And if you add 5 different URLs in a trigger, it’s impossible for a trigger to fire (because a page cannot have 5 different URL at the same time).

So you have a couple of options here:

• Option #1: Create a separate pageview-based trigger for EVERY pageview and then add ALL of them to the tag. If at least one of those triggers gets activated, the tag will fire. But this solution isn’t very scalable and can turn your GTM container into a mess really quickly.
  
• Option #2: Create a single trigger that uses Regular Expressions. RegEx allows you to write more complex conditions including “OR”. So if you want to target, say, 2 URLs, you can take their parts and separate them with a pipe | . This symbol in Regular Expressions means “OR”. Here’s an example:
  • /pages/contact-us/|/pages/other-page

See? I just separate parts of the URL with a pipe |Of course, you will need to choose Matches RegEx (ignore case) to make the trigger work

 

Track page views in a single-page application

Unlike traditional websites, single-page websites/apps require additional configuration to make your pageview tracking correct. I’ve published a guide about this exact topic so make sure you check it out.

 

Several ideas/examples where Page variables and triggers are useful

If you’re just starting with Google Tag Manager, here are several ideas to get you inspired by GTM’s possibilities.

• Thank you page tracking (when a visitor submits the form and is redirected to another page)
• Enrich form submission data (take the values of UTM parameters in the URL and send them together with form submission data)

 

Page Variables and Triggers in GTM: Final Words

In today’s blog post, we took a look at the fundamental functionality of Google Tag Manager – firing triggers when the page loads. With the help of page variables and pageview triggers you are able to decide when exactly to fire your tags, for example:

• On certain pages as soon as Google Tag Manager loads
• On certain pages when the website has fully loaded and so much more!

Were you looking for some other answer to this topic? If yes, please leave a comment below and I’ll get back to you asap.