A Guide to Referrer in Google Tag Manager

Updated: March 7th, 2023. When you create a new Google Tag Manager, you’ll see several built-in variables enabled by default. One of them is Referrer. What is it, and why is it useful? Let’s find out.

Here’s what you will learn in this article

• Video tutorial
• What is Referrer in GTM?
• Where can I find the Referrer?
• Be aware of the limitations
• How to identify issues if the Referrer is not returning what you expect
• A couple of use cases for Referrer
  • #1. Multiple forms that redirect to the same “Thank you” page
  • #2. Prevent random visits to your “thank you” page
• Frequently asked questions
• Final words

 

Video tutorial

If you prefer video content, here’s a tutorial from my Youtube channel.

 

What is Referrer in Google Tag Manager?

In a nutshell, Referrer is a GTM variable that returns a URL of the previous page that a visitor visited. So, for example, if I am browsing the site and go from example.com/page1 to example.com/page2, the value of the Referrer will be example.com/page1 (because that is the value of the previous page’s URL). Does this variable work only when I navigate pages between my own website? Not only that.

Is it possible to see the previous page if the visitor just landed on my site from another website? Yes, but to some extent. Due to privacy concerns, more and more limitations are affecting the Referrer. This is not just within Google Tag Manager but in general. The referrer is not just some GTM-specific thing. It is globally available on any website; anyone can access that value. That’s just how the web works.

However, there are more and more limitations introduced to referrers. Keep reading.

P.S. Your Google Analytics Acquisition reports heavily rely on the referrer variable too!

Where can I find the Referrer in Google Tag Manager?

There are multiple ways to skin the cat here. The most standard way is to use the built-in variable. In your GTM container, go to Variables, and you will find the variable in the Built-in Variables section.

You can also create a user-defined variable. Go to Variables > User-defined Variables > New > HTTP Referrer. In this case, you can extract a particular component of the referrer, e.g., the hostname.

Another option is to create a JavaScript variable (NOT Custom JavaScript) and enter the following value (without quotation marks) — document.referrer.

But this will work like the built-in variable (therefore, there is no need to create a user-defined variable).

 

Be aware of the limitations

This variable sounds incredible, right? You could fire tags based on the page your visitor came from. For example, if a visitor lands from a particular 3rd party page, you can fire a tag that shows a specific popup.

However, Referrer is being increasingly limited (due to privacy concerns) because Referrer is more and more heavily used for cross-site tracking. And gatekeepers like Brave or Safari (but not limited to) are making this much more difficult.

The limitations are constantly changing, and if you want to stay up-to-date, bookmark cookiestatus.com.

Here is a snapshot of how Referrer is being handled by popular browsers (click the image to see it in higher resolution).

Let me explain some parts of the screenshot above:

• Default browser policy means the referrer will be removed if a visitor navigates from https://www.some3rdpartywebsite.com to http://www.yourwebsite.com. It will not return any value. Why? Because the visitor navigated from HTTPS (secure) website to HTTP (insecure).
• Strip all cross-origin referrer to origin means that if a visitor goes from https://www.otherwebsite.com/posts/example to https://www.yourwebsite.com, the referrer will show only https://www.otherwebsite.com (/posts/example will be removed). So basically, you will be able to know just the domain but not the exact page from which the visitor landed on your site. Chrome 85 (and newer versions) apply this policy by default.
• eTLD+1 means the Top-level Domain (TLD) (e.g. .com, .co.uk, etc.) and one additional level (e.g. amazon.co.uk or cnn.com).

 

How to identify issues if the Referrer is not returning what you expect

First of all, let’s quickly take a look at referrer policies. They define what kind of data the website will pass to a Referrer.

