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.

<br />
npm install –save react-native-google-analytics-bridge

1	npm install —save react–native–google–analytics–bridge

Screenshot after done installation:

Note: It 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:

<br />
react-native link react-native-google-analytics-bridge

1	react–native link react–native–google–analytics–bridge

Screenshot after successfully executing above command:

3. 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.

<br />
import React, { Component } from ‘react’;</p>
<p>import { Platform, StyleSheet, View, Text } from ‘react-native’;

import React, { Component } from ‘react’;

import { Platform, StyleSheet, View, Text } from ‘react-native’;

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

<br />
import { GoogleAnalyticsTracker, GoogleAnalyticsSettings } from “react-native-google-analytics-bridge”;

1	import { GoogleAnalyticsTracker, GoogleAnalyticsSettings } from “react-native-google-analytics-bridge”;

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.

<br />
let tracker1 = new GoogleAnalyticsTracker(“UA-126211194-1”);

1	let tracker1 = new GoogleAnalyticsTracker(“UA-126211194-1”);

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.

<br />
export default class App extends Component {</p>
<p>  componentDidMount(){</p>
<p>    tracker1.trackScreenView(“Home Screen”);</p>
<p>    GoogleAnalyticsSettings.setDispatchInterval(30);</p>
<p>  }</p>
<p>}

export default class App extends Component {

componentDidMount(){

tracker1.trackScreenView(“Home Screen”);

GoogleAnalyticsSettings.setDispatchInterval(30);

}

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

<br />
render() {</p>
<p>    return (</p>
<p>      <View style={styles.MainContainer}></p>
<p>        <Text style={{textAlign: ‘center’}}>Google Analytics Integration in React Native App</Text></p>
<p>      </View></p>
<p>    );<br />
  }

render() {

return (

<Text style={{textAlign: ‘center’}}>Google Analytics Integration in React Native App</Text>

</View>

);

}

13. Creating Style.

<br />
const styles = StyleSheet.create({</p>
<p>  MainContainer: {</p>
<p>    flex: 1,<br />
    paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,<br />
    justifyContent: ‘center’,<br />
    margin: 20</p>
<p>  }</p>
<p>});

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,

justifyContent: ‘center’,

margin: 20

}

});

14. Complete source code for App.js File :

<br />
import React, { Component } from ‘react’;</p>
<p>import { Platform, StyleSheet, View, Text } from ‘react-native’;</p>
<p>import { GoogleAnalyticsTracker, GoogleAnalyticsSettings } from “react-native-google-analytics-bridge”;</p>
<p>let tracker1 = new GoogleAnalyticsTracker(“UA-126211194-1”);</p>
<p>export default class App extends Component {</p>
<p>  componentDidMount(){</p>
<p>    tracker1.trackScreenView(“Home Screen”);</p>
<p>    GoogleAnalyticsSettings.setDispatchInterval(30);</p>
<p>  }</p>
<p>  render() {</p>
<p>    return (</p>
<p>      <View style={styles.MainContainer}></p>
<p>        <Text style={{textAlign: ‘center’}}>Google Analytics Integration in React Native App</Text></p>
<p>      </View></p>
<p>    );<br />
  }<br />
}</p>
<p>const styles = StyleSheet.create({</p>
<p>  MainContainer: {</p>
<p>    flex: 1,<br />
    paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,<br />
    justifyContent: ‘center’,<br />
    margin: 20</p>
<p>  }</p>
<p>});