How To Track The Initial Traffic Source with GTM (feat. Julius Fed from AnalyticsMania)

Google Analytics by default attributes the last known source to the User. But what if you wanted to know which source initially led to a conversion?

In this video, Julius from AnalyticsMania will show us how we can track the initial source of traffic, save it to a cookie and port it into a custom Dimension.

#InitialTrafficSource
#GoogleTagManager
#Measure

🔗 Links:

Script used: https://gist.github.com/measureschool/47a5ec08dff86ca117196abf5ce746f4
AnalyticsMania: https://www.analyticsmania.com

🎓 Learn more from Measureschool: https://measureschool.com/products

🚀Looking to kick-start your data journey? Hire us: https://measureschool.com/services/

📚 Recommended Measure Books: https://kit.com/Measureschool/recommended-measure-books

📷 Gear we used to produce this video: https://kit.com/Measureschool/measureschool-youtube-gear

👍 FOLLOW US
Facebook: http://www.facebook.com/measureschool
Twitter: http://www.twitter.com/measureschool
LinkedIn: https://www.linkedin.com/company/measureschool

In this video, Julius is going to show you how you can track the initial source from where your user came from in Google Analytics. All and more, coming up.

Hey there and welcome back to another video of measureschool.com teaching you the data-driven way of digital marketing. My name is Julian. But today we have a guest and he’s back on the channel again. Julius from Analytics Mania has joined us to show us a new tracking technique. Now, you probably know in Google Analytics, how to view your source data and where your user that came from. Well, that’s oftentimes just half the truth because it’s heavily based on sessions, which means that you really just know where your user that came from last but not initially. If you wanted to track that you would need to explicitly track it in Google Tag Manager, for example. Now today, Julius is going to show us how we can track that information in Google Tag Manager, and then forward this on to Google Analytics. So we have it available as a custom dimension. Now we’ve got lots to cover. So Julius, take it away.

Thanks, Julian. One of many awesome Google Analytics features is acquisition reports. Thanks to this information, you’re able to see where your users are coming from, whether it’s a Google search, email, Facebook traffic, or any other sources. Every time a new visitor session starts, Google Analytics checks where that visitor is coming from. But what if you want to track the very first traffic source that drove the visitor to your website? Luckily, that is possible with the help of Google Tag Manager and some custom JavaScript. Before we continue, I would like to mention that custom JavaScript that I will use during this video was based on the UTMZ cookie replicator created by the team of Lunametrics. But keep in mind that the code that I will use is a bit modified compared to the Lunametrics code. All right, so let’s start. Here I have a Google Tag Manager container that has two items in it, the Google Analytics page view tag and Google Analytics settings variable. Now, the first thing that we need to do is to get a JavaScript code that reads the UTM parameters, the referral data, and all other information related to the traffic source of the visitor. And that information is then stored in a first party cookie that we will use in our Google Analytics tag. And here is the script itself, you will find the link to this code in the description of this video. So just let’s copy it and go to Google Tag Manager tags,

create new tag, tag configuration, choose custom HTML and paste the code. Let’s name the tag, CHTML, which stands for Custom HTML. And let’s call it Set that initial traffic source.Let’s fire it o n all pages, at least for now. And let’s take a look at how it works in action. Hit the Preview button and go to the website that you are currently working on. Click Refresh. And here’s our preview and debug mode. Now, we need to check whether the cookie that contains the initial traffic source information was actually created. If you are on a Chrome browser, collect this three dots in the top right corner and choose more tools, developer tools. Go to application, and under the storage section, choose cookies and click the domain that you are currently working on. Keep looking for a cookie that this called initial traffic source, here it is. And as you can see, the UTM campaign source is direct, UTM campaign medium is none, and UTM campaign name is not set. That is because I landed on this page just by entering the address in the address bar. Now let’s see how our custom JavaScript code works under the circumstances. But before we do any test with that code, first, you need to delete the initial traffic source cookie. So let’s do that. And now let’s imagine that I want to find on Google search Analytics Mania. And if I click this link, let’s see what happens. As we can see our custom HTML tag that says the cookie has fired successfully. Now let’s go to our cookie list and see what happens there. Our initial traffic source this time is Google organic and campaign name and the keyword are not set. So as you can see, the custom JavaScript works as expected. And now let’s proceed to another step. By the way, it’s worth mentioning that when a visitor lands on a page, the Google Tag Manager with that custom JavaScript checks whether the initial traffic source cookie exists on a browser. If it doesn’t exist, then the cookie is created. If it does exist, then the script does nothing. So this means that if the initial traffic source cookie exists in a browser, Google Tag Manager will not override it and keep its original data. The next step that we need to do is to create a variable that reads the initial traffic source cookie. Why because by default, Google Tag Manager does not recognize this information. Because for example, if we click on window audit event and go to variables, you will not find any information related to the initial traffic source. So in order to read that cookie and turn it into a variable in Google Tag Manager, we need to go to Google Tag Manager, click variables, and create a new user-defined variable. Choose the first party cookie type and enter the initial traffic source. That’s called the cookie. Click Save. And let’s test whether it’s working properly. So refresh the preview and debug mode. Always refresh the preview and debug mode first, and then go to the website and refresh the page. Choose any event you want. For example, page view. And let’s click variables. What you’ll see is that the cookie, the variable actually returns the value of the cookie. Now what we want to do is to push this data to Google Analytics as a custom dimension. First, let’s go to Google Analytics and create a custom dimension. Go to admin, choose the property where you want to create a custom dimension, choose Custom definitions, custom dimensions, and create a new custom dimension. That is called initial traffic source, choose the scope of the user and create a new dimension. What we see here is that the index of our dimension is one that’s copied. And let’s go to Google Tag Manager and update our Google Analytics settings variable.

