1npm install @june-so/analytics-next --save
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.
To install June SDK in your React project, use the npm package manager:
1npm install @june-so/analytics-next --save
Alternatively, use yarn:
1yarn add @june-so/analytics-next
First, you will need to import the SDK into your application:
1import { AnalyticsBrowser } from '@june-so/analytics-next';
Initialize the SDK using the instance key you've received when you created your June account:
1const analytics = AnalyticsBrowser.load({ 2writeKey: 'YOUR_WRITE_KEY', 3});
Example of a React hook that initializes the SDK:
1import { useEffect, useState } from 'react'; 2import { AnalyticsBrowser } from '@june-so/analytics-next'; 3 4export function useJune(writeKey) { 5const [analytics, setAnalytics] = useState(undefined); 6 7useEffect(() => { 8const loadAnalytics = async () => { 9let response = AnalyticsBrowser.load({ 10writeKey, 11}); 12setAnalytics(response); 13}; 14loadAnalytics(); 15}, [writeKey]); 16 17return analytics; 18}
Then you can use the hook in your components:
1import { useCallback } from 'react'; 2import { useJune } from './useJune'; 3 4function PurchaseButton() { 5const analytics = useJune('YOUR_WRITE_KEY'); 6 7const trackPurchase = useCallback(() => { 8if (analytics) analytics.track('Purchase Event'); 9}, [analytics]); 10 11return <button onClick={trackPurchase}>Purchase coat</button>; 12}
To track events, you can use the track
method:
1analytics.track(event, [properties], [options], [callback]);
Example:
1analytics.track('Article Completed', { 2title: 'How to Create a Tracking Plan', 3course: 'Intro to Analytics', 4});
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 and productType. | Optional |
options | Object | A dictionary of options. For example, enable or disable specific destinations for the call. Note: If you do not pass a properties object, pass an empty object (like {}) before options. | Optional |
callback | Function | A function that runs after a timeout of 300 ms, giving the browser time to make outbound requests first. | Optional |
To identify users, you can use the identify
method:
1analytics.identify([userId], [traits], [options], [callback]);
Example:
1analytics.identify('user_123', { 2email: 'example@example.com', 3name: 'John Doe', 4});
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. You can read more about identities in the identify reference. | Optional |
traits | Object | A dictionary of traits you know about the user, like email or name. You can read more about traits in the identify reference. | Optional |
options | Object | A dictionary of options. For example, enable or disable specific destinations for the call. Note: If you do not pass a traits object, pass an empty object (like {}) before options. | Optional |
callback | Function | A function executed after a timeout of 300 ms, giving the browser time to make outbound requests first. | Optional |
In order to track the pages viewed by the user, use the page
method:
1analytics.page([category], [name], [properties], [options], [callback]);
Example:
1analytics.page('Pricing');
Note: In analytics.js a page call is included in the snippet by default just after analytics.load. Many destinations require this page event to be fired at least once per page load for proper initialization. You may add an optional name or properties to the default call, or call it multiple times per page load if you have a single-page application.
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. Note: if you pass only one string to page it is assumed to be name. You must include a name to send a category. | Optional |
name | String | The name of the page. | Optional |
properties | Object | A dictionary of properties of the page. Note: June SDK collects url, title, referrer, and path automatically. This defaults to a canonical URL if available, and falls back to document.location.href. | Optional |
options | Object | A dictionary of options. For example, enable or disable specific destinations for the call. Note: If you do not pass a properties object, pass an empty object (like {}) before options. | Optional |
callback | Function | A function that runs after a timeout of 300 ms, giving the browser time to make outbound requests first. | Optional |
To group users by organization or company, use the group
method:
1analytics.group(groupId, [traits], [options], [callback]);
Example:
1analytics.group('company_456', { 2name: 'Company Name', 3industry: 'Technology', 4employees: 500, 5});
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. Note: If you do not pass a properties object, pass an empty object (like {}) before options. | Optional |
callback | Function | A function that runs after a timeout of 300 ms, giving the browser time to make outbound requests first. | Optional |
;