Log in

Browser SDK

Instant insights from any website

This documentation provides guidance on how to integrate the June SDK into your web-based application directly in the browser. The June SDK allows you to track user interactions and events, offering robust functionality for your analytics needs.

Getting started

Installation

Unlike npm or yarn installation used in Node.js or React environments, for a pure browser environment, you would typically load the SDK using a script tag. Here is an example of how to load the June SDK on your webpage:

1
<script>
2
  window.analytics = {};
3
  function juneify(writeKey) {
4
    window.analytics._writeKey = writeKey;
5
    var script = document.createElement('script');
6
    script.type = 'application/javascript';
7
    script.onload = function () {
8
      window.analytics.page();
9
    };
10
    script.src = 'https://unpkg.com/@june-so/analytics-next/dist/umd/standalone.js';
11
    var first = document.getElementsByTagName('script')[0];
12
    first.parentNode.insertBefore(script, first);
13
  }
14
  juneify('YOUR_WRITE_KEY');
15
</script>

Usage

Once the SDK is loaded, you can use the analytics global object to access the SDK's methods.

Inside the JavaScript code:

1
<script>
2
  window.analytics.track('Article Completed');
3
</script>

or inside of your HTML:

1
<button onclick="analytics.track('Article Completed')">Complete article</button>

API

Tracking Events

To track events, you can use the track method:

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

Example:

1
analytics.track('Article Completed', {
2
  title: 'How to Create a Tracking Plan',
3
  course: '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

Identifying Users & Setting User Traits

To identify users, you can use the identify method:

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

Example:

1
analytics.identify('user_123', {
2
  email: 'example@example.com',
3
  name: '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

Page Tracking

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

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

Example:

1
analytics.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

Grouping Users

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

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

Example:

1
analytics.group('company_456', {
2
  name: 'Company Name',
3
  industry: 'Technology',
4
  employees: 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

;