I’d like to track certain Webflow events in Google Universal Analytics (using analytics.js) without the use of Google Tag Manager. The specific scenarios we are trying to track are:
PDF downloads
YouTube Video views from lightboxes, sliders and straight embeds
I added the JavaScript tracking snippet to the site-wide Head Code of my site, replacing the UA# with the real one.
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
A couple of questions:
I’ve put the above in the universal head code in the dashboard. Does this mean I should not ALSO include the Google Analyitics account in the integrations tab of the dashboard?
How would I go about implementing the event tracking per element described here (Event Measurement | Analytics for Web (analytics.js) | Google Developers)? Do I simply use Link Setting panel and click on the + sign to create custom attributes? Would the name of the custom attribute be “data-onClick”
Good questions and ones that I spent a lot of time looking at when we were getting going.
If you put the code on the head of each page (which is what I’d do) you don’t need to put it in the tab on the dashboard. In fact having it in both places may well cause you issues.
In order to do event tracking you need to add a bit of javascript to the site. Place this code into the foot of the site. Dashboard — custom code – footer code.
What this does is when an event labelled gatrack occurs it’ll get pushed to google analytics.
Next you can start adding events to the site, it’s very easy from this point on. Simply click on the button or element you want to track, go to the settings as shown below.
Then go to Custom Attributes and add an atrribute with the name of “data-ga-track”, then in the value box below put in the “Category, Event, Label” for the event as below.
Publish the site, give analytics a while to catch up and then you should start to see events flying into Google analytics.
The same can be reapplied across the site. Anywhere you add a custom attribute of data-gatrack will become an event.
Chris (@steelejamc ), thank you so much! I am trying this out and will let you know if it works. How would I track videos that have been embedded straight into a div? Would I simply add the attribution values to the div element or to the video element itself, or to both?
@steelejamc The client wants the event action for the PDF to be the URL, which since I’m using Cloudfront CDN through Webflow is a long string of letters, numbers and slashes. Will that create a conflict? In your example, the attribute values were short at around 1 - 3 words. The client is saying the PDF event label is showing up as undefined.
For the video tracking, the client requested that the Event Action be the video ID, followed by a colon, followed by the video title, which sometimes has commas in it. A random example would be: Event Action: 'efntWhKG554:IF YOU LAUGH, YOU LOSE - The funniest ANIMAL videos ever!’
So, is it possible to force Webflow to respect commas inside the ‘parameters’ of the single quotes?
Lastly, just following up on my above question. For embedded videos, should the attributes be added to the div or video file? And for lightbox videos, which have a PNG play button that we’ve added centered via flex, should the attributes be added to both the lighbox link and the PNG button?
I assume your client is trying to understand how often the PDF is accessed or downloaded? Before people download the PDF the assumption is that they’ve been on the website, your client won’t be sharing the long Amazon CDN path I’m sure. So if they are coming to the site first then simply setup event tracking on the button that lets them view/download the PDF. The attribute might look like the below.
Name:data-gatrack
Value: PDF, Download, PDF Name
This will then come into Google analytics with a category of PDF, the action of Download, and the label as the name of the PDF. I would hope this gives the client what they’re looking for?
Unfortunately I’ve not done anything with video tracking so can only offer limited assistance in this respect. The event category, action and label are separated by commas though so I would expect if you have the suggested text you’ve mentioned you’re going to have issues.
Each time you add a new event attribute you are creating an event, I would think, although I’ve not tested, that if you put it on the div, then the png and the lightbox link you’ll end up with three events rather than one. Personally I’d place it on the png button.
It sounds like the client has some very particular requirements and isn’t being too flexible. I’d personally take a step back and look at what we’re trying to do and see if there’s a better way rather than trying to jump through the hoops they are putting in front of you.
Hope this offers some assistance. Another option is Google Tag Manager, using that would enable the customer to create their own tags rather than looking for you to implement
I might have misunderstood your first point Frankie about the URL being the URL. Unfortunately as soon as you start introducing punctuation i.e. .,/ I think you’ll have problems. I’ve just double checked and my labels are working. I’d suggest that getting access to the customers google analtyics account would be wise so you can see and test things first hand.
Chris, thank you so much for your help and insights! Excellent suggestions!
An update: After a little while, the PDFs ended up tracking just fine—even with me using the long Cloudfront URL believe it or not! Fortunately, the client set up a https://datastudio.google.com view that allows me to see what works and what doesn’t on my own even without being added to their analytics account. So, as far as the PDF tracking, all is good!
Regarding the video tracking, it works so far for the videos that are in lightboxes, but not ones that are inside a plain div or a slider on the interior pages. I’m going to see if simplifying the name of the Action helps with that, and I’ll post here if I have success, so that others reading can benefit.
Question, I’m not a javascript coder, but I noticed that in the javascript that you posted in your initial reply, there is a typo. It still worked but I’m not sure how. The word “Separated” was spelled “Seperated” in the line that says:
var eventParams = commaSeperatedEventData.split(',');
Does that matter any?
Anyhow, regarding Tag Manager, I need to learn that for the future!
Chris, thanks again! You have been immensely helpful. I am grateful!
Was really glad to see this thread pop up and that folks have been successful with GA Event Tracking + Webflow. I’m running into some issues though in getting events to actually report back in to GA.
Specifically, I want to be tracking clicks on links that lead users to download an .exe hosted on AWS …and eventually plenty of other things on-site and off. I made a quick non-indexed page just for testing a single event on a single external download link: https://www.getvida.io/event-testing
(I do have a Webflow public share link ready but given the nature of this project would prefer to see what we can do before posting that)
When I’m logged in to Google Analytics on the Real-time > Events view, I’m not seeing any activity come through, even after clicking the link in different browsers and networks. I’ve also made sure to toggle in that view from “Users” to “Events (Last 30 min)”
Here’s what else I’ve done so far:
I had followed the instructions posted by Chris on 12/19/17 and the gtag.js code is now in the head of all pages rather than doing it site-wide through Dashboard > Custom Code. I’ve also removed our tracking ID from Dashboard > Integrations and disabled IP Address Anonymization just in case that was getting in the way of anything.
I’ve used custom attributes as described in Chris’ post with spaces between each attribute. I also tried removing the spaces as seen in other forum posts (like this one)
Any thoughts as to why I’m not seeing anything come through? Is it possible that there’s a full 24 hour delay before results will trickle in even though real-time user counts seem to be working OK?
Aha! After lots of experimenting I realized I using gtag.js tracking code in page headers but using footer code that was meant for analytics.js. After updating the header code to analytics.js things started working out OK.
I’ve been attempting to fix the same problem: trying to record events in google analytics from webflow.
I’ve managed to find a solution by doing the following:
Don’t use webflow’s google analytics integration under their ‘Integrations’ tab. Instead, paste google’s Global Site Tag (gtag.js) into your site’s tag (under webflow’s ‘Custom Code’ tab).
Paste the following code into the ‘Footer Code’ section of webflow’s ‘Custom Code’ tab:
Go to an element you want to track an event on (like a form button), and add a ‘Custom Attribute’ with the following format: Name = data-gatrack Value = yourEventCategory, yourEventAction, yourEventLabel
