How to configure a solid frontend ReactJS stack — Analytics (3)
The series consists of the following parts:
In this part we’re going to explore the analytics part of a frontend ReactJS application. There‘s a ton of possible analytics services, either pure anayltics services such as Google Analytics or the all-in-one-service services such as Segment or Google Tag Manager. I’m going to focus on ones that:
- Is easy to integrate.
- Allows for any type of analytics.
- Allows the client to tweak the analytics by themselves.
This means I’ll be skipping any specific analytics services and try to find an all-in-one-service that fits most of the applications needs. There are two that have proven to be quite useful in the past.
1. Google Tag Manager
Let’s begin with google’s solution for all-in-one analytics that allows plugging in any other analytics platform as well. It has a web administration console that allows someone with limited coding profficiency to set up the analytics pretty easily — a wise thing to do it to set unique ids to certain elements whose events we want to track. It also has pretty good community support and is free of charge.
Integration
Currently there’s a module for ReactJS that takes care of the implementation, namely the react-google-tag-manager. Another option is to simply include the snipper into index.htmland use it globally. Both are sufficiently simple to set up.
Types of analytics
Since GTM allows for injection of any type of code there are no restrictions (that I know of) on which snippets to add — it is entirely possible to add any general analytics such as facebook pixel or mixpanel through GTM which makes the setup much simpler and decouples the analytics software from the actual application.
Management
The web administration interface of GTM makes it very easy to set up the various analytics we want to include in the application — it also has a preview mode which allows for testing the analytics setup before deploying it to production. This also opens the door to any QA department to be able to test any analytics setup in sandbox mode.
2. Segment
Let’s see another interesting option that enables an even greater degree of integration — it can connect multiple applications into one analytics system. The service is free for the first 1000 users, 2 sources and for unlimited destinations. For advanced plans see https://segment.com/pricing.
The main features of the platform are:
- Importing historical data & archive of data
- Collecting data from any source, including server side
- Integration of a large list of analytics services (it can integrate GTM as a destination as well)
Integration
Integration is pretty simple — there are no noteworthy ReactJS integrations but it is sufficiently simple to integrate the system into the applications — it does feel bit more complex than GTM in any case.
Types of analytics
There is a large amount of integrations where Segment can send your data — perhaps it is best to take a look yourself.
Management
Segment has a very simple web dashboard where the analytics setup can be tweaked to your needs.
Wrap up
These are two of the analytics solutions that have proven to be very useful in the past. If there’s another one that you feel strongly about — please let me know and I can add it to the list.
Personally I like to start with GTM and proceed to add segment.io in the later stages of the project, if the need arises.
This is the third article in the series. In the next part we will focus on error detection and error reporting of the ReactJS application.
