Decorator pre-requisites & sending data to analytics library

[dbeaudway]

Hello,

Thanks for this module -- I've been doing some initial sandboxing in a basic create-react-app and have ran into two questions.

1. I'm having issues adding tracking events via decorators. I tried incorporating the babel decorators plugin but I believe this requires using "npm run eject" and modifying core files. Just curious if you know of a simpler way to use the decorators? Otherwise, I've been using the method described in the Stateless Functional components for all files which works too.

2. Can you help explain how to integrate this module with an analytics tool? For example, if I want each event sent to analytics with a POST to an API endpoint...where would that call go? I seem to be missing a step here because I only want to send the most recent item added to the dataLayer, not the entire dataLayer every time an event is triggered.

Thanks! #

[tizmagik]

Hey @dbeaudway 👋

1. Yes, I believe you will need to eject to add decorators support to create-react-app, here's a blog post on this. If you'd rather not eject (I'd recommend not to, if this is the only thing you're adding), you could use recompose's compose function to stack higher order components together. In fact, this is probably something worth mentioning in the README -- feel free to open a docs PR 😁
2. You can define a custom dispatch function which will do the post for you. See the docs in the main README for more info, but basically:

import React, { Component } from 'react';
import track from 'react-tracking';
import myApi from '../api';

@track({}, { dispatch: (data) => myApi.post(data) })
export default class App extends Component {
  render() {
    return this.props.children;
  }
}

Then, any descendants of <App />'s tracking will go through this dispatch() function instead of the default.

Hope that helps, cheers!

[jbadeau]

You don’t need to eject: https://github.com/timarney/react-app-rewired/blob/master/README.md