Google Analytics for React Native!
npm install @brandingbrand/react-native-google-analyticsGoogle Analytics for React Native!
1. npm install react-native-google-analytics@latest --save
Below is an example that utilizes this library along with enhanced ecommerce functionality and react-native-ab for A/B testing.
``javascript
'use strict';
import React, { Component } from 'react-native';
const {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight
} = React;
import { Experiment, Variant } from 'react-native-ab';
import {
Analytics,
Actions as GAActions,
Hits as GAHits,
Experiment as GAExperiment
} from 'react-native-google-analytics';
import DeviceInfo from 'react-native-device-info';
var ga = this.ga = null;
var rnabtest = React.createClass({
getInitialState() {
return {
experiments: {}
};
},
componentWillMount() {
let clientId = DeviceInfo.getUniqueID();
ga = new Analytics('UA-XXXXXXXX-X', clientId, 1, DeviceInfo.getUserAgent());
var screenView = new GAHits.ScreenView(
'Example App',
'Welcome Screen',
DeviceInfo.getReadableVersion(),
DeviceInfo.getBundleId()
);
ga.send(screenView);
},
render() {
return (
name="welcome-message"
onChoice={this._onChoice}>
Welcome to React Native!
Hey there! Welcome to React Native!
Howdy, partner! This here is React Native!
Send GA Event
Add GA Product Impression
Add GA Promo Impression
Set GA Product Click
Set GA Promo Click
Set GA Product Detail
Set GA Add Product to Cart
Set GA Remove Product from Cart
Set GA Checkout
Set GA Checkout Option
Set GA Purchase
Set GA Refund All
Set GA Refund Product
To get started, edit index.ios.js
Press Cmd+R to reload,{'\n'}
Cmd+Control+Z for dev menu
);
},
_onChoice(testName, variantName) {
var experiment = new GAExperiment(testName, variantName);
var state = this.state;
state.experiments[testName] = experiment;
this.setState(state);
},
_resetExperiment() {
this.refs.welcomeMessageTest.reset();
},
_sendEvent() {
var experiment = this.state.experiments['welcome-message'];
var gaEvent = new GAHits.Event(
'Demos',
'send',
'React Native',
100,
experiment
);
ga.send(gaEvent);
}
_productImpression() {
var gaProductImpression = new GAHits.Impression(
"P12345",
"Product Name",
"Product List",
"Product Brand",
"Product Category",
"Product Variant",
0, // Position
200 // Price
);
ga.add(gaProductImpression);
}
_promoImpression() {
var gaPromo = new GAHits.Promo(
"PROMO12345",
"Promo Name",
"Promo Creative",
"Promo Position"
);
ga.add(gaPromo);
}
_clickProduct() {
var gaProduct = new GAHits.Product(
"P12345",
"Product Name",
"Product Brand",
"Product Category",
"Product Variant",
"Product Coupon",
250, // Price
1, // Quantity
25 // Position
);
ga.add(gaProduct);
var gaClickAction = new GAActions.Click("Product List");
ga.set(gaClickAction);
}
_clickPromo() {
var gaPromo = new GAHits.Promo(
"PROMO12345",
"Promo Name",
"Promo Creative",
"Promo Position"
);
ga.add(gaPromo);
var gaPromoClickAction = new GAActions.PromoClick();
ga.set(gaPromoClickAction);
}
_productDetail() {
var gaProduct = new GAHits.Product(
"P12345",
"Product Name",
"Product Brand",
"Product Category",
"Product Variant",
"Product Coupon",
250, // Price
1, // Quantity
25 // Position
);
ga.add(gaProduct);
var gaDetailAction = new GAActions.Detail();
ga.set(gaDetailAction);
}
_addProductCart() {
var gaProduct = new GAHits.Product(
"P12345",
"Product Name",
"Product Brand",
"Product Category",
"Product Variant",
"Product Coupon",
250, // Price
1, // Quantity
25 // Position
);
ga.add(gaProduct);
var gaAddAction = new GAActions.Add();
ga.set(gaAddAction);
}
_removeProductCart() {
var gaProduct = new GAHits.Product(
"P12345",
"Product Name",
"Product Brand",
"Product Category",
"Product Variant",
"Product Coupon",
250, // Price
1, // Quantity
25 // Position
);
ga.add(gaProduct);
var gaRemoveAction = new GAActions.Remove();
ga.set(gaRemoveAction);
}
_checkout() {
var gaProduct = new GAHits.Product(
"P12345",
"Product Name",
"Product Brand",
"Product Category",
"Product Variant",
"Product Coupon",
250, // Price
1, // Quantity
25 // Position
);
ga.add(gaProduct);
var gaCheckoutAction = new GAActions.Checkout(1, "Visa");
ga.set(gaCheckoutAction);
}
_checkoutOption() {
var gaCheckoutOptionAction = new GAActions.CheckoutOption(2, "FedEx");
ga.set(gaCheckoutOptionAction);
}
_purchase() {
var gaProduct = new GAHits.Product(
"P12345",
"Product Name",
"Product Brand",
"Product Category",
"Product Variant",
"Product Coupon",
250, // Price
1, // Quantity
25 // Position
);
ga.add(gaProduct);
var gaPurchaseAction = new GAActions.Purchase("T12345", "Product Store", 35, 3, 5, "LABORDAY2017");
ga.set(gaPurchaseAction);
}
_refundAll() {
var gaRefundAction = new GAActions.Refund("T12345");
ga.set(gaRefundAction);
}
_refundProduct () {
var gaProduct = new GAHits.Product(
"P12345",
"Product Name",
"Product Brand",
"Product Category",
"Product Variant",
"Product Coupon",
250, // Price
1, // Quantity
25 // Position
);
ga.add(gaProduct);
var gaRefundAction = new GAActions.Refund("T12345");
ga.set(gaRefundAction);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
feature: {
color: 'black',
fontSize: 16,
textAlign: 'center'
}
});
AppRegistry.registerComponent('rnabtest', () => rnabtest);
`
Example of how to use custom dimensions:
`javascript``
// Add a custom dimension with a given index & name
ga.addDimension(1, 'male'); // This will add &cd1=male to all hits
ga.addDimension(2, 'female');
// To remove a custom dimension
ga.removeDimension(1);
TODO: App example that doesn't use react-native-ab
The enhanced ecommerce hits are not sent automatically, instead they are retained until a regular hit is sent. For more documentation please go here.
#### new Actions.Add()
No parameters accepted
#### new Actions.Checkout(step, option)
* step (optional): number
* option (optional): string
#### new Actions.CheckoutOption(step, option)
* step (optional): number
* option (optional): string
#### new Actions.Click(list)
* list (optional): string
#### new Actions.Detail(list)
* list (optional): string
#### new Actions.PromoClick()
No parameters accepted
#### new Actions.Purchase(id, affiliation, revenue, tax, shipping, coupon)
* id (required): string
* affiliation (optional): string
* revenue (optional): number
* tax (optional): number
* shipping (optional): number
* coupon (optional): string
#### new Actions.Refund(id, isNonInteractive)
* id (required): string
* isNonInteractive (optional): boolean
#### new Actions.Remove()
No parameters accepted
#### new Hits.Impression(id, name, list, brand, category, variant, position, price)
id (required): string
name (required): string
* list (required): string
* brand (optional): string
* category (optional): string
* variant (optional): string
* position (optional): number
* price (optional): number
\* Either id or name must be set.
#### new Hits.Product(id, name, brand, category, variant, coupon, price, quantity, position)
id (required\): string
name (required\): string
* brand (optional): string
* category (optional): string
* variant (optional): string
* coupon (optional): string
* price (optional): number
* quantity (optional): number
* position (optional): number
\* Either id or name must be set.
#### new Hits.Promo(id, name, creative, position)
id (required\): string
name (required\): string
* creative (optional): string
* position (optional): string
\* Either id or name must be set.
Coming soon the rest of the API. For now, refer to the usage section.