npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@theafolayan/expo-mixpanel-analytics

v1.0.1

Published

Mixpanel integration for use with React Native apps compatible with built on the latest expo SDKs > 51.

Downloads

81

Readme

Expo Mixpanel Analytics

Up to date Mixpanel integration for use with React Native apps built on Expo.

A comprehensive analytics integration for React Native and Expo apps, allowing seamless connection to Mixpanel. This package provides developers with the flexibility to choose between a hook-based API or a singleton approach for tracking events, identifying users, and managing user profiles.

With automatic device information capture, support for super properties, and an easy-to-use interface that simplifies integrating Mixpanel into your mobile applications.

Key Features

  • Supports both React hooks and traditional singleton APIs.
  • Track user events, identify users, and manage profile information.
  • Automatically collects device details such as platform, screen size, OS version, and more.
  • Persistent super properties across all tracked events. Easily integrates with Expo and React Native environments.

Credits

Forked from @bothrs/expo-mixpanel-analytics to add support for expo SDK 50 & Above.

Installation

npx expo install @theafolayan/expo-mixpanel-analytics --save

Default Parameters

Your React Native app's screen resolution, app name, app ID, app version, device information and multiple other parameters will be automatically resolved and sent with each event.

Explanation

  • Singleton Class (ExpoMixpanelAnalytics): This provides global access to Mixpanel's core methods like track(), identify(), reset(), and peopleSet(). It's initialized only once and shared throughout the app.

  • Hooks API (useExpoMixpanelAnalytics): The hook wraps around the singleton, allowing you to use Mixpanel's features within a functional component. The hook initializes the singleton and provides functions like track(), identify(), and reset().

Usage

Singleton Usage

import { ExpoMixpanelAnalytics } from "@theafolayan/expo-mixpanel-analytics";

// Get the singleton instance
const mixpanel = ExpoMixpanelAnalytics.getInstance("your_mixpanel_token");

// Track an event
mixpanel.track("ButtonClicked", { button_name: "Submit" });

// Identify a user
mixpanel.identify("user_12345");

// Set user profile properties
mixpanel.peopleSet({ plan: "Pro", last_login: new Date() });

// Reset user identity and clear super properties
mixpanel.reset();

2. Hooks Usage

import React, { useEffect } from "react";
import { View, Button } from "react-native";
import { useExpoMixpanelAnalytics } from "@theafolayan/expo-mixpanel-analytics";

const MyApp = () => {
  const { ready, track, identify, peopleSet, reset } = useExpoMixpanelAnalytics("your_mixpanel_token");

  useEffect(() => {
    if (ready) {
      // Identify the user
      identify("user_12345");

      // Track an event
      track("AppLoaded");

      // Set user profile properties
      peopleSet({ plan: "Pro", login_count: 1 });
    }
  }, [ready, track, identify, peopleSet]);

  return (
    <View>
      <Button title="Track Purchase" onPress={() => track("Purchase", { product: "Shoes", price: 99.99 })} />
      <Button title="Reset User" onPress={reset} />
    </View>
  );
};

export default MyApp;

API

Singleton API

  • track(eventName: string, props?: object): Tracks an event with optional properties.

  • identify(userId: string): Identifies the user for Mixpanel tracking.

  • register(superProps: object): Registers super properties that are included with every event.

  • reset(): Resets the user identity and clears super properties.

  • peopleSet(props: object): Sets user profile properties.

Hooks API

  • track(eventName: string, props?: object): Tracks an event with optional properties.
  • identify(userId: string): Identifies the user for Mixpanel tracking.
  • register(superProps: object): Registers super properties that are included with every event.
  • reset(): Resets the user identity and clears super properties.
  • peopleSet(props: object): Sets user profile properties.
  • ready: boolean: Indicates if Mixpanel is initialized and ready.

References

Mixpanel HTTP API Reference