MeasureSchool logo
Search
Close this search box.
Search
Close this search box.

How to Track Initial Traffic Source with Google Tag Manager

Last Modified on January 4, 2024

🚨 Note: If you’re using GA4, we are covering that part in our other blog post.

Google Analytics attributes your traffic source to a user’s location before entering a session — but it Additionally, if you wish to optimize your site one step further, you can analyze the overall traffic on your website and compare it wwon’t track their first contact with your website if there are intermediary pages or sessions.

GTM For Beginners

Sign up to the FREE GTM for Beginners Course...

If you want to know your traffic’s initial source before landing on your website, you’ll need the help of Google Tag Manager.

In this guide, we’ll learn to track initial traffic source by installing cookies on a user’s browser and accessing the cookie data in Google Analytics and Google Tag Manager.

An overview of what we’ll cover: 

So let’s start!

Why Track the “Initial” Traffic Source of Users?

You probably already know how to view the source data of a user on your website in Google Analytics. This data indicates the source from which a user landed on our website.

However, this data is not entirely correct.

Google Analytics finds source data primarily through sessions. Sessions can only provide relevant information about where a user came from last, then use the attribution method. They aren’t very effective in finding the initial source that brought users to your site.

To track the initial source of a user, you’ll need to set up explicit mechanisms for that specific purpose. In this guide, we’ll learn to do it with the help of Google Tag Manager. 

We’ll also learn to forward this data into our Google Analytics account so that we have it available as a custom dimension. 

Acquisition Reports in Google Analytics

We can track user movements primarily with the help of Acquisition reports in Google Analytics. 

Let’s open Acquisition → All Traffic → Source/Medium

Every time a new session starts, Google Analytics will check the source of action for that user to land on the website. 

All such sources will be mentioned in this report, such as Google search, email, Facebook traffic, or any other sources. 

Accessing the Source/Medium reports from the Acquisition channel of Google Analytics to track traffic sources

However, we want to track the very first traffic source that led the user to our website. We’ll execute this action by implementing some custom JavaScript via Google Tag Manager. 

You can also use a modified version of the custom JavaScript codes from the UTMZ replicator.

Set Up GTM Tag to Read the Initial Traffic Source of Visitor

Our first action will be to build a custom JavaScript Tag. 

The code in this Tag will read various data like the UTM parameters, the referral data, and other information related to the source of the traffic. 

We’ll collect this information with a first-party cookie and install it on our Tag. 

Let’s open a new Tag on the Google Tag Manager. 

Our Tag type will be a Custom HTML Tag. We can configure this Tag by adding the code script in the HTML tab below the Tag type. 

It’s a bit long, so you can copy and paste the full script from our GitHub repository

Configuring a custom HTML Tag and adding an HTML script to the Google Tag Manager to track initial traffic source

We’ll also add an All Pages trigger to our Tag. This is because we want our Tag to fire on all the pages that a user visits. 

Lastly, give a Name to the Tag and click on Save

Configuring an All Pages trigger to a custom HTML Tag in Google Tag Manager to track initial traffic source

To verify that the Tag works correctly, go to the Preview mode in Google Tag Manager and refresh the website.  

We’ll need to check whether the cookie that tracks the user’s initial source fired or not. So let’s open the developer settings to check the cookie configurations. 

If you’re using Chrome, you can open your browser menu and go to More → More Tools → Developer Tools

Accessing developer tools for a website from the Chrome browser

Go to Applications → Cookies and open the cookies we’re currently working on. In our example, it is the cookie called initialTrafficSource (see lines 116 and 117 in the JavaScript code).

The value of the cookie will indicate the UTM campaign source for the cookie. In this example, the source is direct. The UTM campaign medium is none, and the UTM campaign name is not set

Accessing and analyzing the initialTrafficSource cookie from the developer tools section of the browser

The reason for these parameters is that we just opened our website page directly by using the page address.

We’ll get a different result if we instead enter this web page from a Google Search. 

However, before testing our cookie for any different results, make sure to delete the previous initialTrafficSource cookie in order to avoid miscalculation of the source of traffic!

