Streaming live at 10am (PST)

Google Universal Analytics Event tracking without Using Google Tag Manager


#1

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:

  1. PDF downloads
  2. 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:

  1. 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?

  2. How would I go about implementing the event tracking per element described here (https://developers.google.com/analytics/devguides/collection/analyticsjs/events)? 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”

I appreciate your help!


#2

Hi Frankie,

Good questions and ones that I spent a lot of time looking at when we were getting going.

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

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

    <script>
     $(document).ready(function() {      
       $(document).on('click', '[data-gatrack]', function(e) {
    
         var $link = $(this);
                 var commaSeperatedEventData = $link.data('gatrack');
                 var eventParams = commaSeperatedEventData.split(',');
    
                 if (!eventParams) { return; }
    
                 eventCategory = eventParams[0]
                 eventAction = eventParams[1]
                 eventValue = eventParams[2]
    
                 ga('send', {
                                hitType: 'event',
                                eventCategory: eventCategory,
                                eventAction: eventAction,
                                eventLabel: eventValue
                 });
           
       });
     });
     </script>
    

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.

image

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.

image

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.

Hope this helps.

Chris


#3

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?


#4
  1. @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.

  2. 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?

  3. 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?

Thanks! I appreciate the help, greatly!


#5

Hi Frankie,

  1. 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 :slight_smile:

Thanks
Chris


#6

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.

Sorry I can’t be of more assistance.

Thanks
Chris


#7

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!