A Guide to Referrer in Google Tag Manager

Updated: August 3rd, 2020. When you create a new Google Tag Manager, you’ll see several built-in variables that are enabled by default. One of them is Referrer. What it is and why is it useful? Let’s find out.

 

Table of contents

• What is Referrer in Google Tag Manager?
• Where can I find the Referrer in Google Tag Manager?
• 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 in Google Tag Manager
  • #1. Multiple landing pages with 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 form 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. Not just GTM, but in general. The referrer is not just some GTM-specific thing. It is globally available on any website and anyone can access that value. That’s just how the web works.

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

P.S. Your Google Analytics Acquisition reports are heavily relying on referrer too!

Where can I find the Referrer in Google Tag Manager?

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

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

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

But this will work pretty much in the same way as the built-in variable (therefore, no need to create a user-defined var).

 

Be aware of the limitations

This variable sounds awesome, 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 limited more and more (due to privacy concerns) because Referrer is being more and more heavily used for cross-site tracking. And gatekeepers like Brave or Safari (but not limited to) are making sure that this becomes much more difficult.

In fact, 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 that if a visitor navigates from https://www.some3rdpartywebsite.com to http://www.yourwebsite.com, the referrer will be removed. 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 is 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. Update: Chrome 85 (and newer versions) will start applying this policy.
• 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 will the website pass in 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 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).Update: These changes start to apply for Chrome 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 behaviors and inconsistencies in your data.
• Check what kind of referrer policy is implemented on your site. There are different ways of how that can be implemented:
  • Directly in the hyperlink. If the clicked link (in the previous page) container “rel=noreferrer”, referrer on the destination page will be empty. Check that with the “Inspect element” in browser’s developer tools. Right-click on the link > Inspect Element:
    
  • Directly in the hyperlink (2). 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 in 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, Event Label will contain the URL of the previous page (the landing page where the form was submitted). Problem solved!

 

#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 easily. For example, Google bot may have indexed that “Thank you” page. Maybe due to mistake, even your website’s search is displaying 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). If you want to access the previous page’s URL, you would need to 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 that was 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 would also need to write some custom code that stores the info in the cookie or browser storage. Or once again, contact developers to push this info to the Data Layer.

 

Final words

A referrer is definitely a handy variable in GTM, however, you should be very much aware of the privacy-and-security-related limitations that can be implemented on a site or that can be 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 main domain of your website (just like in the examples I’ve shared above).
• If you want to know the previous page (that was on a 3rd party website), always be expecting 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). Even though that works fine on Chrome, a browser like CliqZ strips the referrer and only returns the hostname (without page path or query parameters). Actually, it looks like quite soon more browsers will follow the same way.

Also, keep an eye on cookiestatus.com. More limitations will be introduced in the future, so you should stay up-to-date.

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