Then, let’s search our website on Google and open the link generated by the browser to see the results that we get. 

Accessing the website link through Google organic search

In this case, the custom HTML Tag will fire successfully. 

Verifying the fired custom HTML Tag from the Google Tag Manager

Let’s also see the results generated by the cookie by reopening it. 

In this case, our initial traffic source is Google organic, and the campaign name and keyword are not set. 

Analyzing the initialTrafficSource cookie from the cookies section of developer tools in the browser

If configured correctly, the cookie works perfectly as expected. 

One important thing to note here is when a user lands on a webpage, the Google Tag Manager with a custom JavaScript will check whether an initialTrafficSource cookie exists on the browser. 

In case there isn’t any cookie, the browser will create a cookie for the user. However, if a cookie already exists, the browser will not take any action in order to save the original data. 

Process of creating an initialTrafficSource cookie in any browser

🚨 Note: If the initialTrafficSource cookie already exists in a browser, Google Tag Manager will not override it and will instead keep the original data. This means that once a user has visited your site for the first time, you will always be able to track their initial visit source (unless they have cleared your cookie).

Google Tag Manager can’t recognize this information by default. Hence, we need to create a variable that reads the initialTrafficSource cookie. 

Let’s see how! 

Create User-Defined Variable

If you haven’t configured a variable to interpret your initial source data yet, you won’t find this data in your GTM preview console’s variable section for events. Even though the cookie records this data, GTM doesn’t know to look for it or relay it to your analytics tools.

Hence, we’ll need to create our own user-defined variable.

Verifying a variable from the Google Tag Manager extension on the website

Let’s create a new variable from inside our Google Tag Manager account. 

We’ll select the 1st Party Cookie variable type. Let’s add our cookie name as initialTrafficSource

We’ll add a name to the variable, and click on Save

Creating the 1st party cookie variable for initialTrafficSource cookie on Google Tag Manager

Let’s refresh the preview mode as well as our website. 

We’ll open any one event from the Tag Manager extension on our website and navigate to the Variables section. 

We can see that the variable section now shows a section for the data recovered from the initialTrafficSource cookie. 

Verifying the initialTrafficSource cookie information from the variable section of Google Tag Manager extension on the website

We’ll try to extract this data into our Google Analytics account as a custom dimension. 

Let’s see how! 

Creating a Custom Dimension in Google Analytics

Let’s open our Google Analytics account. 

We’ll navigate to Admin Settings → Custom Definitions → Custom Dimensions → New Custom Dimension

Accessing custom dimension section in Google Analytics to create a new custom dimension - initial Traffic Source

We’ll add the name of the dimension as the initial Traffic Source, and keep the scope as User. Once done, click on Create

Configuring an initial Traffic Source custom dimension from the Google Analytics account

Here, we’ll be able to see the dimension of our JavaScript code. We’ll copy the dimension number to use in our variables. 

Copying the dimension value of the initialTrafficSource custom dimension

We’ll update our Google Analytics Settings variable according to the given dimension. 

Let’s open our variable and navigate to More Settings → Custom Dimensions → Add Custom Dimension → Index

We’ll paste the value of the dimension that we copied earlier. 

Next, we’ll click the plus icon on the Dimension Value to add a value. We’ll choose the value as Cookie – initialTrafficSource

Once done, let’s click on Save

Configuring the custom dimension value and the dimension index in a Google Analytics settings variable from the Google Tag Manager account

Let’s see what’s next! 

Setting Up Tag Sequencing

One important thing to make sure of while creating the setup is to fire the cookie before firing the Google Analytics Tag. 

Let’s open our Google Analytics preview Tag to modify the configuration accordingly. 

We’ll navigate to Advanced Settings → Tag Sequencing

Accessing Tag sequencing option from the advanced settings section of the Custom HTML Tag

As we want to fire our custom HTML Tag to fire before this Tag fires, we’ll click on Fire a tag before GA Preview fires

We’ll choose our custom HTML Tag to fire before the GA Preview Tag fires. 

Click on Save once done. 

