React

Integrate June with your React app

Installing

To install the client-side API, you can use the custom script generator in the Quick Start Guide or get the package from NPM.

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

Using with React

After installing the NPM app, import AnalyticsBrowser. An example configuration for a React app is as follows:

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

3
function App() {
4
  // Create a state container for the analytics instance.
5
  const [analytics, setAnalytics] = useState(undefined);
6

7
  // On component mount, create an AnalyticsBrowser instance.
8
  useEffect(() => {
9
    const loadAnalytics = async () => {
10
      let [response] = await AnalyticsBrowser.load({
11
        writeKey: 'YOUR_WRITE_KEY',
12
      });
13
      setAnalytics(response);
14
    };
15
    loadAnalytics();
16
  }, []);
17

18
  useEffect(() => {
19
    // Send a pageview event once Analytics is ready.
20
    if (analytics) analytics.page();
21
  }, [analytics]);
22

23
  return <div>Hello world!</div>;
24
}

Hook

Here's a convenience React hook that will make integrating June significantly simpler:

1
import { useEffect } from 'react';
2
import { AnalyticsBrowser } from '@june-so/analytics-next';
3

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

7
  useEffect(() => {
8
    const loadAnalytics = async () => {
9
      let [response] = await AnalyticsBrowser.load({
10
        writeKey,
11
      });
12
      setAnalytics(response);
13
    };
14
    loadAnalytics();
15
  }, [writeKey]);
16

17
  return analytics;
18
}

Context

Using the hook, you can store the Analytics.js instance in a context that makes it easier to use across many components.

To begin, define a context:

1
import { useJune } from './hooks';
2

3
const JUNE_KEY = 'YOUR_WRITE_KEY';
4

5
export const JuneContext = createContext(null);
6

7
export function JuneProvider({ children }) {
8
  const analytics = useJune(JUNE_KEY);
9

10
  return <JuneContext.Provider value={analytics}>{children}</JuneContext.Provider>;
11
}

Then, at the top level of your app, provide the June context:

1
import { JuneProvider } from './june';
2

3
function App({ children }) {
4
  return <JuneProvider>{children}</JuneProvider>;
5
}

Now you can use the context in any component under the provider, allowing you to track events throughout your app. An example:

1
import { useContext, useCallback } from 'react';
2
import { JuneProvider, JuneContext } from './june';
3

4
function PurchaseButton() {
5
  const analytics = useContext(JuneContext);
6

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

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

Using with NextJS

For a NextJS app, the best approach is installing the NPM package rather than using the inlined script. Client-side tracking is rather similar to the React example cited above.

You may find yourself wanting to track server events. In that case, import AnalyticsNode within the SSR portions of the app:

1
import { AnalyticsNode } from '@june-so/analytics-next';
2

3
// Set the environment variable NEXT_PUBLIC_JUNE_KEY with your SDK write key.
4
const JUNE_KEY = process.env.NEXT_PUBLIC_JUNE_KEY ?? 'api-key';
5

6
// SSR function that runs before page
7
export async function getServerSideProps(context) {
8
  const [nodeAnalytics] = await AnalyticsNode.load({
9
    // Initialize with your writeKey
10
    writeKey: JUNE_KEY,
11
  });
12

13
  // Send a test event
14
  await nodeAnalytics.track('Test Event Node');
15

16
  return {
17
    props: {},
18
  };
19
}

Tracking pageview events

Tracking pageview events requires special code to be placed in the App component of your NextJS codebase.

1
import { useEffect } from 'react';
2
import { useRouter } from 'next/router';
3

4
export default function MyApp({ Component, pageProps }) {
5
  const analytics = useJune('API-KEY');
6
  const router = useRouter();
7

8
  useEffect(() => {
9
    const handleRouteChange = (url, { shallow }) => {
10
      if (analytics) analytics.page(url);
11
    };
12

13
    router.events.on('routeChangeStart', handleRouteChange);
14

15
    return () => {
16
      router.events.off('routeChangeStart', handleRouteChange);
17
    };
18
  }, [analytics]);
19

20
  return <Component {...pageProps} />;
21
}

Example NextJS page

Using the hook and environment variables, you can implement June quite nicely on a NextJS app.

1
import { useCallback } from 'react';
2
import { useJune } from './hooks';
3

4
function Index() {
5
  const analytics = useJune(process.env.NEXT_PUBLIC_JUNE_KEY ?? 'api-key');
6

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

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