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.

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.

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 Path
and define key values of data you want to send.

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 becom.yourapp.GTMAmplitudeProvider
- For iOS
Class Path
just input the name of the file.m, so forGTMAmplitudeProvider.m
just inputGTMAmplitudeProvider
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 pathandroid/app/src/main/java/com/yourapp
. - In general, the first function to be called is
execute
and input parametersmap
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
andGTMAmplitudeProvider.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 useLog.d
and in iOS, you could useNSLog
. 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)