Configuring the custom HTML Tag to fire before the Google Analytics Tag

Hence, when a page loads, the custom HTML Tag will fire first, then the Google Analytics page view Tag will follow. 

As the custom HTML Tag fires first, it will configure the initial traffic source information in the cookie. 

As we’re firing our custom HTML Tag before the Google Analytics page views Tag every time, we can remove the All Pages Trigger associated with our custom HTML Tag. 

Once removed, our custom HTML Tag won’t have any triggers attached to it. However, it will still fire because we’ve put this as a priority in the sequencing of our Tags to fire. 

You’ll also be able to see the GA preview Tag, and the information that our custom HTML Tag will fire before the GA Preview Tag in the trigger configuration itself. 

Once done, click on Save

Removing the All Pages trigger from the GA Preview Tag

Let’s test how this implementation works! 

Testing

Before starting to test our implementation of cookies, we’ll first delete the stored data from the initialTrafficSource cookie. 

Deleting the data from the initialTrafficSource cookie

We’ll also Enable the Google Tag Assistant Chrome extension. 

Enabling the Google Tag Assistant Legacy extension from the browser

Let’s refresh our website page to see the results! 

We can see that our custom HTML Tag has fired successfully. 

Verifying the fired Tags from the Google Tag Manager extension on the website 

Let’s also open the developer tools to see how the cookie performs. 

If configured correctly, our initialTrafficSource cookie will show that the initial traffic source is a direct source, and the medium is none. 

Examining the results from the initialTrafficSource cookie in the website browser

Correct installation means half of the job is done successfully. 

Let’s also open our Google Analytics Pageview Requests from the Google Tag Assistant. 

Accessing the pageview requests from the Google Tag Assistant extension 

We’ll navigate to the Custom Metrics tab. 

Here, we’ll be able to see the Custom Dimension value as well as the cookie value. 

This value will be the same as the one we see in the initialTrafficSource cookie from the developer tools. 

However, the representation will also have basic code instead of direct values as given in the initialTrafficSource cookie. 

Examining the custom metrics results from the Google Tag Assistant extension on the the browser 

Let’s also see how this report looks in Google Analytics! 

Let’s open our Google Analytics account. We’ll navigate to Acquisition → Source/Medium. We’ll be able to see the sources of various visitors on our website. 

Accessing the Source/Medium reports from the Acquisition channel of Google Analytics to track traffic sources

Additionally, you’ll also be able to see the first initial source of the visitors by adding a Secondary dimension

We’ll enter the secondary dimension as the Initial Traffic Source

Configuring the initial traffic source as a secondary dimension in the Google Analytics source/medium reports

As a result, you’ll be able to see not only the last known source but also the initial source for the traffic on your website. 

Examining the initial traffic sources from the Google Analytics source/medium reports section

This will help you greatly in analyzing insights on how the traffic sources are contributing to increasing the success of your business. 

One additional point to note here is that the data from the sources might not start appearing right away. It can take up to 24 hours to appear on your results. 

It also won’t be available in the Real-Time reports because they don’t display custom dimensions. 

Let’s also understand the limitations of the process. 

Limitations

One of the major limitations of the process is that it uses cookies. 

Hence, if a user visits our website from another device or simply removes all the cookies from their browser, we’ll lose all the cookie-based data we have for the user. 

So now when the user comes back to the website, our cookies will track the latest data as the initial source of visiting for that user. 

This data will be inaccurate as this will be the new data values that may not be correct. 

Another potential drawback is that if you’re using cross-domain tracking, and a visitor navigates from one of your websites to any other website that you are tracking, you may see a case of self-referral. 

This is because our custom script doesn’t support the referral exclusion list of Google Analytics settings. Hence, you may see self-referrals in your Google Analytics reports.  

One other limitation is that if a user visited your website before you configured the cookie settings, there’s a high chance that your collected data will be inaccurate for those users when they revisit your website. 

This is because our method can’t retroactively track the historical movements of the users on any website. Hence, we’ll only be able to track the new users correctly and accurately. 

