Implement Google Tag Manager (GTM) in React Native | by Robby Caesar Putra | Mar, 2022

by

Understand how to integrate GTM with other third-party analytics

Analytics is one of the important things to be installed in apps so we could improve our features, or build one that matters for users by knowing their behaviors. One of the resources that are hard to find is implementing google tag manager in react native apps.

In this article, I’ll explain how to implement google tag manager in react native apps, and integrate it with Amplitude as an example of how to integrate with other third-party analytics.

General flow on how GTM works in mobile apps

In order to utilize GTM, we need firebase analytics to invoke the function to send events and parameters. GTM is not collecting data analytics from mobile apps. GTM’s role is to organize the analytics traffic from apps to be integrated with other analytics third parties. Traffic is organized by JSON file which contains mapping where and how to send the analytics data. JSON file will be downloaded at first installation and put in a specific path in apps. Next time there is an update in the GTM dashboard, GTM already has a mechanism to distribute and update the JSON file for all users’ devices.

  • Install firebase analytics. You could use react-native-firebase analytics. Follow the instruction in the link to install it.
  • Create a google tag manager account here
  • Configure google tag manager container. You could follow here

GTM is still not supporting SDK for react-native. So installation will be done in each native code, iOS and Android.

  • Install google tag manager dependencies and put container file in android. Follow this instruction
  • Install google tag manager dependencies and put container file in iOS. Follow this instruction.
tag type when implementing to third-party analytics app

Integration happens with creating Tags in the GTM dashboard. When you click Navigation Drawer Tags > Button New > Click Tag Configuration, there is a list of third-party analytics apps you can integrate. Some of them need SDK installation, some of them do not. If you couldn’t find any analytics apps you want to integrate, you could always make your own integration by creating a custom Provider (code of the function to be called when triggered) in native code, then create a custom Function Call tag in the dashboard, put the path to the code function in Class Pathand define key values ​​of data you want to send.

Create custom Function Call in GTM dashboard

A few tips about class path

  • For android, Class Path is the path to your custom provider file. For example, if you create the file in this path `android/app/src/main/java/com/yourapp/GTMAmplitudeProvider.java , Class Path should be com.yourapp.GTMAmplitudeProvider
  • For iOS Class Pathjust input the name of the file.m, so for GTMAmplitudeProvider.m just input GTMAmplitudeProvider

Amplitude has a react-native SDK. But to utilize GTM, we should install native SDK instead since traffic that would be managed is referred from native code (in android or iOS). In this article, I only show you a general idea on how to create a custom Provider, without further explaining how to initialize instance when you want to use the analytics package because it varies between all the third-party analytics packages, just follow the documentation .

Here is the step to integrate with android

  • Install Amplitude with this instruction for android to install dependencies, adding permission, and initialization.
  • Create Provider java file for example GTMAmplitudeProvider in this path android/app/src/main/java/com/yourapp .
  • In general, the first function to be called is execute and input parameters map is object key values ​​defined when you create Tags in dashboard.

Here is the step to integrate with iOS

  • Install Amplitude with this instruction using Cocoapod for installing, and initializing.
  • With Xcode IDE, create file GTMAmplitudeProvider.h and GTMAmplitudeProvider.m

After installing the native dependencies and creating a custom Provider, try to create an event with firebase analytics in javascript and create the Tag which uses the custom Provider that we’ve just created. And that’s it!

  • The first thing that you have to be aware of when you integrate with other third-party analytics apps is what function to be called to invoke sending analytics. Some of the apps need you to create a class object first before sending the data, some of the apps need you to invoke the exact function for exact event tracking (ex: need to invoke function trackPurchase to track purchases)
  • It is easier to code in Android Studio or Xcode if you use Custom Provider because we will write native code here and those IDE is supporting auto import and flag if there are some errors in our code.
  • You could always console.log everything for debugging. In android java, you could use Log.dand in iOS, you could use NSLog. To see the log, I prefer to use flipper so you don’t need to see the log from multiple apps.
  • When you integrate new third-party apps, update your container JSON in your code with the latest version.
  • For other third-party analytics apps, if you want to use some function to be called that must be called in javascript sides, check if the package already install native dependencies. If you need to access native dependencies, maybe you have to force manual installation so you could access it from your native code.
  • You could organize better by creating a folder like GTMClass in the previous path and putting all custom Providers there.
  • You could organize the Provider file by making one Provider for one third-party app (ex: provider contains trackEvent, trackUserProperties), or one Provider for one function of third-party apps (ex: provider only contains trackEvent).
  • When your CustomProvider file is not called when triggered, might be the container JSON is not updated or failed to update when you are using the preview mode. You could check from device log (I prefer using flipper)

Leave a Comment