A great Hack to Implement a free & powerful tracking pipeline with Google Analytics and Google Data Studio 🙀

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.
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.
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.
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 :
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
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.
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 !
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
Nous sommes le premier site trouvant où et quand partir en weekend selon les offres réelles du marché, vos envies et vos contraintes