Sending Events via your Web App

Overview

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 into your project:

• npm install mixpanel-browser

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

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

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. You can also follow mixpanel's documentation on identifying users.

Sending and Tracking Generic Events

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

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

You can follow mixpanel's documentation to learn more about how to send web events from your web application.