Firebase analytics in React native app
Tags: reactnative, firebase, analytics
Published: 2020-03-29 18:23:13

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en" ><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="2498" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="8102" class="graf graf--p graf-after--figure">In this post, you’ll learn how to implement the easy to integrate Firebase Analytics in React Native apps.</p><blockquote name="61a2" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Complete code of this post can be found in the Github repository </strong><a href="https://github.com/enappd/AnalyticsData.git"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">react-native-firebase-analytics</strong></a></blockquote><h3 name="8dda" class="graf graf--h3 graf-after--blockquote">What is analytics</h3><p name="e718" class="graf graf--p graf-after--h3"><strong class="markup--strong markup--p-strong">Analysis</strong> is focused on understanding the past; what happened and why it happened. Analytics focuses on why it happened and what will happen next.</p><p name="7e05" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Analytics</strong> is a free app measurement solution that provides insight on app usage and user engagement.</p><p name="55a8" class="graf graf--p graf-after--p">Organizations may apply analytics to business data to describe, predict, and improve business performance. Specifically, areas within analytics include <a href="https://en.wikipedia.org/wiki/Predictive_analytics"  class="markup--anchor markup--p-anchor" title="Predictive analytics" rel="noopener"    target="_blank">predictive analytics</a>, <a href="https://en.wikipedia.org/wiki/Prescriptive_analytics"  class="markup--anchor markup--p-anchor" title="Prescriptive analytics" rel="noopener"    target="_blank">prescriptive analytics</a>, <a href="https://en.wikipedia.org/wiki/Enterprise_decision_management"  class="markup--anchor markup--p-anchor" title="Enterprise decision management" rel="noopener"    target="_blank">enterprise decision management</a>, descriptive analytics, cognitive analytics, Big Data Analytics, retail analytics, supply chain analytics, store assortment and <a href="https://en.wikipedia.org/wiki/Stock-keeping_unit"  class="markup--anchor markup--p-anchor" title="Stock-keeping unit" rel="noopener"    target="_blank">stock-keeping unit</a> optimization, marketing optimization and <a href="https://en.wikipedia.org/wiki/Marketing_mix_modeling"  class="markup--anchor markup--p-anchor" title="Marketing mix modeling" rel="noopener"    target="_blank">marketing mix modeling</a>, <a href="https://en.wikipedia.org/wiki/Web_analytics"  class="markup--anchor markup--p-anchor" title="Web analytics" rel="noopener"    target="_blank">web analytics</a>, call analytics, <a href="https://en.wikipedia.org/wiki/Speech_analytics"  class="markup--anchor markup--p-anchor" title="Speech analytics" rel="noopener"    target="_blank">speech analytics</a>, sales force sizing and optimization, price and promotion modeling, predictive science, credit <a href="https://en.wikipedia.org/wiki/Risk_analysis_%28business%29"  class="markup--anchor markup--p-anchor" title="Risk analysis (business)" rel="noopener"    target="_blank">risk analysis</a>, and <a href="https://en.wikipedia.org/wiki/Fraud_detection"  class="markup--anchor markup--p-anchor" title="Fraud detection" rel="noopener"    target="_blank">fraud analytics</a>. Since analytics can require extensive computation (see <a href="https://en.wikipedia.org/wiki/Big_data"  class="markup--anchor markup--p-anchor" title="Big data" rel="noopener"    target="_blank">big data</a>), the algorithms and software used for analytics harness the most current methods in computer science, statistics, and mathematics</p><h3 name="1a0b" class="graf graf--h3 graf-after--p">Why is analytics important?</h3><p name="a444" class="graf graf--p graf-after--h3">Internet marketing without analytics is like pointing at NYC and saying “the building is somewhere in there.” Internet marketing with analytics is akin to pinpointing the exact location of a specific building using satellite technology.</p><p name="866b" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Analytics</strong> allow you to quantify the effects of making a change to your marketing strategy, and that’s invaluable to the process of improving and optimizing online marketing campaigns. The biggest benefit of utilizing proper <strong class="markup--strong markup--p-strong">analytics</strong> is being able to identify strengths and weaknesses.</p><p name="85c1" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Analytics</strong> essentially allow for a defined path of optimization that leads to better results on all fronts.</p><h3 name="e5a4" class="graf graf--h3 graf-after--p">What is React-Native</h3><p name="7b18" class="graf graf--p graf-after--h3"><strong class="markup--strong markup--p-strong">TLDR;</strong>&#8202;—&#8202;React Native (RN) apps are more “native” than webview apps made by Cordova / Ionic. But React Native is yet to release a stable (1.0.0_) version of the framework.</p><p name="e21e" class="graf graf--p graf-after--p">React Native is a JavaScript framework for writing natively rendering mobile applications. It’ is based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. Because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.</p><p name="5626" class="graf graf--p graf-after--p">React Native applications render using real mobile UI components, <em class="markup--em markup--p-em">not</em> webviews, and will look and feel like any other native mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location. <a href="http://bit.ly/1YipO7A"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Facebook</a>, <a href="http://bit.ly/1PPEiZH"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Palantir</a>, <a href="http://bit.ly/1PPEjNg"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">TaskRabbit</a> etc are already using it in production for user-facing applications.</p><figure tabindex="0" contenteditable="false" name="15ad" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 335px; max-height: 335px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 100%;"></div><img class="graf-image" data-image-id="1*8sJrsHqZSsLJ3UVBtuUGRA.jpeg" data-width="335" data-height="335" src="https://cdn-images-1.medium.com/max/800/1*8sJrsHqZSsLJ3UVBtuUGRA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">React Native</figcaption></figure><h3 name="b2e9" class="graf graf--h3 graf-after--figure">Firebase</h3><p name="01f0" class="graf graf--p graf-after--h3">Firebase is a Backend-as-a-Service (BaaS) platform. It started as a <a href="http://blog.ycombinator.com/firebase-yc-s11-raises-5-dollars-dot-6m-series-a-from-union-square-ventures-and-flybridge"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">YC11 startup</a> and grew up into a next-generation app-development platform on Google Cloud Platform. It is getting popular by the day because of the ease of integration and a variety of functionalities available on it.</p><p name="ffb1" class="graf graf--p graf-after--p">Some of the quick integrations available with Firebase are</p><ul class="postList"><li name="ea04" class="graf graf--li graf-after--p">Email Authentication</li><li name="9a39" class="graf graf--li graf-after--li">Social logins</li><li name="3453" class="graf graf--li graf-after--li">Real-time database</li><li name="196a" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Analytics</strong></li><li name="c42f" class="graf graf--li graf-after--li">Crashlytics</li><li name="3f0f" class="graf graf--li graf-after--li">Push notifications</li><li name="fe08" class="graf graf--li graf-after--li">In-app messages</li><li name="a7e6" class="graf graf--li graf-after--li">Remote config</li></ul><p name="074f" class="graf graf--p graf-after--li">and much more. Firebase is quickly growing to become the most popular mobile app back-end platform.</p><p name="b728" class="graf graf--p graf-after--p">Enough of story-telling, let’s dive into&#8202;—&#8202;how to implement analytics in React Native apps</p><h3 name="531b" class="graf graf--h3 graf-after--p">Structure</h3><p name="50b1" class="graf graf--p graf-after--h3">I will go ahead in step-by-step fashion so you can follow easily.</p><ol class="postList"><li name="37f5" class="graf graf--li graf-after--p">Create a Firebase project and find analytics options</li><li name="9cef" class="graf graf--li graf-after--li">Create a basic React Native app</li><li name="5a26" class="graf graf--li graf-after--li">Running the app on a device</li><li name="9138" class="graf graf--li graf-after--li">Install firebase analytics dependency</li><li name="b9be" class="graf graf--li graf-after--li">Implement analytics in your app</li><li name="6d67" class="graf graf--li graf-after--li">Send analytics event from app to firebase dashboard</li><li name="b444" class="graf graf--li graf-after--li">Check this event on Firebase dashboard.</li></ol><p name="15af" class="graf graf--p graf-after--li">So let’s dive right in!</p><figure tabindex="0" contenteditable="false" name="feb4" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 320px; max-height: 240px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 75%;"></div><img class="graf-image" data-image-id="1*HfUjPCVB8Eer3q22lcuoew.gif" data-width="320" data-height="240" src="https://cdn-images-1.medium.com/max/800/1*HfUjPCVB8Eer3q22lcuoew.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ouch! Let’s&nbsp;….. not&nbsp;dive</figcaption></figure><h3 name="ebea" class="graf graf--h3 graf-after--figure">1. Create a Firebase project and find analytics options</h3><p name="b14b" class="graf graf--p graf-after--h3">Go to <a href="https://console.firebase.google.com/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Firebase</a> and create your first project (or use an existing one). Your console should look like this</p><figure tabindex="0" contenteditable="false" name="f144" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 312px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 44.6%;"></div><img class="graf-image" data-image-id="1*Q1tzpM83Uq66TNZ9E28nYA.png" data-width="800" data-height="357" src="https://cdn-images-1.medium.com/max/800/1*Q1tzpM83Uq66TNZ9E28nYA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Your Firebase projects all in one&nbsp;place</figcaption></figure><p name="0358" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Note</strong>&#8202;—&#8202;It’s really easy to create a Firebase project, but if you still face any issue, follow step 1–4 of <a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">this blog</a></p><p name="8711" class="graf graf--p graf-after--p">Click on your project and you’ll enter the project’s dashboard. Look for the <strong class="markup--strong markup--p-strong">Analytics</strong> tab. This is where the magic will happen!</p><figure tabindex="0" contenteditable="false" name="fb1c" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><img class="graf-image" data-image-id="1*netbb70MBgLb3EsUzO6e8g.png" data-width="1920" data-height="1080" src="https://cdn-images-1.medium.com/max/800/1*netbb70MBgLb3EsUzO6e8g.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Analytics dashboard</figcaption></figure><p name="7bdf" class="graf graf--p graf-after--figure">For setting up options, you’ll first have to create an Android app in Firebase console.</p><figure tabindex="0" contenteditable="false" name="0d4e" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 217px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 31%;"></div><img class="graf-image" data-image-id="1*kZaRFHlVlWW03I_2XC6F5g.png" data-width="1389" data-height="430" src="https://cdn-images-1.medium.com/max/800/1*kZaRFHlVlWW03I_2XC6F5g.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Add a new Android app in&nbsp;Firebase</figcaption></figure><p name="46d8" class="graf graf--p graf-after--figure">During the process, it will ask you to enter app’s <strong class="markup--strong markup--p-strong">package name</strong> and provide <strong class="markup--strong markup--p-strong">google-services.json. </strong>Make sure you keep the package name same as what you are setting in <code class="markup--code markup--p-code">config.xml</code> of your app. (If we create a new project called “<strong class="markup--strong markup--p-strong">HelloWorld</strong>” using react native CLI, by default package name for android project will be “<strong class="markup--strong markup--p-strong">com.helloworld</strong>” and default bundle identifier for iOS app will be “<strong class="markup--strong markup--p-strong">org.reactjs.native.example.HelloWorld</strong>”., don’t use the default package name)</p><figure tabindex="0" contenteditable="false" name="ac2a" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 350px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 50%;"></div><img class="graf-image" data-image-id="1*rtd51fTn_frvjGxUEkhiow.png" data-width="1390" data-height="695" src="https://cdn-images-1.medium.com/max/800/1*rtd51fTn_frvjGxUEkhiow.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Download google-services.json</figcaption></figure><h3 name="c000" class="graf graf--h3 graf-after--figure">2. Create a basic React Native&nbsp;app</h3><p name="f682" class="graf graf--p graf-after--h3">First, make sure you have all pre-requisites to create a react-native app as per the <a href="https://facebook.github.io/react-native/docs/getting-started.html"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">official documentation</a>.</p><blockquote name="cc11" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">At the time of this post, I have React-Native version 0.60</strong></blockquote><p name="2507" class="graf graf--p graf-after--blockquote">Create a blank react-native app (Replace <code class="markup--code markup--p-code">myApp</code> with your own name)</p><pre name="2cb3" class="graf graf--pre graf-after--p">$ react-native init myApp</pre><p name="c53e" class="graf graf--p graf-after--pre">This will create a basic React-native app which you can run in a device or simulator. (either Android or iOS)</p><h3 name="de1e" class="graf graf--h3 graf-after--p">Step 3: Running the app on a&nbsp;device</h3><p name="437c" class="graf graf--p graf-after--h3">To run the iOS app, you should specify simulator</p><pre name="a143" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">react-native run-ios --simulator=”iPhone X”</code></pre><p name="03c1" class="graf graf--p graf-after--pre">To run Android app, you should start emulator first, either via Android Studio or <code class="markup--code markup--p-code">adb</code>&nbsp;, then call</p><pre name="ced5" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">react-native run-android</code></pre><p name="ba77" class="graf graf--p graf-after--pre">You’ll see the default start screen</p><figure tabindex="0" contenteditable="false" name="c76c" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 622px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*TnZfGsKdsWGBUac-0YutpA.jpeg" data-width="350" data-height="622" src="https://cdn-images-1.medium.com/max/800/1*TnZfGsKdsWGBUac-0YutpA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Default start screen for React Native&nbsp;app</figcaption></figure><h3 name="2188" class="graf graf--h3 graf-after--figure">4. Install firebase analytics dependency</h3><p name="1b7c" class="graf graf--p graf-after--h3">Install this module with Yarn:</p><pre name="d896" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">yarn add @react-native-firebase/analytics<br>yarn add </code>@react-native-firebase/app</pre><p name="a06e" class="graf graf--p graf-after--pre">Need to install the module manually? Follow this guide installation guides.</p><h4 name="a28d" class="graf graf--h4 graf-after--p"><strong class="markup--strong markup--h4-strong">Android:-</strong></h4><p name="aefd" class="graf graf--p graf-after--h4">The following steps are only required if you are using React Native &lt;= 0.59 or need to manually integrate the library.</p><p name="d88f" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Update Gradle Settings</strong></p><p name="e7a2" class="graf graf--p graf-after--p">Add the following to your projects <code class="markup--code markup--p-code">/android/settings.gradle</code> file:</p><pre name="6395" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">include ':@react-native-firebase_analytics'<br>project(':@react-native-firebase_analytics').projectDir = new File(rootProject.projectDir, './../node_modules/@react-native-firebase/analytics/android')</code></pre><p name="da82" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">Update Gradle Dependencies</strong></p><p name="5b65" class="graf graf--p graf-after--p">Add the React Native Firebase module dependency to your <code class="markup--code markup--p-code">/android/app/build.gradle</code> file:</p><pre name="fa42" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">dependencies {<br>...<br>implementation project(path: ":@react-native-firebase_analytics")<br>}</code></pre><p name="df2c" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">Add package to the Android Application</strong></p><p name="ebef" class="graf graf--p graf-after--p is-selected">Import and apply the React Native Firebase module package to your <code class="markup--code markup--p-code">/android/app/src/main/java/**/MainApplication.java</code> file:</p><p name="0f65" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Import the package:</strong></p><pre name="dbe2" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import io.invertase.firebase.analytics.ReactNativeFirebaseAnalyticsPackage;</code></pre><p name="fd2d" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">Add the package to the registry:</strong></p><pre name="77bc" class="graf graf--pre graf-after--p">protected List&lt;ReactPackage&gt; getPackages() {<br>return Arrays.asList(<br>new MainReactPackage(),<br>new ReactNativeFirebaseAnalyticsPackage(),</pre><p name="bd10" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">Rebuild the project</strong></p><p name="1af4" class="graf graf--p graf-after--p">Once the above steps have been completed, rebuild your Android project:</p><pre name="4d5c" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">react-native run-android</code></pre><h4 name="c01f" class="graf graf--h4 graf-after--pre"><strong class="markup--strong markup--h4-strong">iOS:-</strong></h4><p name="4e60" class="graf graf--p graf-after--h4">The following steps are only required if you are using React Native &lt;= 0.59 or need to manually integrate the library.</p><p name="8cf8" class="graf graf--p graf-after--p">Installation can be done via CocoaPods (recommended) or via Frameworks:</p><h4 name="6ad8" class="graf graf--h4 graf-after--p">1. CocoaPods Installation</h4><p name="39d2" class="graf graf--p graf-after--h4"><strong class="markup--strong markup--p-strong">Add the RNFBAnalytics Pod</strong></p><p name="01a4" class="graf graf--p graf-after--p">Add the <code class="markup--code markup--p-code">RNFBAnalytics</code> Pod to your projects <code class="markup--code markup--p-code">/ios/Podfile</code>:</p><pre name="4c00" class="graf graf--pre graf-after--p">target 'app' do<br>...<br>pod 'RNFBAnalytics', :path =&gt; '../node_modules/@react-native-firebase/analytics/ios'<br>end</pre><p name="58a6" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">Update Pods &amp; rebuild the project</strong></p><p name="6492" class="graf graf--p graf-after--p">You may need to update your local Pods in order for the <code class="markup--code markup--p-code">RNFBAnalytics</code> Pod to be installed in your project:</p><pre name="3c47" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">$ cd /ios/<br>$ pod install --repo-update</code></pre><p name="b745" class="graf graf--p graf-after--pre">Once the Pods have installed locally, rebuild your iOS project:</p><pre name="34c9" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">react-native run-ios</code></pre><h4 name="ca29" class="graf graf--h4 graf-after--pre">2. Manual Framework Installation</h4><p name="d3cf" class="graf graf--p graf-after--h4">If your environment does not have access to Cocopods, it is still possible to install the project via Frameworks.</p><p name="e483" class="graf graf--p graf-after--p">TODO</p><p name="1652" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Device Identification</strong></p><p name="31d3" class="graf graf--p graf-after--p">If you would like to enable Firebase Analytics to generate automatic audience metrics for iOS (as it does by default in Android), you must link additional iOS libraries, <a href="https://support.google.com/firebase/answer/6318039"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">as documented by the Google Firebase team</a>. Specifically you need <code class="markup--code markup--p-code">libAdIdAccess.a</code> and <code class="markup--code markup--p-code">AdSupport.framework</code>.</p><p name="f6a8" class="graf graf--p graf-after--p">The way to do this using Cocoapods is to add this to your Podfile (though please use <a href="https://cocoapods.org/pods/GoogleIDFASupport"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">the most current Pod version</a> supported by react-native-firebase):</p><p name="9c8a" class="graf graf--p graf-after--p"><code class="markup--code markup--p-code"><strong class="markup--strong markup--p-strong">ios/Podfile</strong></code>:</p><pre name="de69" class="graf graf--pre graf-after--p">// ..<br>target 'app' do<br>// ..<br>pod 'RNFBAnalytics', :path =&gt; '../node_modules/@react-native-firebase/analytics/ios'<br>pod 'GoogleIDFASupport', '~&gt; 3.14.0'<br>end</pre><h3 name="f536" class="graf graf--h3 graf-after--pre">5. Implement analytics in your&nbsp;app</h3><p name="6217" class="graf graf--p graf-after--h3">The Analytics package will automatically start tracking events such as when users clear app data, dismiss notifications and more. To view the full list of automatic events, see <a href="https://support.google.com/firebase/answer/6317485"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">this page</a> of the official Firebase documentation.</p><p name="8c95" class="graf graf--p graf-after--p">The package also provides a JavaScript API to allow for logging custom events and metrics throughout your application.</p><p name="d58e" class="graf graf--p graf-after--p">Import the Cloud Functions package into your project:</p><pre name="7584" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import analytics from '@react-native-firebase/analytics';</code></pre><p name="6fcf" class="graf graf--p graf-after--pre">The package also provides access to the firebase instance:</p><pre name="07ad" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import { firebase } from '@react-native-firebase/analytics';</code></pre><h4 name="0104" class="graf graf--h4 graf-after--pre">Custom events</h4><p name="c957" class="graf graf--p graf-after--h4">To log a custom event, use the <code class="markup--code markup--p-code">logEvent</code> method:</p><pre name="b5cc" class="graf graf--pre graf-after--p">import analytics from '<a href="http://twitter.com/react"  class="markup--anchor markup--pre-anchor" title="Twitter profile for @react"    target="_blank">@react</a>-native-firebase/analytics';<br>async function onProductView() {<br>     await analytics().logEvent('product_view', {<br>                 id: '123456789',<br>                 color: 'red', <br>                 via: 'ProductCatalog',<br>      });<br>}</pre><h4 name="9944" class="graf graf--h4 graf-after--pre">Attaching user&nbsp;data</h4><p name="8cff" class="graf graf--p graf-after--h4">User data can be attached to analytical events via the <code class="markup--code markup--p-code"><a href="https://invertase.io/oss/react-native-firebase/v6/analytics/reference/module#setUserId"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">setUserId</a></code>, <code class="markup--code markup--p-code"><a href="https://invertase.io/oss/react-native-firebase/v6/analytics/reference/module#setUserProperties"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">setUserProperties</a></code> and <code class="markup--code markup--p-code"><a href="https://invertase.io/oss/react-native-firebase/v6/analytics/reference/module#setUserProperty"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">setUserProperty</a></code> methods. Each Firebase project can have up to 25 uniquely named (case-sensitive) user properties.</p><pre name="458c" class="graf graf--pre graf-after--p">import analytics from '<a href="http://twitter.com/react"  class="markup--anchor markup--pre-anchor" title="Twitter profile for @react"    target="_blank">@react</a>-native-firebase/analytics';<br>async function onSignIn(user) {<br> await Promise.all([<br>   analytics().setUserId(user.uid),<br>   analytics().setUserProperty('account_balance', user.balance),<br> ]);<br>}</pre><h4 name="b35e" class="graf graf--h4 graf-after--pre">Tracking screen&nbsp;names</h4><p name="b947" class="graf graf--p graf-after--h4">Similar to Analytics on the web, it’s important to understand the user’s journey within your application, for example, tracking drop off points during an e-commerce transaction flow. The Analytics package provides a method called <code class="markup--code markup--p-code">setCurrentScreen</code> to help track this.</p><pre name="1efc" class="graf graf--pre graf-after--p">import React, { useEffect } from 'react';<br>import { View } from 'react';<br>import analytics from '<a href="http://twitter.com/react"  class="markup--anchor markup--pre-anchor" title="Twitter profile for @react"    target="_blank">@react</a>-native-firebase/analytics';<br>function BasketScreen() {<br>async function trackScreenView(screen) {<br>    // Set &amp; override the MainActivity screen name<br>    await analytics().setCurrentScreen(screen, screen);<br>}<br>// Track a screen view once the component has mounted<br>useEffect(() =&gt; {<br>    trackScreenView('BasketScreen');<br>}, []);<br>  return &lt;View /&gt;;<br>}</pre><h4 name="7c48" class="graf graf--h4 graf-after--pre">Resetting analytics data</h4><p name="ac6d" class="graf graf--p graf-after--h4">In some cases, resetting all analytics data is required on certain events such as signing out of the application. To achieve this call the <code class="markup--code markup--p-code">resetAnalyticsData</code> method.</p><pre name="cec2" class="graf graf--pre graf-after--p">import analytics from '<a href="http://twitter.com/react"  class="markup--anchor markup--pre-anchor" title="Twitter profile for @react"    target="_blank">@react</a>-native-firebase/analytics';<br>async function onSignOut() {<br>    await analytics().resetAnalyticsData();<br>}</pre><h4 name="4dbd" class="graf graf--h4 graf-after--pre">Reserved Events</h4><p name="0dd3" class="graf graf--p graf-after--h4">The Analytics package works out of the box, however a number of events are automatically reported to Firebase. These event names are called as ‘Reserved Events’. Attempting to send any custom event using the <code class="markup--code markup--p-code">logEvent</code> method with any of the following event names will throw an error.</p><p name="d8ae" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Reserved event list</strong></p><ul class="postList"><li name="07eb" class="graf graf--li graf-after--p"><code class="markup--code markup--li-code">app_clear_data</code></li><li name="e8ca" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">app_uninstall</code></li><li name="96ca" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">app_update</code></li><li name="9033" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">error</code></li><li name="2bcf" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">first_open</code></li><li name="5f89" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">first_visit</code></li><li name="d520" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">first_visit</code></li><li name="36e1" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">first_open_time</code></li><li name="3ac6" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">first_visit_time</code></li><li name="cf67" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">in_app_purchase</code></li><li name="4ccd" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">in_app_purchase</code></li><li name="91c9" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">notification_dismiss</code></li><li name="d8c3" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">notification_foreground</code></li><li name="224e" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">notification_open</code></li><li name="5895" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">notification_receive</code></li><li name="431c" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">os_update</code></li><li name="2a5c" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">session_start</code></li><li name="f0b9" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">screen_view</code></li><li name="8dbb" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">user_engagement</code></li><li name="f118" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">ad_impression</code></li><li name="9b50" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">ad_click</code></li><li name="90fc" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">ad_query</code></li><li name="ee13" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">ad_exposure</code></li><li name="9225" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">adunit_exposure</code></li><li name="ab97" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">ad_activeiew</code></li></ul><h3 name="1a1b" class="graf graf--h3 graf-after--li">6. Send analytics event from app to firebase dashboard</h3><p name="d673" class="graf graf--p graf-after--h3">Prepare a simple event from our app and send it to all Firebase console. For sending app event to dashboard I am just creating one component named it <code class="markup--code markup--p-code"><strong class="markup--strong markup--p-strong">Analytics.js</strong></code></p><figure tabindex="0" contenteditable="false" name="8bbe" class="graf graf--figure graf--iframe is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/c4fe7fd11ce9d3b708bd64f5472f9de4.js %}</div></div></figure><p name="885a" class="graf graf--p graf-after--figure">Import this component to your <code class="markup--code markup--p-code"><strong class="markup--strong markup--p-strong">app.js</strong></code> File like this.</p><figure tabindex="0" contenteditable="false" name="1811" class="graf graf--figure graf--iframe is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/54d5effd1a9fcb4317b234e334643a81.js %}</div></div></figure><figure tabindex="0" contenteditable="false" name="7940" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 200%;"></div><img class="graf-image" data-image-id="1*5qY47XxItaWIYiF4AIuwDw.jpeg" data-width="300" data-height="600" src="https://cdn-images-1.medium.com/max/800/1*5qY47XxItaWIYiF4AIuwDw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">analytics screen</figcaption></figure><p name="949f" class="graf graf--p graf-after--figure">We have added three buttons here for three events</p><ol class="postList"><li name="c684" class="graf graf--li graf-after--p">Custom Event</li><li name="596f" class="graf graf--li graf-after--li">Set User Event</li><li name="4009" class="graf graf--li graf-after--li">Reset Analytics Data Event</li></ol><p name="d4c6" class="graf graf--p graf-after--li">So when you click on any of these buttons you can your app events recorded in Firebase dashboard.</p><h3 name="ba9f" class="graf graf--h3 graf-after--p">7. Check this event on Firebase dashboard.</h3><p name="28b8" class="graf graf--p graf-after--h3">Attention: if the app is running with <code class="markup--code markup--p-code">-FIRDebugEnabled</code> it shouldn't take more than a few seconds for events to start appearing on the DebugView.</p><h4 name="6957" class="graf graf--h4 graf-after--p">Dashboard View:-</h4><figure tabindex="0" contenteditable="false" name="0ec6" class="graf graf--figure graf-after--h4"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 309px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 44.2%;"></div><img class="graf-image" data-image-id="1*QD9ovLuzaIQvwYuSpvjr3A.png" data-width="1907" data-height="843" src="https://cdn-images-1.medium.com/max/800/1*QD9ovLuzaIQvwYuSpvjr3A.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Analytics Dashboard View</figcaption></figure><h4 name="6dd3" class="graf graf--h4 graf-after--figure">Event View:-</h4><figure tabindex="0" contenteditable="false" name="616b" class="graf graf--figure is-defaultValue graf-after--h4"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 307px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 43.9%;"></div><img class="graf-image" data-image-id="1*NoUairmsrso6OIEzcelotQ.png" data-width="1913" data-height="839" src="https://cdn-images-1.medium.com/max/800/1*NoUairmsrso6OIEzcelotQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="3cf7" class="graf graf--h4 graf-after--figure">Event Details&nbsp;View:-</h4><figure tabindex="0" contenteditable="false" name="bb46" class="graf graf--figure graf-after--h4"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 305px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 43.6%;"></div><img class="graf-image" data-image-id="1*vRHpI6_IJd6jvG8DNxMwIw.png" data-width="1913" data-height="834" src="https://cdn-images-1.medium.com/max/800/1*vRHpI6_IJd6jvG8DNxMwIw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Event Details&nbsp;view</figcaption></figure><h3 name="bcd6" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="f332" class="graf graf--p graf-after--h3">In this post, we learnt how to implement Analytics using Firebase in React native apps. We also learnt how to handle different types of actions and see their data in the dashboard.</p><blockquote name="fe81" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Complete code of this post can be found in the Github repository </strong><a href="https://github.com/enappd/AnalyticsData.git"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">react-native-firebase-analytics</strong></a><a href="https://github.com/enappd/ionic-4-in-app-purchase"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">(master branch)</strong></a></blockquote><h3 name="93d1" class="graf graf--h3 graf-after--blockquote">Next Steps</h3><p name="0993" class="graf graf--p graf-after--h3">Now that you have learnt about setting up Analytics in React Native apps, here are some other topics you can look into</p><ul class="postList"><li name="6f8d" class="graf graf--li graf-after--p">Firebase&#8202;—&#8202;<a href="https://enappd.com/blog/intergrate-firebase-in-react-native-app/73"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">Integrate Firebase</a> | <a href="https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">Push notifications</a> | <a href="https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">Firebase CRUD</a></li><li name="ce44" class="graf graf--li graf-after--li">How To in React Native&#8202;—&#8202;<a href="https://enappd.com/blog/geolocation-geocoding-react-native-apps/84"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Geolocation</a> | <a href="https://enappd.com/blog/react-native-life-cycle-hooks/79"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Life cycle hooks</a> | <a href="https://enappd.com/blog/pick-images-from-camera-gallery-in-react-native-app/78"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Image Picker</a> | <a href="https://enappd.com/blog/redux-in-react-native-app/92"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Redux implementation</a> | <a href="https://enappd.com/blog/how-to-make-api-calls-in-react-native-apps/125"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Make API calls</a> | <a href="https://enappd.com/blog/navigations-in-react-native-app/124"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Navigation</a> | <a href="https://enappd.com/blog/how-to-translate-in-react-native-app-globalization-internationalization-and-text-to-speech/120"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Translation</a> | <a href="https://enappd.com/blog/react-native-qr-code-scanning-using-react-native-camera/117"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Barcode &amp; QR code scan</a> | <a href="https://enappd.com/blog/send-read-and-delete-sms-in-react-native/107"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Send &amp; Read SMS</a> | <a href="https://enappd.com/blog/google-vision-with-react-native/96"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google Vision</a></li><li name="e480" class="graf graf--li graf-after--li">Payments&#8202;—&#8202;<a href="https://enappd.com/blog/implement-apple-pay-in-react-native-apps/93"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Apple Pay</a> | <a href="https://enappd.com/blog/stripe-integration-in-react-native-apps-using-firebase/108"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Stripe payments</a></li><li name="4d3b" class="graf graf--li graf-after--li">Authentication&#8202;—&#8202;<a href="https://enappd.com/blog/google-login-in-react-native-android-apps-with-firebase/90"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Google Login</a>| <a href="https://enappd.com/blog/facebook-login-in-react-native-apps/89"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Facebook login</a> | <a href="https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Phone Auth</a> | <a href="https://enappd.com/blog/twitter-login-in-react-native-apps-using-firebase/95"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter login</a> | <a href="https://enappd.com/blog/anonymous-login-in-react-native-apps-with-firebase/129"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Anonymous Login</a></li><li name="2ccd" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-make-stories-ui-like-instagram-and-whatsapp-in-react-native/123"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Create Instagram / Whatsapp Story Feature in React Native</a></li><li name="01c3" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/react-native-life-cycle-hooks/79"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">React Native life cycle hooks</a> | <a href="https://enappd.com/blog/redux-in-react-native-app/92"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Implement Redux</a> | <a href="https://enappd.com/blog/async-actions-with-redux-thunk-middleware-in-react-native-apps-1/100"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Async actions with Redux</a></li><li name="8db9" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/guide-on-react-native-full-app/53"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Create Awesome Apps in React Native</a> using Full App</li></ul><p name="28d0" class="graf graf--p graf-after--li">If you need a base to start your next React Native app, you can make your next awesome app using <a href="https://store.enappd.com/product/react-native-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">React Native Full App</a></p><figure tabindex="0" contenteditable="false" name="e4d4" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 700px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 100%;"></div><img class="graf-image" data-image-id="1*sWyEeAfCMk7ULOkLUCdSug.jpeg" data-width="800" data-height="800" src="https://cdn-images-1.medium.com/max/800/1*sWyEeAfCMk7ULOkLUCdSug.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">React Native Full&nbsp;App</figcaption></figure><p name="4b33" class="graf graf--p graf--empty graf-after--figure graf--trailing" ><br></p></div></div></section></div></article></main>