retracked

Event tracking for React components

Showing:

Popularity

Downloads/wk

1

GitHub Stars

49

Maintenance

Last Commit

6yrs ago

Contributors

3

Package

Dependencies

0

Size (min+gzip)

0.5KB

License

Apache-2.0

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Retracked

A little library to streamline 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 wrapping in a context:

var AboutApp = React.createClass({

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

});

module.exports = Retracked.provideTracking(AboutApp);

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>
    );
  }

});

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>

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100