club-react-native-google-analytics
Google Analytics for React Native!
Getting started
npm install club-react-native-google-analytics@latest --save
Usage
Below is an example that utilizes this library along with enhanced ecommerce functionality and react-native-ab
for A/B testing.
;const StyleSheet Text View TouchableHighlight } = React;;;; let ga = thisga = null; Component state = experiments: {} { let clientId = DeviceInfo; ga = 'UA-XXXXXXXX-X' clientId 1 DeviceInfo extra = {}; let screenView = 'Example App' 'Welcome Screen' DeviceInfo DeviceInfo ; ga; } { return <View style=stylescontainer> <TouchableHighlight onPress=this_resetExperiment> <View> <Experiment ref="welcomeMessageTest" name="welcome-message" onChoice=this_onChoice> <Variant name="standard"> <Text style=styleswelcome> Welcome to React Native! </Text> </Variant> <Variant name="friendly"> <Text style=styleswelcome> Hey there! Welcome to React Native! </Text> </Variant> <Variant name="western"> <Text style=styleswelcome> Howdy partner! This here is React Native! </Text> </Variant> </Experiment> </View> </TouchableHighlight> <TouchableHighlight onPress=this_addImpression> <Text style=stylesaddImpressionTest> Add GA Impression </Text> </TouchableHighlight> <TouchableHighlight onPress=this_sendEvent> <Text style=stylessendEventTest> Send GA Event </Text> </TouchableHighlight> <Text style=stylesinstructions> To get started edit indexiosjs </Text> <Text style=stylesinstructions> Press Cmd+R to reload'\n' Cmd+Control+Z for dev menu </Text> </View> ; } { let experiment = testName variantName; let state = ...thisstate; stateexperimentstestName = experiment; this; } { thisrefswelcomeMessageTest; } { let experiment = thisstateexperiments'welcome-message'; let gaEvent = 'Demos' 'send' 'React Native' 100 experiment ; ga; } { var gaImpression = "P12345" "Product Name" "Product List" "Product Brand" "Product Category" "Product Variant" 0 // Position 200 // Price ; ga; } const styles = StyleSheet;
Example of how to use custom dimensions:
// Add a custom dimension with a given index & name ga; // This will add &cd1=male to all hits ga; // To remove a custom dimension ga;
TODO: App example that doesn't use react-native-ab
API
Enhanced Ecommerce Hits
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 GAHits.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.
Coming soon the rest of the API. For now, refer to the usage section.