@hypership/analytics-react

A powerful and lightweight analytics SDK for React applications, part of the Hypership platform.

Installation

npm install @hypership/analytics-react

Features

• 📊 Automatic page view tracking
• 🌍 Geolocation tracking via timezone
• 🔄 SPA route change detection
• 📱 User agent tracking
• 🔗 Referrer tracking
• ⚡ Zero-configuration setup
• 🎯 History API integration
• 🕒 Timestamp tracking
• 🌐 Cross-browser support
• 🔒 Secure data transmission

Quick Start

1. Wrap your app with the HypershipAnalyticsProvider:

import { HypershipAnalyticsProvider } from "@hypership/analytics-react";

function App() {
  return (
    <HypershipAnalyticsProvider apiKey="your-hypership-api-key">
      <YourApp />
    </HypershipAnalyticsProvider>
  );
}

API Key Configuration

You can provide your Hypership API Key in one of the following ways:

• Directly as a prop when initializing the provider
• As an environment variable named HYPERSHIP_PUBLIC_KEY
• As an environment variable named REACT_APP_HYPERSHIP_PUBLIC_KEY (for Create React App)
• As an environment variable named NEXT_PUBLIC_HYPERSHIP_PUBLIC_KEY (for Next.js)

Tracked Data

The analytics SDK automatically tracks the following data points:

| Data Point | Description | | ------------ | -------------------------------------- | | currentPath | Current page URL path | | searchParams | URL search parameters | | previousPath | Previously visited page path | | userAgent | Browser and device information | | referrer | Source of the page visit | | timestamp | Time of the page view | | title | Page title | | country | User's country (derived from timezone) |

Advanced Configuration

The SDK automatically handles:

• Single Page Application (SPA) route changes
• Browser history state changes
• Initial page load tracking
• Country detection from timezone

License

ISC