How to add Google event tracking to a python flask site

A while ago I had to track clicks on a website, where the click did not open a new url. The website I was tracking did not have a database connected, as it was a simple business website, so I could not add a counter to the database and do it all internally. The website was made in Python Flask.

The purpose of tracking the clicks on this specific page was to count the times a user clicked a button that would open a modal.

Of course this company was using Google Analytics, and I decided to integrate the click events on this specific page with their Google Analytics account. It turns out it is very simple to do.

I found that having insight into the codebase of the website makes it much more flexible to setup custom tracking like this, and it allows you to track very powerful things on your website. I will write about these later in this article.

First I will show you how to setup event tracking and integrate it with Google Analytics for a Python Flask website.

This tutorial assumes that you have already setup Google Analytics for your website and added the tracking code inside the <head> tags.

In total there are 4 steps you must take to track an event and get it into your Google analytics account. These are:

Name the element that you are tracking in your code

Create the tracking code for that element

Create an event handler in JavaScript or jQuery

Test and verify

Let’s go through each step in a bit more detail.

Name the element that you are tracking in your code

Since I had 6 span tags I needed to track under the same event type, I decided to give the 6 tags a common class name and each a unique ID.

First we give the span tag a unique ID that no other tag on the page has.

As an example, say you want to track the following span tag:

SPAN TAG EXAMPLE

We therefore give the <span> tag an ID:

SPAN TAG EXAMPLE WITH ID

Next we apply the shared class name to all the 6 span tags:

SPAN TAG WITH CLASS NAME

That’s it for this step.

Create the tracking code for the element

Once we have given the <span> tag a unique ID, we can proceed to creating the code snippet that sends the click to Google Analytics. Luckily the Google Analytics documentation is clear and concise: https://developers.google.com/analytics/devguides/collection/gtagjs/events

In our case, it would look like this:

CODE SNIPPET FOR SPAN TAG

Create an event handler in JavaScript or jQuery

Finally I wrapped a jQuery event handler around the Google Analytics code, and I ended up with this little snippet:


&amp;lt;script&amp;gt;&lt;/&gt;
 $(document).ready(function() { 
 $(“.shared-tag-class”).click(function() {
 uniqueID = $(this).attr(“id”);
 gtag(‘event’, ‘click’, {
 ‘event_category’ : ‘Open Modal’,
 ‘event_label’ : uniqueID
 });
 });
});

And I can now view how many clicks each modal received by going to Google Analytics -> Behavior -> Events -> Overview

A brief overview of the parameters I am passing with the gtag function:

‘event’ is a non-negotiable parameter.

‘click’ is the “action”-vaue.

‘’event_category’ is a category-value

‘event_label’ is a label-value.

All the parameters except for ‘event’ can be named whatever you want. These keywords are used to categorize your click events. Finding a good categorization of events is outside of the scope of this article.