Google Analytics Implement in React Native Android iOS App Tutorial

Google Analytics is world’s most usable online user tracking service provided by Google to us. Using this service we can track users behaviour like how much users are currently online on our website our application and their country location and their visiting pattern and much more. This data is very helpful for website and application developers to increase their growth online and help them to aim on the right content. So in this tutorial we would going to integrate Google Analytics Implement in React Native Android iOS App Example Tutorial. We are using GoogleAnalyticsBridge NPM library in order to implement Google Analytics in our application, This library gives us an easy interface from where we can easily access the Google Analytics features. So let’s get started 🙂 .

Contents in this project Google Analytics Implement in React Native Android iOS Application Example Tutorial:

1. The First step is to install the GoogleAnalyticsBridge NPM library in our react native project. So open your project folder in CMD like we did in below screenshot and execute the below command.

Screenshot after done installation:

NoteIt would take about 5 to 7 minutes to install this library so be patience and make sure while you are doing this your computer is connected to internet.

2. After done installation we need to execute the link command in order to refresh and re-arranged the complete project and index the newly installed GoogleAnalyticsBridge library in our react native project. Execute the below command:

Screenshot after successfully executing above command:

Google Analytics Implement in React Native Android iOS App Tutorial3. Now your application configuration part is done, Next step is to register your react native app on Google Analytics website and get your Tracking ID. Without the tracking ID you cannot track your application Statics. So open Google Analytics Official Website and login with your Google Gmail Account.

4. After login, If you are doing this first time then you’ll see a prompt window so simply click on Sign UP button.

5. On the next page you need to fill all the details like we did in below screenshot.

6. After clicking on Get Tracking ID button you’ll get the Google Analytics Application Tracking ID on the next page. You have to copied the Tracking ID on the notepad because we have to use this tracking ID while writing the react native code.

7. Next step is to start coding, Open your App.js file.

8. Import Platform, StyleSheet, View and Text component in your project.

9. Import GoogleAnalyticsTracker and GoogleAnalyticsSettings components in your project from react-native-google-analytics-bridge library.

10. You have to make a global let variable named as tracker1 and make the object of Google Analytics Tracker object and pass your own Tracking ID along with it.

11. Create componentDidMount() function in your main class and using the tracker1 object we would set the Screen name. This screen name would show us in Google Analytics dashboard.

tracker1.trackScreenView : Used to set the Screen Name, This screen name will show on the Analytics dashboard.

GoogleAnalyticsSettings.setDispatchInterval(30) : Again send the tracking activation response after 30 seconds.

12. Creating a simple text component in render’s return block.

13. Creating Style.

14. Complete source code for App.js File :

Screenshot:

Screenshot of Google Analytics after running the app:

Leave a Reply

Your email address will not be published. Required fields are marked *