• no-referrer (this means that no referrer will be passed (in other words, it will be empty in GTM)).
• no-referrer-when-downgrade (if a visitor navigates from an HTTPS page to HTTP, the referrer will be dropped. It will be empty in GTM)
• origin (this means that the referrer will always return only the hostname (e.g., www.example.com) of the previous page)
• origin-when-cross-origin (if a visitor navigates between different subdomains, e.g., a.domain.com and b.domain.com, only the hostname will be returned. If a visitor navigates from a.domain.com/page1 to a.domain.com/page2, the referrer will return the hostname, path, and query strings.
• same-origin (referrer will be available only if a visitor navigates between pages of the same subdomain)
• strict-origin (referrer will return value only if the visitor navigates from HTTPS to HTTPS
• strict-origin-when-cross-origin (returns hostname, page path, and query strings only when a visitor navigates on the same subdomain and from HTTPS to HTTPS). For example:
  • if a visitor navigates from www.example.com/pagepath to www.anotherdomain.com, the referrer will be just www.example.com (without /pagepath)
  • if a visitor navigates from blog.example.com/pagepath to www.example.com, the referrer will be just blog.example.com (without /pagepath). These changes started to apply for Chrome too (since version 85).
• unsafe-url (Referrer will always return a hostname, page path, and query strings. This is unsafe because the URL might contain sensitive data like email address, etc.)

You can learn more about the policies here.

Anyway, if you see an empty referrer way too often in your GTM preview mode, here are some ideas of what things to check (or if it returns the value that you did not expect):

• First of all, analyze the table I’ve previously shared. There are many browsers, and they each treat the Referrer differently. Rule of thumb, don’t rely on Referrer in GTM if you try to use very specific URLs of the previous page that does not belong to the same hostname. Otherwise, you’ll face various behaviours and inconsistencies in your data.
• Check what kind of referrer policy is implemented on your site. There are different ways how that can be implemented:
  • Directly in the hyperlink. If the clicked link (in the previous page) container “rel=noreferrer”, the referrer on the destination page will be empty. Check that with the “Inspect element” in the browser’s developer tools. Right-click on the link > Inspect Element:
    
    Also, referrer-policy might be implemented in the clicked link by adding an attribute referrerpolicy=”someValue”, e.g. referrerpolicy=”no-referrer” (in this case, Referrer will also be empty).

• Meta tag on the page. For example, if the previous page had a meta tag <meta name=”referrer” content=”origin”>, the referrer will only return the domain of the previous page. There are other possible values/settings of this meta tag. You can learn more about them here. Where can you find this meta tag? In the source of your site. Right-click somewhere on the previous page > View source, and then somewhere at the top of the code, you should be looking for the referrer meta tag.

If no policy is defined, the default will be used (no-referrer-when-downgrade) unless the browser is configured differently.

You can learn more about all of this here.

 

A couple of use cases for Referrer in Google Tag Manager

For inspiration, here are several ideas where you can possibly use the Referrer in your GTM setup.

 

#1. Multiple landing pages with forms that redirect to the same “Thank you” page

Let’s imagine that you have 20 landing pages with opt-in forms, for example:

• https://www.example.com/lp/landing-page1
• https://www.example.com/lp/landing-page2
• ……
• https://www.example.com/lp/landing-page20

When a visitor submits the form, he/she is redirected to the same Confirmation page (a.k.a. “Thank you” page). The URL is always the same for all submissions, regardless of the form: https://www.example.com/thank-you.

How can you track form submissions and identify which form was submitted? You can send the value of the Referrer with every GA event, like here:

In this example, the referrer event parameter will contain the URL of the previous page (the landing page where the form was submitted). Problem solved! Also, don’t forget to register “referrer” as a custom dimension.

I will talk more about this use case here.

 

#2. Prevent random visits to your “thank you” page

The problem with “Thank you” pages is that on some websites, they might be accessed a little too quickly. For example, a Google bot may have indexed that “Thank you” page. Maybe due to a mistake, even your website’s search displays that “Thank you” page in search results (obviously, your developers should fix that).

Let’s go back to my previous example with 20 landing pages. Let’s imagine that the only PROPER way to land on the “Thank you” page should be after the form is submitted on one of those 20 landing pages.

Every URL of the Landing page contains /lp/ in the page path. Why don’t you update your Pageview trigger in GTM (that activates on the “Thank you” page) and configure it to fire only if the previous page contained /lp/?

In that case, random visits from other parts of the site or other traffic sources will not cause false positives.

 

Frequently asked questions

Here are several questions I’ve noticed recently being asked online, so I thought to address them as well.

Can I access the previous page’s title? There is no easy way to achieve that. The referrer is related only to the URL of the previous page, not other attributes (like Title). To access the previous page’s URL, you must write some custom JS code that temporarily stores the previous page’s title. Another option is to ask a developer to push this information to the Data Layer.

Can I access the URL of the page visited before the previous page? In other words, is it possible to access the URL of 2+ pages ago? There is no easy way for that. You must also write custom code storing the info in the cookie or browser storage. Or, once again, contact developers to push this info to the Data Layer.

 

Referrer in Google Tag Manager: Final words

A referrer is a handy variable in GTM; however, you should be aware of the privacy and security-related limitations that can be implemented on a site or introduced by browsers (such as Safari or Brave).

My rule of thumb:

• try to use Referrer in your GTM tags or triggers only when things are happening on the same primary domain of your website (just like in the examples I’ve shared above).
• If you want to know the previous page (on a 3rd party website), always expect only the hostname (domain) at best. Don’t build triggers based on a specific page of the 3rd party website (with page paths and query parameters).

Also, keep an eye on cookiestatus.com. More limitations will be introduced, so you should stay current.

Have any questions? The comments section is at your service.