Home
Quick start
Identifying users
Tracking events
Tracking groups

Technical Guides

Browser
Node.js
License
Sign in

Tracking Events

Making the most out of your June integration

What we'll cover

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

This consists of three easy steps:

  • Make a tracking plan · 1 hour
  • Identify your users · 5 minutes
  • Send your first event · 5 minutes
  • Next steps · 5 minutes

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

Making a tracking plan

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.

As a starting point, ask yourself:

  • What are your key performance indicators (KPIs)?
  • What essential user actions move these KPIs?

We have many resources available to help you make the right choices.

Identify your users

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.

Send your first event

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
}

Congrats, you've sent us your first event!

Identifying Groups

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.

Next steps

Congrats, you're done! Here's other guides to check out: