mixpanelLogger

The mixpanelLogger function is used to provide tracking to mixpanel relative to an API token. This function returns a logging function that can be provided directly to an analytics Provider component's onTrack prop.

The mixpanelLogger function can accept any mixpanel configuration options.

Note: Actions to Mixpanel can also be debounced to prevent too many actions, such as Change, from getting tracked. By default, the debounce timeout is 500 milliseconds and set only for the Change event.

import { Provider as AnalyticsProvider, mixpanelLogger } from '@emoney/kyber-analytics';

const logger = mixpanelLogger('<your Mixpanel API token>');

function App() {
  return (
    <AnalyticsProvider onTrack={logger}>
      <>App Contents</>
    </AnalyticsProvider>
  );
}

Tracking Custom Data

Custom data can be added to an event through an action's payload data property.

If the data property resolves to a string, boolean, number, or list of strings then the Mixpanel action will be logged with a data property.

// This action:
onChange: {
  type: 'CHECKBOX_CHANGE',
  payload: {
    action: 'Change',
    data: 'My data',
  },
},

// Tracks to Mixpanel as:
{
  ...,
  Action: 'Change',
  data: 'My data'
}

If the data property resolves to an object then that object's properties will be spread onto the Mixpanel action.

// This action:
onChange: {
  type: 'CHECKBOX_CHANGE',
  payload: {
    action: 'Change',
    data: {
      property1: 'value1',
      property2: 100
    },
  },
},

// Tracks to Mixpanel as:
{
  ...,
  Action: 'Change',
  property1: 'value1',
  property2: 100
}

Custom Debounce Behavior

In this example all action payloads matching "Change" and "Click" will be debounced by 1 second.

import { Provider as AnalyticsProvider, mixpanelLogger } from '@emoney/kyber-analytics';

const logger = mixpanelLogger('<your Mixpanel API token>', {
  debounceWait: 1000,
  debounceActions: ['Change', 'Click'],
});

Structuring an Application for Use With Mixpanel

Requirements:

1. At least one analytics provider must specify the property of "Event".

<AnalyticsProvider value="Kyber" property="Event">
  ...
</AnalyticsProvider>

Create Functional Hierarchies with Providers

The following image shows the structure of analytics providers around key areas of this site. Creating a structure like this allows for Kyber's components to correctly track relative to their location within an app. The use of the property prop specifies keys that will map to the values from within Mixpanel.

<AnalyticsProvider value="Kyber" property="Event">
  <AnalyticsProvider value="Documentation" property="Platform">
    <DocsSite>
      <AnalyticsProvider value="Sidebar" property="Feature">
        <Sidebar />
      </AnalyticsProvider>
      <AnalyticsProvider value="Main" property="Feature">
        <AnalyticsProvider value="MixpanelLogger" property="View">
          <PageContent />
        </AnalyticsProvider>
      </AnalyticsProvider>
    </DocsSite>
  </AnalyticsProvider>
</AnalyticsProvider>

Breaking Data Down in Mixpanel

Specify filters based on property names and then apply breakdowns based on the remaining component paths or data. This report is showing all Click actions within the Sidebar on Kyber's documentation site. It's specifically excluding click actions from the "Component Filter" component.

Excluding Default Actions

The mixpanelLogger initialization function can take an object with a key of excludedActions. This list of actions can be used to exclude certain actions from being tracked. The key is checked against the value action's type. The following example excludes all BUTTON_CLICK actions from being tracked.

Result

Loading...

Live Editor

const logger = mixpanelLogger('', { excludedActions: ['BUTTON_CLICK'] }); function App() { return ( <Provider value="App" onTrack={logger}> View console for output <br /> <Button id="not-tracked-btn">Not Tracked</Button>{' '} <Button id="tracked-btn" analytics={{ value: 'Button', actions: { onClick: { type: 'TRACKED_BTN_CLICK', payload: 'Click' }, }, }} > Tracked </Button> </Provider> ); } render(<App />);

const logger = mixpanelLogger('', { excludedActions: ['BUTTON_CLICK'] });

function App() {
  return (
    <Provider value="App" onTrack={logger}>
      View console for output
      <br />
      <Button id="not-tracked-btn">Not Tracked</Button>{' '}
      <Button
        id="tracked-btn"
        analytics={{
          value: 'Button',
          actions: {
            onClick: { type: 'TRACKED_BTN_CLICK', payload: 'Click' },
          },
        }}
      >
        Tracked
      </Button>
    </Provider>
  );
}

render(<App />);

API

Configuration

Type: Object

Properties

• debounceWait The amount of time to debounce successive actions.
• debouncedActions A list of action names to debounce.
• excludedActions A list of actions to be excluded from tracking.

mixpanelLogger

Initialize a logger function within ema.

Parameters

• apiToken The Mixpanel API token.
• config Configuration

Returns Track