June - SDK Docs

Integrating event tracking lets us know when users complete key activities throughout your application.

If you haven't installed June's script yet, don't panic! Head over to the Quick Start Guide.

First and foremost, it's important to assess your key performance indicators and figure out what's most important to track. This reduces noise in your reports and focuses your organization on the right metrics.

It's imperative to make sure you identify users once you log in. This means sending an analytics.identify call once they sign in, and sending analytics.reset once they sign out.

Your call should contain a unique user ID, and optionally any accompanying traits you'd like to track.

1
// Assuming using the inline browser script, we use window.analytics.
2

3
// Send an identify call once the user signs in.
4
async function signIn(username, password) {
5
  const user = await login(username, password);
6
  // ... user variable contains a JSON object identifying the user:
7
  // e.g. {id: 1, first_name: "Enzo", last_name: "Avigo", favorite_color: "blue"}
8
  window.analytics.identify(user.id, { favorite_color: user.favorite_color });
9
}
10

11
// Reset the session on logout.
12
async function signOut() {
13
  await clearSession();
14
  window.analytics.reset();
15
}

You can find more information about identifying users on the dedicated Identifying Users guide.

Next up, it's time to send your first event. This could be when a user purchases a product, creates an account, or any other event affecting key performance indicators.

Your call must include an event name. Optionally, you can pass any other data you'd like to keep to describe this event.

1
// ... for an eCommerce shop
2
async function purchaseCoat(details) {
3
  await buy(details);
4
  window.analytics.track('Purchased Item', {
5
    item_name: 'Red Trench Coat',
6
    ...details, // pass along item details
7
  });
8
}
9

10
// ... for a social network
11
async function signUp(details) {
12
  await createAccount(details);
13
  window.analytics.track('Sign Up', details);
14
}
15

16
// ... on a button click
17
function ItemComponent() {
18
  const analytics = useJune('api-key');
19
  return <button onClick={() => analytics.track('Purchased Item')}>Buy</button>;
20
}

Finally, it's important to know how to track groups. This is especially imperative for B2B companies. Using this feature you can gain better insights about how groups of users behave within your app.

The analytics.group() call associates the current user (recall when we called analytics.identify()) with a company or organization.

1
// Send an identify and group call once the user signs in.
2
async function signIn(username, password) {
3
  const user = await login(username, password);
4
  // ... user variable contains a JSON object identifying the user:
5
  // e.g. {id: 1, first_name: "Enzo", last_name: "Avigo", favorite_color: "blue"}
6
  window.analytics.identify(user.id, { favorite_color: user.favorite_color });
7
  // We group the user.
8
  window.analytics.group('June HQ', { industry: 'Technology' });
9
}

You can find more information about identifying users on the dedicated Tracking Groups guide.

Tracking Events

Making the most out of your June integration

What we'll cover

Making a tracking plan

Identify your users

Send your first event

Identifying Groups

Next steps