However, if you want a robust solution for such instances, you can ask your developer to configure the initial traffic source to the Data Layer of the website. 

This way, you can push this data into your Google Tag Manager container and then use it in your Google Analytics or other third-party tools. 

FAQ

How does Google Analytics track traffic sources?

Google Analytics attributes traffic sources based on the user’s location before entering a session. However, it may not track the user’s first contact with your website if there are intermediary pages or sessions.

Why do we need Google Tag Manager to track the initial traffic source?

Google Tag Manager enables the implementation of custom JavaScript code that collects data on the initial traffic source and stores it in a cookie, providing more accurate information about user acquisition.

What are the limitations of tracking the initial traffic source with cookies?

One limitation is that if a user visits your website from another device or clears their cookies, the cookie-based data on the initial traffic source will be lost. Additionally, if a visitor navigates from one of your tracked websites to another, you may see self-referrals in your Google Analytics reports. The method also can’t retroactively track historical user movements on your website.

Summary

So that’s how you navigate the initial traffic source of a visitor on your website and process it into your Analytics tools! 

This data is especially useful when you want to optimize the navigation of your website and boost its rankings based on user movements. You can also optimize further by using Google Analytics to improve website navigation

Additionally, if you wish to optimize your site one step further, you can analyze the overall traffic on your website and compare it with various initial traffic sources that you find!

Were you able to successfully install the initialTrafficSource cookie on your website? Did you face any of the limitations of the website we discussed? Let us know in the comments below! 

MeasureMasters

REOPENED!

Master Data & Analytics with MeasureMasters

Exclusive Courses & Workshops | Ongoing Troubleshooting | Support Resources, Tools & much more
Subscribe
Notify of
guest
14 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ellen Caywood
Ellen Caywood
5 years ago

This is a great process, thanks! I am almost done with it but am stuck on 8:02 with the tag sequencing. I already have a tag set to fire before the pageview. Anyway to have two?

Henk
Henk
4 years ago

Thank you for the clear explainer video. I installed it correctly and it’s working, but I have one question. My google ads are only showing the source and medium, so google / cpc, but the campaign etc are (not set). While my other source / mediums, like Facebook and Binq are showing this data correctly. Do you know how I can solve this or has this something to do with the code that can not fully read the autotagging from my Google Ads?

Henk
Henk
4 years ago

Yes

Joseph
Joseph
3 years ago

Hi Julian, tried the process. For some reason, the tag continues to fire after GA tag. Do I need to edit the tag in any way?

Joseph
Joseph
3 years ago

Julian, thanks for your reply. Not sure I understand your answer. The earlier comments do not have a similar problem. I have done everything right but the initial source tag still fires before GA tag.

Joseph
Joseph
3 years ago
Reply to  Joseph

Sorry I mean after

Mein-Reifen-Guru.de
Mein-Reifen-Guru.de
2 years ago

Great content! Keep up the good work!

Francesco
Francesco
1 year ago

Hi Julian great guide as always! Thank you for your great work.
I need to know if it’s possible edit the dureation of cookie expires. Following this guide the script create a cookie with 2 years of expiration and it seems to much time for me. How can I edit the expiration to 1 year? Thank you!

Otávio
Otávio
10 months ago
Reply to  Francesco

on line 28 you’ll can change expiration time:

var cookieExpiration = new Date(+new Date() + 1000 * 60 * 60 * 24 * 30 * 24);

GSH
GSH
10 months ago

Does this work despite GA4?

Prins
Prins
5 months ago

Hi, I have tried this and works perfectly, but out of 50 leads only 10 leads we capturing data from cookies, and others are null, is there any reason? its or depending on browser

Ready to switch to GA4? Subscribe & Get our FREE Course

GA4 for Beginners Course

Want to find the Best Sources for Learning GTM? Subscribe & Get our FREE Resource Guide

Google Tag Manager FREE Resource Guide

now it's time to

Start measuring like a master

Itching to jump into the world of MeasureMasters? This is what you have to look forward to.

Ready to take your digital marketing to the next level?

Subscribe to our newsletter and stay ahead with our latest tips and strategies.