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 Pathand define key values of data you want to send.
A few tips about
- For android,
Class Pathis the path to your custom provider file. For example, if you create the file in this path `
Class Pathshould be
- For iOS
Class Pathjust input the name of the file.m, so for
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
GTMAmplitudeProviderin this path
- In general, the first function to be called is
executeand input parameters
mapis 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
- 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
trackPurchaseto 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.logeverything 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.
- You could organize better by creating a folder like
GTMClassin 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)