react-tracking

New Features

• Deep-merge tracking data (#14) We now do a deep-merge of the tracking data. Previously we were doing a shallow-merge which meant that tracking data that shared a subkey would "lose" to the deepest version.
• Exporting TrackingPropTypes (#18) you can now import the PropTypes definition for the tracking context object, if needed.
• options.dispatchOnMount (#16) The "auto-dispatch" behavior is now opt-in. See Breaking Changes below for more info.

Breaking Changes

We no longer "auto-dispatch" when seeing tracking data like { page: 'FooPage' }. Instead you can opt-in to auto-dispatching by passing in options.dispatchOnMount, which will dispatch the tracking data when the component mounts. Like so:

@track({ page: 'FooPage' }, { dispatchOnMount: true })
export default class FooPage extends Component { ... }

This also means the previous behavior of automatically including { event: 'pageDataReady' } is no longer the case, and if this needs to be part of your tracking data you will have to manually include it where necessary.

See the README for more info.

New Features

You can now provide a custom dispatch() function (#10) as the second argument to a top-level decorated component. If provided, this dispatch function will be called to dispatch tracking data instead of the default behavior of dispatching CustomEvents on document.

See README for usage details.

Breaking Changes

The default "pageview" event changed (#11) from:

{ action: 'pageview' }

to

{ event: 'pageDataReady' }

There's now a single decorator ( #6 ) that's a default export of this library that you can use instead of the two named exports, withTracking and trackEvent. Those two methods are still named exports so this version is backwards compatible with previous versions, but the single decorator is now the preferred method and we may deprecate the named exports in the future.

This single decorator works on Classes, class methods and stateless functional components in the same way.

So, instead of:

import React, { Component } from 'react';
import { withTracking, trackEvent } from 'nyt-react-tracking';

@withTracking({ page: 'FooPage' })
export default class FooPage extends Component {

  @trackEvent({ action: 'click' })
  handleClick = () => {
    // ...
  }
// ...
}

You can now just do:

import React, { Component } from 'react';
import track from 'nyt-react-tracking';

@track({ page: 'FooPage' })
export default class FooPage extends Component {

  @track({ action: 'click' })
  handleClick = () => {
    // ...
  }
// ...
}

Note that since it's the default export, you can call it anything you want.