retracked
retracked
npm i retracked
retracked

retracked

Event tracking for React components

by coursera

0.1.1 (see all)License:Apache-2.0TypeScript:Not Found
npm i retracked
Readme

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

});

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>

Downloads/wk

0

GitHub Stars

49

LAST COMMIT

7yrs ago

MAINTAINERS

1

CONTRIBUTORS

3

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
0.1.1
latest
7yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate