## 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:

```html
<script>
  window.analytics = {};
  function juneify(writeKey) {
    window.analytics._writeKey = writeKey;
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.onload = function () {
      window.analytics.page();
    };
    script.src = 'https://unpkg.com/@june-so/analytics-next/dist/umd/standalone.js';
    var first = document.getElementsByTagName('script')[0];
    first.parentNode.insertBefore(script, first);
  }
  juneify('YOUR_WRITE_KEY');
</script>
```

## Usage

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

Inside the JavaScript code:

```html
<script>
  window.analytics.track('Article Completed');
</script>
```

or inside of your HTML:

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

## API

## Tracking Events

To track events, you can use the `track` method:

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

Example:

```javascript
analytics.track('Article Completed', {
  title: 'How to Create a Tracking Plan',
  course: 'Intro to Analytics',
});
```

Parameters:

| Parameter   | Type     | Description                                                                            | Required |
|-------------|----------|----------------------------------------------------------------------------------------|----------|
| event       | String   | The name of the event you’re tracking. You can read more about the track method.    | Required |
| properties  | Object   | A dictionary of properties for the event.                                            | Optional |
| options     | Object   | A dictionary of options. Enable or disable specific destinations for the call.       | Optional |
| callback    | Function | A function that runs after a timeout of 300 ms, allowing the browser to make requests. | Optional |

## Identifying Users & Setting User Traits

To identify users, you can use the `identify` method:

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

Example:

```javascript
analytics.identify('user_123', {
  email: 'example@example.com',
  name: 'John Doe',
});
```

Parameters:

| Parameter   | Type     | Description                                                                            | Required |
|-------------|----------|----------------------------------------------------------------------------------------|----------|
| userId     | String   | The database ID for the user.                                                         | Optional |
| traits      | Object   | A dictionary of traits you know about the user.                                      | Optional |
| options     | Object   | A dictionary of options. Enable or disable specific destinations for the call.       | Optional |
| callback    | Function | A function executed after a timeout of 300 ms, allowing the browser to make requests. | Optional |

## Page Tracking

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

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

Example:

```javascript
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.                | Optional |
| name        | String   | The name of the page.                                                                 | Optional |
| properties  | Object   | A dictionary of properties of the page.                                              | Optional |
| options     | Object   | A dictionary of options. Enable or disable specific destinations for the call.       | Optional |
| callback    | Function | A function that runs after a timeout of 300 ms, allowing the browser to make requests. | Optional |

## Grouping Users

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

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

Example:

```javascript
analytics.group('company_456', {
  name: 'Company Name',
  industry: 'Technology',
  employees: 500,
});
```

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.   | Optional |
| options     | Object   | A dictionary of options. Enable or disable specific destinations for the call.       | Optional |
| callback    | Function | A function that runs after a timeout of 300 ms, allowing the browser to make requests. | Optional |