Setup Google Tag Manager with React Native Firebase

In this article, I would like to provide you some unsubscribed moments with the integration of Google Tag Manager and React Native Firebase library.

This article will be useful when you already setup and use Firebase Analytics on your project. What is Google Tag Manager (GTM) and why it has to be integrated into your project, you can find some information here.

The steps of setup GTM configuration are quite fully described on the official site, as well you can found additional information in other places, including here on Medium. But, unfortunately, during my setup, I didn’t find quite a full explanation about integration GTM with React Native and some troubleshooting moments. I spend almost one day figuring out how ta make Android platform work with GTM. Provided setup steps didn’t work for me, so I tried different ways till found a working one.

I assume you are working on both platforms on your project, IOS, and Android. So i am going to shortly speak about both. Again, please, make sure you don’t have also any of the problems described in this article and all your preparation steps are in place.

IOS Setup

The steps, described on the official page is working variant for integrating GTM into your project, in case you already use firebase. No special steps, besides listed there. You just need to create folder ‘container’ in your project root, put there your exported container configuration, and add that folder in XCode application via menu ‘file -> add files to {your project}’. It is important to put a checkbox for ‘make reference’ or something. Now, you have to add in your Podfile before the last end ‘pod ‘GoogleTagManager’, and don’t forget to do ‘pod install’ under ios folder.

Now, to test your container with firebase analytics go to your Firebase project and check DebugView section.

import analytics from '@react-native-firebase/analytics';
...
analytics().logEvent('YOUR_EVENT_NAME', params);

If everything goes right, besides YOUR_EVENT_NAME in logs list of your connected device you have to see events from GTM, depending on what you have setup in the container. In my case, I just add a new tag ‘ios_test_gtm’, triggered by every event sent to the firebase analytics.

Android setup

As mention before, the Android steps of integration, described in GTM docs, didn’t work for me. I assume, the reason is that the described steps are for native Android integration, not for react-native firebase library, which takes care of sending events to your firebase analysis account. To make the integration work, they ask developers to add the next dependency in build.gradle file

dependencies {
  // ...
  compile 'com.google.android.gms:play-services-tagmanager:11.0.4'
}

After many attempts and changes in configuration, I found that I have to add instead of this next usage:

dependencies {
  // ...
  implementation 'com.google.android.gms:play-services-tagmanager:17.0.0'
}

Only after that, I was able to see my GTM tags in debugView on firebase analytics.

Summary

That’s pretty much all, guys! I hope, this short article will help you save time and dedicate it to some more pleasant staff. Setup GTM on the new or already delivered react-native base project is fair easy, in case all steps passed properly and information is correspond to your context and environment.