How to implement Firebase + GTM on a React Native App (step by step procedure for Android build)

There is good amount of documentation on how to implement GTM (Google Tag Manager) on a native android or an iOS app but nothing for a React Native app. There are couple of resources on the web which gives you the steps in implementing Firebase and GTM on a React Native app but there are some catches which no one mentions. First, the reason behind implementing both Firebase and GTM is Firebase acts as a data layer by sending different inbuilt events and the custom ones we implement. On GTM, we can intercept these Firebase events and play with them. So let's go ahead and see how to implement Firebase + GTM on a React Native App. This guide will contain details related to Android app but the process is similar for an iOS build as well.

Step 1 (Optional if you already have a react native app)

Install react native sample app by running the below line to get things started. If you have not installed NodeJS, you need to do that before you run the below command on command line. Also, you need an Android emulator or the corresponding one for iOS to run the app.

npx react-native init MyTestApp

How to track HTML 5 Videos using Google Tag Manager?

If you have a lot of videos embedded on your website which are not YouTube videos, it will be slightly difficult for you to track the video events using in built options of Google Tag Manager. However, we can use Custom HTML tag with few triggers and variables to achieve the tracking for any kind of HTML 5 video. If your video player uses HTML 5 format, then the below library can be used.

Here, we will be tracking "play", "pause", "complete", "milestones - 25, 50 and 75%" with the library and all of these are tracked as events in Google Analytics. Let us zero in the data we want to see in the reports. I want the event fired from the video to contain the below values

How to convert CIDR to IP Addresses Range using JavaScript

Many times, when you work on IP Exclusions in Google Analytics, you are required to create IP Addresses range in RegEx format. We have seen how to write a proper RegEx to exclude or include IP Address range in Google Analytics in our previous post. In this post, let us see how to convert a CIDR notation to a range of starting and ending IP addresses using plain JavaScript. CIDR (Classless Inter-Domain Routing, sometimes called supernetting) is an easy way to put a range of IP addresses in a single expression. Unfortunately you cannot enter a CIDR IP in Google Analytics. You have to create a range of starting and ending IP addresses and then come up with a Regular Expression to set them up in the filter. When you have a list of CIDR IPs and it gets frustrating to convert all of them manually going to some website which has a converter and then write the RegEx.

In this post, I have come up with a JavaScript function which you can use quickly to convert a CIDR IP to a starting and ending IP address which you can further use to form a RegEx.