React & Next.js SDK

Instant insights from any React app

This documentation provides guidance on how to integrate the June SDK with your React application. June SDK is a powerful library for tracking user interactions and events, offering similar functionality to the underlying Segment SDK.

Getting started

Installation

To install June SDK in your React project, use the npm package manager:

npm install @june-so/analytics-next --save

Alternatively, use yarn:

yarn add @june-so/analytics-next

Initialization

First, you will need to import the SDK into your application:

import { AnalyticsBrowser } from '@june-so/analytics-next';

Initialize the SDK using the instance key you've received when you created your June account:

const analytics = AnalyticsBrowser.load({
  writeKey: 'YOUR_WRITE_KEY',
});

Example of a React hook that initializes the SDK:

import { useEffect, useState } from 'react';
import { AnalyticsBrowser } from '@june-so/analytics-next';

export function useJune(writeKey) {
  const [analytics, setAnalytics] = useState(undefined);

useEffect(() => {
    const loadAnalytics = async () => {
      let response = AnalyticsBrowser.load({
        writeKey,
      });
      setAnalytics(response);
    };
    loadAnalytics();
  }, [writeKey]);
  return analytics;
}

Then you can use the hook in your components:

import { useCallback } from 'react';
import { useJune } from './useJune';

function PurchaseButton() {
  const analytics = useJune('YOUR_WRITE_KEY');

const trackPurchase = useCallback(() => {
    if (analytics) analytics.track('Purchase Event');
  }, [analytics]);

return <button onClick={trackPurchase}>Purchase coat</button>;
}

API

Tracking Events

To track events, you can use the track method:

analytics.track(event, [properties], [options], [callback]);

Example:

analytics.track('Article Completed', {
  title: 'How to Create a Tracking Plan',
  course: 'Intro to Analytics',
});

Parameters:

Parameter	Type	Description	Required
event	String	The name of the event you’re tracking. You can read more about the track method and recommended event names.	Required
properties	Object	A dictionary of properties for the event. If the event was "Added to Cart", it might have properties like price.	Optional
options	Object	A dictionary of options. For example, enable or disable specific destinations for the call.	Optional
callback	Function	A function that runs after a timeout of 300 ms.	Optional

Identifying Users & Setting User Traits

To identify users, you can use the identify method:

analytics.identify([userId], [traits], [options], [callback]);

Example:

analytics.identify('user_123', {
  email: 'example@example.com',
  name: 'John Doe',
});

Parameters:

Parameter	Type	Description	Required
userId	String	The database ID for the user. If you don’t know who the user is yet, you can omit the userId and just record traits.	Optional
traits	Object	A dictionary of traits you know about the user, like email or name.	Optional
options	Object	A dictionary of options. For example, enable or disable specific destinations for the call.	Optional
callback	Function	A function executed after a timeout of 300 ms.	Optional

Page Tracking

In order to track the pages viewed by the user, use the page method:

analytics.page([category], [name], [properties], [options], [callback]);

Example:

analytics.page('Pricing');

Parameters:

Parameter	Type	Description	Required
category	String	The category of the page. Useful for cases like ecommerce where many pages might live under a single category.	Optional
name	String	The name of the page.	Optional
properties	Object	A dictionary of properties of the page.	Optional
options	Object	A dictionary of options. For example, enable or disable specific destinations for the call.	Optional
callback	Function	A function that runs after a timeout of 300 ms.	Optional

Grouping Users

To group users by organization or company, use the group method:

analytics.group(groupId, [traits], [options], [callback]);

Example:

analytics.group('company_456', {
  name: 'Company Name',
  industry: 'Technology',
  employees: 500,
});

Parameters:

Parameter	Type	Description	Required
groupId	String	The Group ID to associate with the current user.	Required
traits	Object	A dictionary of traits for the group. Example traits for a group include address, website, and employees.	Optional
options	Object	A dictionary of options. For example, enable or disable specific destinations for the call.	Optional
callback	Function	A function that runs after a timeout of 300 ms.	Optional