react-datalayer

• simple declerative api
• no more propagate props just for dataLayer's purpose
• separate view layer from analytics layer
• easy to implement

before:

import React from 'react';
 
 
const ListItem = ({ id, index, name, href }) => <a href={ href } onClick={ () => dataLayer.push({ index, id, name, href }) }>{ name }</a>
 
const List = ({ elements }) => elements.map(({ id, name, href }, index) => {
  return (
    <ListItem { ...{name, href, index, id} }/>
  );
});
 
export default List;

after:

import React from 'react';
 
import { Tracking, provideAnalytics } from 'react-datalayer';
 
const ListItem = ({ onClick, name, href }) => <a href={ href } onClick={ onClick }>{ name }</a>
 
const List = ({ elements }) => elements
  .map(({ id, name, href }, index) => {
    return (
      <Tracking eventProperties={ () => ({ id, index, name, href }) }>
        {
          instrument => <ListItem onClick={ instrument('click') } { ...{ name, href } }/>
        }
      </Tracking>
    )
  });
 
export default provideAnalytics({ userId: 2 })(List);

Check out more examples and get stuck right in with the online editor.

Resources

• introducting to problem

• react-amplitude

Todos

• useAnalytics, useTracking
• ts interfaces
• storybook online
• custom dispatch definintion
• tests
• eslint