This is not a post about what to measure and why - just a quick 101 to fill in the gaps on how to get started (at least for newbies like me) when creating events to your React Native apps using open-source wrappers.

By the end of this tutorial, you should be able to get up and running with your own custom events on Answers. At least for non-programming POs like me, this is an awesome way to get to know your product's code-base and structure - you also save your team's working time to build "something new" and also get to show that you're not so useless after all!

What we'll be using

Prerequisities

  • You have a React Native project on your local machine
  • You have the necessary dev tools and command line tools to spin up RN projects
  • You can read and copy-paste

What we'll cover

  • This tutorial starts from the point of successfully initializing Fabric with Crashlytics and Answers to your project, focuses on where to put those little pieces of JavaScript and ends when we've created your first event

Alright, let's get started then!

Initialize Fabric to your project

If you don't know what Fabric is, feel free to read more from Fabric.io. It's awesome and you definitely should use it.

To get up and running with Fabric, follow corymsmith's instructions step-by-step and you're good to go. For iOS, I definitely suggest you to use Fabric's desktop app and for Android to stay away from Android Studio (it's dreadful) - you're better off with your favorite code editor.

Answers Events in React Native

If you're like me, you are now staring at the Github repo's "Answers Usage" section and trying to figure out where the hell to put those JS code snippets. For me my savior was our developer Ville who helped me to figure it out. For you, I'm your Ville.

Firstly, it's good to know something about the structure of your React Native app. On the root of your app you have a folder called src which has the building blocks of your final native applications. Src folder is further divided into common and native folders, from which native is of great interest to us; it holds the true building blocks of the native code that those ios and android folders on your root contain.

Inside our native folder we have app, assets, components and pages. From these me and most possibly you as well have special affection for components and pages, as those are the ones having possession of our apps pages and their different components - which in the other hand contain all the moving and touchable parts of our apps: Events, that is.

Alright, now that you know how your React Native app is structured, let's create our first event!

Creating your first event

The wrapper we use supports all event types Answers provides. They are called and structured as follows:

Answers.logEvent('value1', 'value2', {<title-of-custom-attribute: 'value'});

So uhmmmmm, what?

Answers = tells RN that what is to come has something to do with Answers

logEvent = the event you want to track. Answers provides a good set of common events having predefined data structure, but you can create custom events as well

'value1' = the human readable name you want to give to your event

value2 = depends on the event type, these vary and can be plenty. Check the docs on GitHub.

{<title-of-custom-attribute: 'value'} = every event type takes custom attributes as an array as the last parameter. These are totally up to you and can get as meta as you want.

Alright, we are good to go! Not so fast. We still need to tell our app where to find Answers related functions and stuff (that's how I see it!). To demonstrate this, we need to locate the file where our event-to-track exists. Bear with me.

Actually creating your first event

Let's say that we want to track how many times a certain content type is opened. In our app, the content type I'm interested in is an offer and lives inside an OfferView component. Therefore, the file in hand is under components/Offers/OfferView/index.react.js - react.js being where the magic happens!

At the top of the file is something that is crucial for our purposes: import commands. They tell the file what kind of stuff to fetch to make magic happen. For example, it fetches some kind of components from React library:

import React, { Component, PropTypes } from 'react';

To be able to send events to Answers, we need to also import Answers magic into the file. This is done as follows (and also overrides the var thingies proposed on corymsmith's repo - Ville told me they are not the best way to go):

import Fabric from 'react-native-fabric'; const { Answers } = Fabric;

So go ahead and copy-paste that piece of JS goodness to your file - make sure not to paste it before you import all fundamental React components.

Finally creating the event

Alright now we have all we need to create the event - only thing left is to find the event from our code and attach Answers event to it. EASY!

In our case opening an offer activates the offer in hand, which in code language is called this.props.offer in our application. Using this rather loveless name we can create a componentDidMount to interact with the browser and get the offer information sent to Answers. It looks something like this:

componentDidMount() { Answers.logContentView('Offer opened', this.props.offer.get('advertiser'), 'offerOpen', {'category' : this.props.offer.get('primaryCategory')}); }

If this doesn't make any sense to you, don't worry :) Just ask the devs in your team to quickly explain how the events are handled in your app and you'll see the light. The point is that implementing events is pretty straight forward after you've located the correct file, imported Answers and found the event you were looking for.

Mkay, but what happens then?

There you have it! Just run your app on development mode, trigger the event, reopen the app and those events start pouring in to your Answers dashboard.

It's like magic. And you did it all by yourself!