Let’s expand the settings of our variable, click More Settings, then choose Custom Dimensions and enter the custom dimension. And we want to pass to the custom dimension number one, the value of our cookie variable. So click the button right here, and choose the cookie initial traffic source variable. Click Save.

Now one last thing that we need to do is we need to make sure that the cookie is set first before the Google Analytics tag fires. Therefore, what we need to do is we need to go to the tags section and click on our page view tag and go to Advanced settings and click the tag sequencing. We want our cookies setting tag that custom HTML tag with custom JavaScript, we want it to fire before that Google Analytics page view tag fires. So here’s how it works. When the page loads, this custom HTML tag will fire first. And after that tag has fired, then Google Analytics page view tag will follow. And it will use the cookie that was created by this custom HTML tag, click Save. You don’t need to set the custom HTML tag and tax sequencing on all Google Analytics tags, it’s completely enough to set it on only Google Analytics page with that because when the page loads, then this tag will fire first, it will set the initial traffic source cookie. If that cookie does not exist yet, then the page view tag will fire. Since we configure the custom HTML tag to fire every time before the Google Analytics page view tag, we can now remove the all pages triggered from that custom HTML tag. So let’s do that. Let’s close this one, go here and remove the all pages trigger. This tag will not have any triggers set but it will fire anyway. Because we have included that this tag and the tag sequencing. And that is displayed right here. So click Save. Last but not least, and it’s very important, we need to test whether this implementation works properly. First of all, let’s refresh our preview in debug mode, go to the page that we are currently working on. And let’s delete those cookies. Because we want to test everything from A to Z. So go to developer tools. And let’s remove the cookie that is initial traffic source. Enabled assistant Chrome extension. And finally, let’s refresh the page.

So what happened right here is that our custom HTML tag has fired successfully. Well, at least we think that it fires successfully. Now, let’s check whether it did the job correctly. Let’s go to developer tools, application. And then we see that our initial traffic source has been set and the traffic sources direct and medium is none. So half of the job is completed successfully. Now, let’s go to the tag assistant Chrome extension, click on Google Analytics and see what data was passed over to Google servers. So click here. And we see that there is a tab called custom metrics. So we see that in as a custom dimension number one the value of our cookie was set. Now do not fear, it doesn’t look that nice compared to the value of our variable right here. That’s because the equal sign is encoded right here. But if we check the Google Analytics reports, we will see that this strange code will be actually displayed properly as an equal sign. Let’s take a look at how the initial traffic source looks in Google Analytics reports. So head over to Google Analytics. Here, I have the acquisition reports of source and medium. And with the default GA functionality, you are able to see the last traffic source that was attributed to goals. Of course, if I had some data right here. But thanks to the initial traffic source, you’re also able to see what was the very first traffic acquisition source of those visitors. So you can do that by adding a secondary dimension and the initial, and here it is.

And here’s the data. Ignore the first line I was just playing around with that custom HTML tag. So this is the result. But as you can see, everywhere else, we see not only the last traffic source but the first one as well. So this might give you some new ideas and insights on how traffic sources are contributing to the success of the business. Now, another thing that you need to keep in mind is that this data will not appear in your GA reports right away. It is not available in real time reports, because real-time reports do not display custom dimensions. Also, this data will not appear pretty soon in your regular GA reports. For example, in my case, it takes up to several hours. But usually, I am ready to wait for up to 24 hours. So this is a really important thing to remember. So that’s it. Now we know how to track the initial traffic source of a visitor. This allows you to see the very first source from which the visitor landed on your page.

Now, before you start implementing the solution by yourself, you need to understand the caveats of this solution. First of all, it is based on cookies. So that means that if a user visits your website from another device, or the visitor just simply clears the cookies in the browser, the initial traffic source data will be lost. And when the visitor lands on the page, again, the initial traffic source will get some new value, which will probably be inaccurate. Another caveat is that if you are using cross-domain tracking, and if the visitor navigates from one website that belongs to you to another, there’s a chance that you will see the self-referral data. And unfortunately, this script does not support the referral exclusion list of your Google Analytics settings. That’s why you might see self-referrals in your Google Analytics reports. Additionally, if a person has visited your website some time ago before you implement this initial traffic source tracking solution, there’s a high chance that the value of the initial traffic source parameter will not be accurate, because the script cannot access the historical data of the visitor. However, if you want to go with a more robust solution, you should cooperate with a developer and ask that if the developer would push the initial traffic source data to the data layer. And then you would use that data in your Google Tag Manager container and push that further to Google Analytics or some other third party tools. So that’s it. I hope that you found this video useful. And if you have any questions, just post the question below the video or go to analyticsmania.com and contact me in person.

All right, so there you have it. This is how you can track the initial source of where the user came from in Google Tag Manager first of all, and then forward this on to a custom dimension in Google Analytics. Now, I’d love to hear from you. How would you use that information when once you have it in Google Analytics? If you have already built this in what insights did it give you? Please share with us in the comments down below. Now big thanks to Julius from Analytics Mania. He has a great blog that you should check out at analyticsmania.com. And if you wanted to be on the channel because you want to share a cool tracking technique with us then please reach out to [email protected] and maybe we’ll see you soon enough on this channel. Now, as always, if you like this video, please give us a thumbs up and also subscribe to the channel right over there. Because we bring you new videos just like this one every week. Now, my name is Julian. Til next time

SHOW MORE...

2
Leave a Comment

avatar
 
smilegrinwinkmrgreenneutraltwistedarrowshockunamusedcooleviloopsrazzrollcryeeklolmadsadexclamationquestionideahmmbegwhewchucklesillyenvyshutmouth
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
Julian JuenemannEllen Caywood Recent comment authors
newest oldest
Ellen Caywood
Guest
Ellen Caywood

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?