Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
@brandingbrand/react-native-google-analytics
Advanced tools
Readme
Google Analytics for React Native!
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.
'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 (
<View style={styles.container}>
<TouchableHighlight onPress={this._resetExperiment}>
<View>
<Experiment
ref="welcomeMessageTest"
name="welcome-message"
onChoice={this._onChoice}>
<Variant name="standard">
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
</Variant>
<Variant name="friendly">
<Text style={styles.welcome}>
Hey there! Welcome to React Native!
</Text>
</Variant>
<Variant name="western">
<Text style={styles.welcome}>
Howdy, partner! This here is React Native!
</Text>
</Variant>
</Experiment>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={this._sendEvent}>
<Text style={styles.feature}>
Send GA Event
</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this._productImpression}>
<Text style={styles.feature}>
Add GA Product Impression
</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this._promoImpression}>
<Text style={styles.feature}>
Add GA Promo Impression
</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this._clickProduct}>
<Text style={styles.feature}>
Set GA Product Click
</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this._clickPromo}>
<Text style={styles.feature}>
Set GA Promo Click
</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this._productDetail}>
<Text style={styles.feature}>
Set GA Product Detail
</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this._addProductCart}>
<Text style={styles.feature}>
Set GA Add Product to Cart
</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this._removeProductCart}>
<Text style={styles.feature}>
Set GA Remove Product from Cart
</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this._checkout}>
<Text style={styles.feature}>
Set GA Checkout
</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this._checkoutOption}>
<Text style={styles.feature}>
Set GA Checkout Option
</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this._purchase}>
<Text style={styles.feature}>
Set GA Purchase
</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this._refundAll}>
<Text style={styles.feature}>
Set GA Refund All
</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this._refundProduct}>
<Text style={styles.feature}>
Set GA Refund Product
</Text>
</TouchableHighlight>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+Control+Z for dev menu
</Text>
</View>
);
},
_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:
// 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.
No parameters accepted
No parameters accepted
No parameters accepted
* Either id or name must be set.
* Either id or name must be set.
* Either id or name must be set.
Coming soon the rest of the API. For now, refer to the usage section.
FAQs
Google Analytics for React Native!
The npm package @brandingbrand/react-native-google-analytics receives a total of 1,076 weekly downloads. As such, @brandingbrand/react-native-google-analytics popularity was classified as popular.
We found that @brandingbrand/react-native-google-analytics demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 64 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.