Retracked

A little library to simplify event tracking in React components.

Basic event tracking

Set it up in your bootstrap:

var myTracker = require('awesomeTracker');
var retracked = require('retracked');

var recordingFn = (fullEventKey, values) =>
  myTracker.record(fullEventKey, values);

// event types that we track
var actionNames = [
  'view',
  'click', // or tap
  'hover',
  'scroll',
  'swipe',
  'pinch',
  'expand',
];

retracked.setup(recordingFn, actionNames);

Then in your components you can namespace the event tracking by context:

var AboutApp = React.createClass({

  childContextTypes: {
    track: React.PropTypes.func,
  },

  getChildContext: function() {
    return {
      track: Retracked.makeTracker({
        namespace: 'about'
      })
    };
  },

  render: function() {
    return (
      <div>
        <JobsPage />
      </div>
    );
  }

});

Then you can use that anywhere down the ownership hierarchy:

var JobsPage = React.createClass({

  contextTypes: {
    track: React.PropTypes.func.isRequired
  },

  componentDidMount: function() {
    // track this event right now
    this.context.track('view.jobs');
  }

  render: function() {
    return (
      <div>
        {/* curried function to track when a click happens */}
        <button label="Apply" onClick={this.context.track.handle('click.apply')} />
      </div>
    );
  }

});

Isomorphic link tracking

This package contains a component, TrackedLink, that abstracts away defining links on which you want to track clicks, so that they fire events both in regular client-side rendering and also from server-side rendered HTML before the full Javascript assets have downloaded and the full components have mounted.

For example,

    <TrackedLink
      className="open-in-app btn"
      to={appStoreUrl}
      trackingName="download_app"
    >
      Download our App
    </TrackedLink>