🚨 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 won’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
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.
Set Up GTM Tag to Read the Initial Traffic Source of Visitor
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.
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.
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.
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!
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.
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.
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!
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?
No, not two, but you could sequence them in order to be fired before. You simply make that tag a setup tag of the other tag you already have sequenced.
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?
are you using Google Ads Auto Tagging feature?
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?
you can read the comment before and setup your tag sequencing
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.
Sorry I mean after
Great content! Keep up the good work!
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!
on line 28 you’ll can change expiration time:
var cookieExpiration = new Date(+new Date() + 1000 * 60 * 60 * 24 * 30 * 24);
Does this work despite GA4?