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

Perceive the right way to combine GTM with different third-party analytics

Analytics is among the vital issues to be put in in apps so we might enhance our options, or construct one which issues for customers by realizing their behaviors. One of many sources which can be onerous to search out is implementing google tag supervisor in react native apps.

On this article, I’ll clarify the right way to implement google tag supervisor in react native apps, and combine it with Amplitude for instance of the right way to combine with different third-party analytics.

General flow on how GTM works in mobile apps

To be able to make the most of GTM, we want firebase analytics to invoke the operate to ship occasions and parameters. GTM will not be accumulating knowledge analytics from cellular apps. GTM’s function is to prepare the analytics visitors from apps to be built-in with different analytics third events. Site visitors is organized by JSON file which incorporates mapping the place and the right way to ship the analytics knowledge. JSON file will likely be downloaded at first set up and put in a particular path in apps. Subsequent time there’s an replace within the GTM dashboard, GTM already has a mechanism to distribute and replace the JSON file for all customers’ units.

  • Set up firebase analytics. You would use react-native-firebase analytics. Comply with the instruction within the hyperlink to put in it.
  • Create a google tag supervisor account here
  • Configure google tag supervisor container. You would observe here

GTM continues to be not supporting SDK for react-native. So set up will likely be finished in every native code, iOS and Android.

  • Set up google tag supervisor dependencies and put container file in android. Comply with this instruction
  • Set up google tag supervisor dependencies and put container file in iOS. Comply with this instruction.
tag type when implementing to third-party analytics app

Integration occurs with creating Tags within the GTM dashboard. If you click on Navigation Drawer Tags > Button New > Click on Tag Configuration, there’s a listing of third-party analytics apps you’ll be able to combine. A few of them want SDK set up, a few of them don’t. In the event you couldn’t discover any analytics apps you need to combine, you may at all times make your personal integration by making a customized Supplier (code of the operate to be referred to as when triggered) in native code, then create a customized Perform Name tag within the dashboard, put the trail to the code operate in Class Path, and outline key values of information you need to ship.

Create custom Function Call in GTM dashboard

Just a few tips on class path

  • For android, Class Path is the trail to your customized supplier file. For instance, in the event you create the file on this path `android/app/src/major/java/com/yourapp/GTMAmplitudeProvider.java , Class Path must be com.yourapp.GTMAmplitudeProvider
  • For iOS Class Path, simply enter the identify of the file.m, so for GTMAmplitudeProvider.m , simply enter GTMAmplitudeProvider

Amplitude has a react-native SDK. However to make the most of GTM, we must always set up native SDK as an alternative since visitors that may be managed is referred from native code (in android or iOS). On this article, I solely present you a normal thought on the right way to create a customized Supplier, with out additional explaining the right way to initialize occasion while you need to use the analytics bundle as a result of it varies between all of the third-party analytics packages, simply observe the documentation.

Right here is the step to combine with android

  • Set up Amplitude with this instruction for android to put in dependencies, including permission, and initialization.
  • Create Supplier java file for instance GTMAmplitudeProvider on this path android/app/src/major/java/com/yourapp .
  • Generally, the primary operate to be referred to as is execute , and enter params map is object key values outlined while you create Tags in dashboard.

Right here is the step to combine with iOS

  • Set up Amplitude with this instruction utilizing Cocoapod for putting in, and initializing.
  • With Xcode IDE, create file GTMAmplitudeProvider.h and GTMAmplitudeProvider.m

After putting in the native dependencies and making a customized Supplier, attempt to create an occasion with firebase analytics in javascript and create the Tag which makes use of the customized Supplier that we’ve simply created. And that’s it!

  • The very first thing that you’ve to concentrate on while you combine with different third-party analytics apps is what operate to be referred to as to invoke sending analytics. A few of the apps want you to create a category object first earlier than sending the info, a few of the apps want you to invoke the precise operate for precise occasion monitoring (ex: must invoke operate trackPurchase to trace purchases)
  • It’s simpler to code in Android Studio or Xcode in the event you use Customized Supplier as a result of we’ll write native code right here and people IDE is supporting auto import and flag if there are some errors in our code.
  • You would at all times console.log all the pieces for debugging. In android java, you may use Log.d, and in iOS, you may use NSLog. To see the log, I favor to make use of flipper so that you needn’t see the log from a number of apps.
  • If you combine new third-party apps, replace your container JSON in your code with the newest model.
  • For different third-party analytics apps, if you wish to use some operate to be referred to as that should be referred to as in javascript sides, verify if the bundle already set up native dependencies. If it’s good to entry native dependencies, perhaps you must power handbook set up so you may entry it out of your native code.
  • You would arrange higher by making a folder like GTMClass within the earlier path and placing all customized Suppliers there.
  • You would arrange the Supplier file by making one Supplier for one third-party app (ex: supplier incorporates trackEvent, trackUserProperties), or one Supplier for one operate of third-party apps (ex: supplier solely incorporates trackEvent).
  • When your CustomProvider file will not be referred to as when triggered, is likely to be the container JSON will not be up to date or didn’t replace when you’re utilizing the preview mode. You would verify from gadget log (I favor utilizing flipper)

More Posts