This article shows how to succeed in tracking and visualising web application analytics by using Google data studio custom fields and a clever use of Google Analytics event labels.

Context

We believe at Weekendr that we should stop being blind about what happen in our website. Many tools are available to track Single Page Web App. The pipeline Segment with Amplitude or Mixpanel is one of the best.

Problem : it costs big money and when you are an individual or a small company you can not afford this one, it is just unreasonable. One day maybe !

Our Solution : cleverly get the most out of Google analytics (GA) and Google Data Studio (GDS) to build a 100% free pipeline.

Use case : What are the most popular weekends ?

Weekendr is a rising TravelTech start up that proposes the ultimate booking experience of small trips in France and Europe.

If we take out the unforgettable user experience and the high quality of our results 😉, we sell weekends just like an e-commerce website sells products.

In a shoes e-commerce, a product is defined by a price, a brand and a color :
Red naike shoes 70€- Blue adadas 80€- Dark Rebouk 45€ with fake brands, don’t want any problem 😉.
In our use case, we have weekends defined by a price, a destination, 2 labels and a temperature. (cf screenshot below) : weekend in Lisboa for 255€, 23°C and labelled Love & Foodie.

So, we may wonder to know what are the most popular destinations, labels, temperatures and prices when users click on weekend cards.

1. Build your GA Events ( THE HACK IS HERE )

Events are user interactions with content that can be measured independently from a web-page or screen load. Downloads, link clicks, form submissions, and video plays are all examples of actions you might want to analyse as Events.*

An Event in GA is defined by 4 attributes : category |action | label | value

A category is a name that you supply as a way to group objects that you want to analyze. Typically, you will use the same category name multiple times over related UI elements that you want to group under a given category.*
STRING TYPE

We have chosen Weekend Cards as the name of our Event Category.

The action parameter is to name the type of event or interaction you want to measure for a particular web object.*
STRING TYPE

We have chosen Click as the name of our Event Action

Label is useful for summarising what the event is about. For example, the name of a video played, the name of the menu clicked*
STRING TYPE

If we follow strictly the documentation, for each click we need to create three separated events for the three info we want to store with the specific category and same action names :

• one for the destination ( Lisboa )
• one for the labels ( Love & Foodie )
• one for the temperature ( 23°C )

It could have worked for this simple example but what if we want to store the date, the weekend duration and other relevant information ? Creating as many events as there is information to store for one click is theoretically possible but for obvious reason of performance and self respect we know that it is not a good solution 🤓. Why we are blocked ? Because the label type of an event is a string. To avoid creating all this events, we should beg Google to do like Segment and change the string type to an object type.

# what is possible in GA but we know that is not a good solution
Event('Weekend Card Destination', 'Click', 'Lisbonne', 255)
Event('Weekend Card Temperature', 'Click', '23°C', 255)
Event('Weekend Card Labels', 'Click', 'love&foody', 255)
=> Three different events 

# what we want from Google but is not possible :
Event('Weekend Popularity', 'Click', object, 255)
object = {
 destination: 'Lisbonne',
 temperature: '23°C', 
 FirstLabel: 'Love', 
 SecondLabel: 'Foody', 
}
=> one single event

At Weekendr, we hate to loose. So we decided to do a little trick 🔥 and create what we called string object that can be easily processed in GDS.

# our trick 
stringObject = 'destination=Lisbonne&temperature=23&FirstLabel=Love&SecondLabel=Foody'
Event('Weekend Popularity', 'Click', stringObject, 255)

With that hack we just have to create one event compared to many in a real use case and keep the same benefit as Segment in terms of storing as much information as we want.

*From GA support

2. Visualise the popularity in Google Data Studio

With Google Data Studio you can access your GA data (Event category, action, label & value) to do many cool things. You can create interactive dashboards with your charts or community ones and instantly share it with your collaborators. Plus, it is totally free 😊 !

🔗 First Link data source (GA) to your report

To build your charts, there are two fundamental concepts to understand: Dimensions and Metrics.

Dimensions is a set of unaggregated values by which you can group your data. (Green fields)

(Dimension ex: Sessions)

Metrics is a specific aggregation that you can apply to a set of values. Because a metric itself has no defined set of values, you can’t group by it. (Blue fields)

(Metric ex: Number of Sessions)

At the beginning you have by default access to many dimensions and metrics such as number of users, sessions, page views…

A very nice feature that we have in GDS is the possibility of creating our own fields ( dimensions & metrics ). Our hack relies on that ! Did we find something or Google have developed it specifically ? Anyway we ❤️ to share !

This feature is extremely powerful because it allows us to extract data from one dimension to separated fields (one field per value we have in our label).

To create your new field, you need entering a formula that tells Google Data Studio what to do with your data. See examples below or in official documentation.

## lower case data 
LOWER(dimension)
## concatenate
CONCAT(dimension_1, dimension_2)
## regex 
REGEXP_EXTRACT(dimension, 'regex_exp')
## regex match
REGEXP_MATCH(dimension, 'why|ssjs')
## condition ... 
CASE 
 WHEN x THEN y
 THEN 'OTHER'
END

This is where our string object will be decomposed. In our case we will use the REGEX_EXTRACT function. To extract a value from our label string, we use the following pattern: parameterName=([^&]+)
This pattern tells GDS to extract all following characters until ‘&’. Reiterate this operation as many parameter you got in your Event Label.

Event Label = 'destination=Lisbonne&temperature=23&...'
##weekend destination
REGEXP_EXTRACT(Event Label, 'destination=([^&]+)') => Lisbonne
##weekend temperature 
REGEXP_EXTRACT(Event Label, 'temperature=([^&]+)') => 23
... 

Here we go! We succeeded to get all the data we needed with a single Event, now let’s see how to visualise it 👁 ! Let’s create charts, pies, diagrams ! Let’s create the temperature vs price line chart.

1. Add a new chart

2. Select the dimension ( Weekend Temperature ) and metric ( Avg Price Value )

3. Adding style to charts

Data Studio provide you a long list of settings to personalise your charts and make them beautiful and sexy 😍!

Et Voilà 🤩!

Here is your report ! Easy & free !

Resources

To implement it in you react app : React-GA
Google Analytics : Documentation
Create new metrics with charts : Function List
Create new fields in GDS : answer — Great Examples