v1.1.2 - Minor Release

Full Changelog: v1.1.1...v1.1.2

v1.0.0 - Initial Release

Highlights

• 🎉 First release of react-contextual-analytics, a React framework designed to streamline analytics tracking by minimising boilerplate and leveraging component hierarchy for automatic context propagation.

Features

• AnalyticsProvider: Set up analytics once at the top level, integrating multiple providers, e.g., console logging or Google Analytics.
• AnalyticsBoundary: Wrap components to define context scope. Context flows automatically through component boundaries, simplifying event structure.
• useAnalytics hook: Emit events with ease, ideal for isolated components needing analytics.
• Rich Event Objects: Events include action, name, boundary, auto-collected context (page, window size, etc.), and attributes.
• Custom Providers: Extendable, you can integrate third-party tools (like Sentry) by implementing a simple interface.

Usage Recap

# Install
npm install react-contextual-analytics
# or
yarn add react-contextual-analytics

import {
  createAnalyticsClient,
  AnalyticsProvider,
  AnalyticsBoundary,
  useAnalytics
} from 'react-contextual-analytics';

// Setup client
const analyticsClient = createAnalyticsClient([console, google]);

// Wrap your app
function App() {
  return (
    <AnalyticsProvider client={analyticsClient}>
      <YourApp />
    </AnalyticsProvider>
  );
}

// Within your UI
<AnalyticsBoundary name="product-page" attributes={{ productId: product.id }} sendViewedEvent>
  {({ emit }) => (
    <button onClick={() => emit('clicked', 'add-to-cart')}>
      Add to Cart
    </button>
  )}
</AnalyticsBoundary>

Event payloads automatically include boundary-derived context.