How to Track Initial Traffic Source with Google Tag Manager

🚨 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.

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: 

• Initial traffic source of users
• Acquisition reports in Google Analytics
• Setting up GTM Tag to read the initial traffic source of the visitor
• Creating user-defined variable
• Creating a custom dimension in Google Analytics
• Setting up Tag sequencing
• Testing
• Limitations 

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. 

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, created by the team of Bounteous (formerly LunaMetrics). 

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. 

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. 

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. 

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. 

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. 

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

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. 

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. 

🚨 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.

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. 

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. 

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. 

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

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

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. 

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. 

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. 

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. 

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. 

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

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

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

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. 

Correct installation means half of the job is done successfully. 

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

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. 

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. 

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. 

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. 

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

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!