Implementing Google Analytics

Hey guys!

I have a very simple website for my phisyoteraphy clinic and it’s been hard to track the clicks on the buttons. I could only track the views with the Google Universal Analytics Tracking ID, but I’d like more. I read a lot of topics here but none of them helped me :frowning:

I basically want to know how many people clicked in the menu buttons.

Can anyone help me? :slight_smile:

My website is: https://www.fisioabreu.com.br/

Thank you!

Hi Eduardo,

Good question and one that took me a while to find the right answer or answers should I say.

There’s two ways you can send events to Google Analytics (that I know of), either using Universal Analytics and some additional JS in the foot of each page plus assigning event properties to the elements on the page, or setting up and using Google Tag manager. The first is probably the easier to get going but is more cumbersome when you want to make changes in the future. If you’ve not looked at tag manager before I’d suggest avoiding it for now, it’s a learning curve in its own right.

I’m not at a computer at the mo buy will be soon and I’ll reply again with all the details you need to setup the first option. If you’d prefer to hear about tag manager then let me know and I can give my details of that too. :slight_smile:

Will come back soon.
Chris

1 Like

Hello Chris,

Thank you very much for your time.

I had a look yesterday in Google Tag Manager but it looked a bit complicated to setup the tags and triggers in the code.

I’d love to hear from you how to implement the first option :slight_smile:

Again, thank you!

No worries Eduardo,

Forgive me if I go over some basics but lets just double check you’ve got everything setup as it should be.

Universal Analytics

To install Universal Analytics you need to add the tracking code snippet that you’ve got from Google in your property settings. It’s important to point out that Google has for some time been issuing Tag Manager tracking code through Analytics rather than the slightly older Universal tracking code. Using that code I’ve found won’t allow the events to be passed so we need to make sure you are in fact using the Universal tracking code.

This is what the Universal Tracking code should look like, it should be added to head of the entire site by going to “Project Settings” — “Custom Code” — “Head Code”. Really important to make sure you don’t have the tracking code anywhere else such as the in the “Intergrations” section. Adding it there might achieve the same result but I’m going with what I know…

In the code below you need to replace the “UA-49347834-1” with your own property ID, found in 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-49347834-1', 'auto');
  ga('send', 'pageview');

</script>

Right so that’s Universal Analytics setup, hopefully your property is getting some traffic and you can see it in the Real Time section of Google Analytics, this can take a bit of time when setting up from new.

A Brief Overview of Events in Analytics
Each event that you send to Google needs to have at the very least a “Category”, an “Action” and a "Lablel. This will all become obvious when you start seeing events pop into Analytics but effectively you can use these three fields to help you disect information in Analytics. So for your Nav bar it could be a category of “Nav”, an action of “Click” and a label of “Sobre”. This will then make sense to you when you look at Analytics and you’ll know which part of the nav or website has been clicked on and how many times.

JS to send events to Analytics
Simply the below needs to be added to the footer code of every page in much the same way we added the original tracking code above. Without getting into too much depth we’re saying that when someone clicks on something with the attribute of “data-gatrack” send the events category, action and label to analytics.

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

Now to add some events
We’re ready to go and add in some events, do them one at a time to start to make sure it’s working (and make sure your IP address isn’t excluded from Analytics so you can test it).

Go into Webflow’s Designer select the element that you want to create an action for and then go to the settings of that element. Two thirds of the way down you’ll see an area for custom attributes which is where we want to be.

image

We want to go in here and add a new attribute with a name of data-gatrack (note that if this isn’t correct it won’t work as this triggers the afore mentioned JS). And then using commas as separaters enter our category, action and label. You should end up with something that looks like this:

image

Click save, publish and go into Real Time in Analytics. Start clicking that link as many times as you like and hopefully events should start registering!

Hope this helps, let me know if you get stuck or have any issues.

thanks
Chris

3 Likes

Sorry and just to add, this isn’t my own work :wink: I learnt this from other Forum members but just don’t know which ones!

1 Like

Awesome Chris!!! It worked perfectly!!

Just one question, I could only see the last 30 minutes results in GA > Real Time > Events.

My question: is there any way that I could see not only the last 30 minutes, but for weeks/months…? Because as I understood, every 30 minutes, the data will be reseted, am I right?

Thank you!

Hi Eduardo,

Glad it worked :slight_smile: Analytics only collects data from the point of setup so you will only be able to see the events from the time that you created them. If you go into “Behavior” — “Events” in Analytics you should start to see them in there. Give it a few days and you’ll have more data in that section, will take time for you to gather the data for weeks and months though. Hope that makes sense.

Thanks
Chris

1 Like

Thanks @steelejamc. I’ve found this so useful. I was really worried about what was involved, when the agency managing my client’s ads wanted events tracked, but this is pretty easy. Just waiting for events to pull through to Analytics. I’ve read it could 24hrs.

@eduardobpabreu So the simplest way to easily add tracking to buttons is using Google Tag Manager. Add Tag Manager, then add GA to Tag Manager, Then create a button click event similar to this from submit, but a click event instead of form submit, you can just trigger that fires on ‘some clicks’ where ‘click text’ Contains XXXX.

1 Like