> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/mixpanel/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# JavaScript SDK

> Track events from web browsers with the Mixpanel JavaScript SDK

## Installation

The Mixpanel JavaScript SDK can be installed via CDN snippet or npm/yarn.

<Tabs>
  <Tab title="CDN Snippet">
    Paste this code snippet right before your closing `</head>` tag:

    ```html theme={null}
    <script type="text/javascript">
      (function(f,b){if(!b.__SV){var e,g,i,h;window.mixpanel=b;b._i=[];b.init=function(e,f,c){function g(a,d){var b=d.split(".");2==b.length&&((a=a[b[0]]),(d=b[1]));a[d]=function(){a.push([d].concat(Array.prototype.slice.call(arguments,0)));};}var a=b;"undefined"!==typeof c?a=b[c]=[]:c="mixpanel";a.people=a.people||[];a.toString=function(a){var d="mixpanel";"mixpanel"!==c&&(d+="."+c);a||(d+=" (stub)");return d;};a.people.toString=function(){return a.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" ");for(h=0;h<i.length;h++)g(a,i[h]);var j="set set_once union unset remove delete".split(" ");a.get_group=function(){function b(c){d[c]=function(){call2_args=arguments;call2=[c].concat(Array.prototype.slice.call(call2_args,0));a.push([e,call2]);};}for(var d={},e=["get_group"].concat(Array.prototype.slice.call(arguments,0)),c=0;c<j.length;c++)b(j[c]);return d;};b._i.push([e,f,c])};b.__SV=1.2;e=f.createElement("script");e.type="text/javascript";e.async=!0;e.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===f.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";g=f.getElementsByTagName("script")[0];g.parentNode.insertBefore(e,g)}})(document,window.mixpanel||[]);
    </script>
    ```

    Then initialize Mixpanel with your project token:

    ```javascript theme={null}
    mixpanel.init("YOUR_PROJECT_TOKEN", {
      autocapture: true,
      track_pageview: true,
      record_sessions_percent: 100,
      record_heatmap_data: true
    });
    ```
  </Tab>

  <Tab title="npm/yarn">
    <Note>
      The JavaScript library is named `mixpanel-browser` in npm/yarn to distinguish it from the server-side Node.js library.
    </Note>

    Install the package:

    <CodeGroup>
      ```bash npm theme={null}
      npm install --save mixpanel-browser
      ```

      ```bash yarn theme={null}
      yarn add mixpanel-browser
      ```
    </CodeGroup>

    Import and initialize:

    ```javascript theme={null}
    import mixpanel from 'mixpanel-browser';

    mixpanel.init("YOUR_PROJECT_TOKEN", {
      autocapture: true,
      track_pageview: true,
      record_sessions_percent: 100,
      record_heatmap_data: true
    });
    ```
  </Tab>
</Tabs>

## Track Events

Use `mixpanel.track()` to send events:

```javascript theme={null}
// Track a simple event
mixpanel.track("Played song", {
  genre: "hip-hop"
});
```

### Timing Events

Track how long an action takes:

```javascript theme={null}
// Start timer
mixpanel.time_event('Image Upload');

// 20 seconds later...
mixpanel.track('Image Upload');
// Duration property is automatically set to 20
```

## Identify Users

<Warning>
  Do not call `identify()` for anonymous visitors.
</Warning>

Identify users when they sign in:

```javascript theme={null}
// User signs in
mixpanel.track('sign in');

// Identify the user
mixpanel.identify('12345');
```

### Reset on Logout

Clear user data when they log out:

```javascript theme={null}
mixpanel.track('log out');
mixpanel.reset();
```

## User Profiles

Set profile properties:

```javascript theme={null}
mixpanel.identify('12345');

mixpanel.people.set({
  plan: 'Premium',
  $email: 'user@example.com',
  $name: 'John Doe'
});
```

<Tabs>
  <Tab title="set_once()">
    Set properties only if they don't exist:

    ```javascript theme={null}
    mixpanel.people.set_once({
      'First Login Date': new Date().toISOString()
    });
    ```
  </Tab>

  <Tab title="increment()">
    Increment numeric properties:

    ```javascript theme={null}
    mixpanel.people.increment('age', 1);
    mixpanel.people.increment('logins', 1);
    ```
  </Tab>

  <Tab title="append()">
    Append to list properties:

    ```javascript theme={null}
    mixpanel.people.append('transactions', {
      amount: 50,
      item: 'Premium Subscription'
    });
    ```
  </Tab>
</Tabs>

## Super Properties

Register global properties included on all events:

```javascript theme={null}
mixpanel.register({
  'source': 'web app',
  'version': '2.1.0'
});

// Use register_once to avoid overwriting
mixpanel.register_once({
  'First Visit': new Date().toISOString()
});
```

## Group Analytics

Assign users to groups:

```javascript theme={null}
// Set user's company
mixpanel.set_group('company', 'Acme Inc');

// Events will include company: ["Acme Inc"]
mixpanel.track('some_event');

// Set group properties
mixpanel.get_group('company', 'Acme Inc').set({
  name: 'Acme Inc',
  plan: 'Enterprise',
  employees: 500
});
```

## Privacy Controls

### Opt Out of Tracking

```javascript theme={null}
// Opt out
mixpanel.opt_out_tracking();

// Opt in
mixpanel.opt_in_tracking();

// Initialize with opt-out by default
mixpanel.init('YOUR_PROJECT_TOKEN', {
  opt_out_tracking_by_default: true
});
```

### EU Data Residency

```javascript theme={null}
mixpanel.init('YOUR_PROJECT_TOKEN', {
  api_host: 'https://api-eu.mixpanel.com'
});
```

### Disable Geolocation

```javascript theme={null}
mixpanel.init('YOUR_PROJECT_TOKEN', {
  ip: false
});
```

## Debug Mode

```javascript theme={null}
mixpanel.init('YOUR_PROJECT_TOKEN', {
  debug: true
});
```

## Platform Considerations

* Events are sent over HTTPS
* Data is batched and sent every 60 seconds or on page unload
* Cookies persist for 365 days by default
* Works across subdomains by default
* Session Replay requires additional configuration

## Resources

* [Full API Reference](https://github.com/mixpanel/mixpanel-js/blob/master/doc/readme.io/javascript-full-api-reference.md)
* [GitHub Repository](https://github.com/mixpanel/mixpanel-js)
* [Example Application](https://github.com/mixpanel/mixpanel-js/tree/master/examples)