# Send Events from Web

## Overview

<figure><img src="/files/mNfUoQminzgfYveV4wHq" alt=""><figcaption></figcaption></figure>

From your web app, you can collect information to build out a user profile, as well as send custom events to your mixpanel project. This can be done by using mixpanel's SDK.

### Setting up the SDK

To start sending data, [install the SDK](https://docs.mixpanel.com/docs/quickstart/install-mixpanel) into your project:

* `npm install mixpanel-browser`

Once installed, configure the SDK to start tracking events by initialising:

```javascript
//Import Mixpanel SDK
import mixpanel from "mixpanel-browser";
 
// Near entry of your product, init Mixpanel
mixpanel.init("YOUR_TOKEN", {
  debug: true,
  track_pageview: true,
  persistence: "localStorage",
  // Route events from Mixpanel’s SDKs via a proxy in your own domain - prevents adblockers impacting tracking.
  // See more: https://docs.mixpanel.com/docs/tracking-methods/sdks/javascript#tracking-via-proxy
  api_host: "YOUR_PROXY_URL",
});
```

### Identifying Users and Creating User Profiles

Once this is initialized, you can identify and define attributes for users of your platform. This will populate their user profile in mixpanel, allowing you to track and gather insights on their user journeys through the platform:

```javascript

const account = useAppSelector(userSelectors.getAuthUser)
const linkedEvmWallet = useAppSelector(
  userSelectors.getEvmLinkedWalletAddress,
)
const profile = useAppSelector(userSelectors.getProfile)

useEffect(() => {
  if (account?.uid) {
    mixpanel.identify(account.uid)
    mixpanel.people.set({
      $email: account.email,
      $name: profile?.username,
      $avatar: profile?.profilePictureUrl,
      // Optional: example of including a user's wallet in their user profile
      wallet: linkedEvmWallet,
      userId: account.uid,
    })
```

An example of how you might want to sync user profile data to mixpanel can be found in our [mixpanel repository](https://github.com/msquared-io/msquared-mixpanel/blob/main/analytics/mixpanel.tsx). You can also follow mixpanel's documentation on [identifying users](https://docs.mixpanel.com/docs/quickstart/identify-users).

### Sending and Tracking Generic Events

You are also able to track events from your web app. An example is shown below:

```javascript
mixpanel.track("Joined Experience", {
      "Joined Experience Name": worldId,
})
```

You can follow [mixpanel's documentation](https://docs.mixpanel.com/docs/quickstart/track-events) to learn more about how to send web events from your web application.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.otherside.xyz/platform-documentation/integrations/analytics/send-events-from-web.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.