How to implement Firebase + GTM on a React Native App (step by step procedure for Android build)

There is good amount of documentation on how to implement GTM (Google Tag Manager) on a native android or an iOS app but nothing for a React Native app. There are couple of resources on the web which gives you the steps in implementing Firebase and GTM on a React Native app but there are some catches which no one mentions. First, the reason behind implementing both Firebase and GTM is Firebase acts as a data layer by sending different inbuilt events and the custom ones we implement. On GTM, we can intercept these Firebase events and play with them. So let's go ahead and see how to implement Firebase + GTM on a React Native App. This guide will contain details related to Android app but the process is similar for an iOS build as well.

Step 1 (Optional if you already have a react native app)

Install react native sample app by running the below line to get things started. If you have not installed NodeJS, you need to do that before you run the below command on command line. Also, you need an Android emulator or the corresponding one for iOS to run the app.

npx react-native init MyTestApp

Step 2 (Create Firebase Project)

Goto Firebase Console and create a new project for your React Native app. Enable Google Analytics for your project by linking the corresponding Google Analytics Property. You can either link it to an existing property or let Google automatically create for you.

Step 3 (Add an app to your Firebase project)

Add an Android app to your project. Supply the app details on step 1. Remember, the app name you enter on this step should be exactly same as your package name inside AndroidManifest.xml. Once you click Register app, you should see step 2 where you need to download the "google-services.json" file. This file has to be copied into "/android/app/" directory.

Step 4 (Installing Firebase app and Firebase Analytics)

Run the below command inside your project root directory to install Firebase app and Firebase analytics. This repo is the best and well maintained implementation of Firebase for React Native

npm install --save @react-native-firebase/app

npm install --save @react-native-firebase/analytics

If you use yarn, run the below commands

yarn add @react-native-firebase/app

yarn add @react-native-firebase/analytics

Step 5 (Configuring Firebase for Android)

Open /android/build.gradle and copy the code so that it looks like this

dependencies { 
    classpath 'com.google.gms:google-services:4.3.4'
}

Open /android/app/build.gradle and copy the below line to the bottom of the file

apply plugin: 'com.google.gms.google-services'

Step 6 (Creating GTM Container for Android build)

Goto tagmanager.google.com, select your GTM account and create a new container for Android app. Add a sample tag and publish the container. For the first time, when you publish the container, you will be shown an option to "DOWNLOAD" the container. This is the most important thing, you need to DOWNLOAD the container not Export it. If you export the container and use it in the next step, your GTM will not be compiled and you will see data on Firebase but nothing happens on GTM front. To Download your container, you need to click on the version and you will see a Download button. The file should have a format of GTM-XXXXX.json. It is not mandatory for you to download the latest container everytime you make changes. This is only one time task, once you place the first downloaded container, GTM will automatically refresh and check for the latest version and download it to disk.

Step 7 (Configuring GTM for Android)

Create /android/app/src/main/assets/containers folder (You need to create both the assets and containers folder if they are not present)

Now, place the downloaded container json file into the above folder.

Copy the below line into dependencies section of "/android/app/build.gradle"

implementation 'com.google.android.gms:play-services-tagmanager:+'

Step 8 (Running and testing our android app for Analytics)

To run the android app, goto command prompt, navigate to your project directory and run the below command

npx react-native run-android

This will open up the app in an emulator that is installed on your machine which can be done by installing Android Studio on your machine. By default, Firebase will be send events like first_open, screen_view etc. So, you should start seeing the data on your Firebase analytics Realtime report. App analytics is not like web analytics so there will be a lag in seeing your data. To debug the data you get on realtime, you can enable the debug mode for you android app and navigate to Debugview inside Firebase analytics to see your device connected. Run the below line in a command prompt to enable debugview for your app.

adb shell setprop debug.firebase.analytics.app [your_app_package_name]

Example: adb shell setprop debug.firebase.analytics.app com.awesomeprojectapp

or at any point of time if something is not working as expected you can do a log on another command prompt while your app is running by typing the below command

adb logcat -e "filter"

Example: adb logcat -e "GTM"

The above example will print all the logs containing the expression GTM which will be useful to debug anything related to GTM.

Step 9 (Sending Custom Events)

The above implementation will send all the default events but if you want to send custom events, you should add corresponding code to the action on which you want to fire the event. 

First you need to import firebase analytics by adding the below line to your App.js file

import analytics from '@react-native-firebase/analytics';

Then to send a custom event use the following syntax

async() => {

    await analytics().logEvent('eventName', {    

    'customKey' : 'customValue'

    }

}

To send an event like above on pressing a button you should pass the above code in to the Button's onPress attribute. That's all, you should see these events on your Firebase analytics.

Step 10 (Modifying things on GTM)

So far, everything works and the data comes to your Firebase analytics but we also want to send this stream into GTM so that we can modify or do something with it. The good thing is with all the above config GTM will automatically intercept the data that is being sent to Firebase analytics and all you need to do is to create events and variables on GTM interface.

If you want to send an Event into an Universal Analytics view when someone clicks a button on your app along with sending to a Firebase analytics view, 

Create an Universal analytics Event tag, add a trigger with type "Custom" and select Some Events with the condition that "Event Name" equals "eventName". That's all. Now you should start seeing data on your Universal analytics view along with the Firebase analytics.