How to implement Google Analytics for a React Native app

6 min readAug 14, 2018

For almost every product that is built or launched in the market, the business and development teams would want to keep track of the success features and failure points of the app. Along with that, tracking how the users are accepting and adapting to the product would be helpful in better strategising. There are many direct and indirect ways of tracking the many aspects and features of a product. For mobile apps particularly, the first thing we look forward to is user feedback and star ratings in the App Store or the Google Play Store. For a more detailed tracking and analysis, there are multiple analytics tools out there in the market, the analytics tool by Google, popularly known as Google Analytics, is widely used across the industry.

It’s a powerful tool which provides a complete analytical solution while also allowing the users to create customised reports. The graphical intuitive UI based demonstration of the analytics data makes the process of making sense from data much more convenient. Google Analytics takes in huge amount of user data and then provides a summarised and concise dashboard while also providing a detailed view if needed.This was a quick overview of Google Analytics tracking. Now let’s talk about how to integrate Google Analytics in a React Native mobile application.

Integrating the analytics module

Google Analytics provide APIs which can be directly integrated with a web application. APIs are also readily available for integration with a native IOS or android application. Being said that, There are no APIs for Google Analytics which can be directly consumed by a React Native app. This was a slight bummer but we know till the time we have native API’s for doing something in IOS and Android we can always write a bridge in React Native to call the native API from JS. On looking out in the open source community, I found a Google Analytics bridge for React Native.

This NPM module, react-native-google-analytics-bridge, exposes almost all the commonly used APIs in Google Analytics. It has support for screen tracking, event tracking and even e-commerce tracking along with many others. It also allows to set and pass custom dimensions along with all tracking events. The usage of the node module is documented in detail by the author.

In the React Native application do the following:

yarn add react-native-google-analytics-bridge
react-native link react-native-google-analytics-bridge

I started by creating a utils file, analytics.utils.js where the analytics tracker is initialised with the tracker ID. On creating a new account for the mobile app on Google Analytics dashboard, a tracker ID is generated.

Custom dimensions

The second parameter provided to GoogleAnalyticsTracker is the custom dimensions object, it’s a key value pair with the custom dimension name and index. Custom dimensions is any additional information that you would like to track along with the dimensions automatically tracked by Google Analytics. In any of the auto generated report as well as on custom report, custom dimension can be added a separate column. To enable custom dimensions, the same custom dimension name and index mapping have to defined in the custom dimensions section in admin panel.

The custom dimensions are mapped to an index , these dimensions can be then assigned values. The custom dimensions have to be sent with the tracker event wherever we want to add additional dimensions. I created an object to initialise custom dimensions with the values and also a setter method was defined that would update the value of the custom dimension.

Along with the initialisation of the tracker with the custom dimension we can also set the values of all the static parameters in the tracking journey. The two commonly used parameters are app name and version.

Next, methods were created for all the different type of events which were to be tracked from the mobile application. Also exception tracking was enabled to track all the crashes and uncaught exceptions along with the generic errors.

Screen Tracking

Screen tracking is one of the first thing we want to enable as it can be seen in the real time dashboard. The idea is whenever a user lands on a screen we want to track the screen name. This helps in getting the number of screen views, the user retention on the screen, analysing the user drop outs from the screens. To achieve this, we want to trigger the trackScreenEvent when the user navigates to a new screen. I created a redux middleware to enable screen tracking by calling the track screen event on the middleware level. Like any other middleware, redux-ga-screen-tracker can be added while creating the store.

The middleware expects a config which provides the tracker instance and any additional detail like the actions to track, business names of the routes, custom dimensions. This tracker can be directly plugged in if using redux for state management and react-navigation, for managing routing, in the React Native application.

Event tracking

Event tracking enables tracking user actions and inputs. For each user action, we would have to call the event tracker API with the event action and category. This way all the event actions and categories will be defined wherever we trigger an event. To solve for this, I created a config which have the mapping for all event category and actions. This helped in keeping all the event names centralised. The same config file was later used in the web application as well. Thus, keeping the naming of events in sync across the web and mobile application.

For tracking the navigation event on text click, we do the following call the trackEvent() with the event category and actions.

User ID feature

Google analytics provides the facility of creating a user ID based view, this allows to link all events from a user with a unique user ID. For achieving this, we will need to set the user ID from the code, userId has to be a unique identifier for the user.

We will also need to create a new view in the Google Analytics dashboard which would show all the userId based information. Read the policy and if you agree to the policy, create the user ID view for a user based analysis of events. The userId’s can be viewed in the user explorer section of the userId view.