Flywheel.js client

npm install @flywheelapp/flywheel.js

import { FlywheelAnalytics } from "@flywheelapp/flywheel.js";

export const flywheel = FlywheelAnalytics.load({
  // NOTE: we highly recommend using an environment variable for your write key
  // instead of hard coding it in your source control
  writeKey: "PUT YOUR WRITE KEY HERE",
  apiHost: "theflywheel.app",
});

// import `flywheel` or get from hook
signUpUser(req).then((user) => {
  flywheel.identify(user.id, {
    userId: user.id,
    name: user.name,
    email: user.email,
  });
});

signInUser(req).then((user) => {
  flywheel.identify(user.id, {
    userId: user.id,
    name: user.name,
    email: user.email,
  });
});

getCurrentUser().then((user) => {
  if (!user) return;
  flywheel.identify(user.id, {
    userId: user.id,
    name: user.name,
    email: user.email,
    // pass any other fields from above
  });
});

(function () {
  flywheel.page(window.name, {
    title: document.title,
    url: document.URL,
    path: document.location.pathname,
  });
})();

import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { flywheel } from "./flywheel";

export const useFlywheelLocationChange = () => {
  const { pathname } = useLocation();

  useEffect(() => {
    flywheel.page(window.name, {
      title: document.title,
      url: document.URL,
      path: document.location.pathname,
    });
  }, [pathname]);
};

// Then call the hook in a top-level component that is always rendered, for example App:

export const App = () => {
  // ...
  useFlywheelLocationChange();
  // ...
}

(function () {
  if (!Proxy) return;
  window.history.pushState = new Proxy(window.history.pushState, {
    apply: (target, thisArg, argArray) => {
      target.apply(thisArg, argArray);
      window.dispatchEvent(new Event("pushstate"));
      window.dispatchEvent(new Event("locationchange"));
    },
  });
  window.history.replaceState = new Proxy(window.history.replaceState, {
    apply: (target, thisArg, argArray) => {
      target.apply(thisArg, argArray);
      window.dispatchEvent(new Event("replacestate"));
      window.dispatchEvent(new Event("locationchange"));
    },
  });

  window.addEventListener("popstate", function () {
    window.dispatchEvent(new Event("locationchange"));
  });

  window.addEventListener("locationchange", function () {
    flywheel.page(window.name, {
      title: document.title,
      url: document.URL,
      path: document.location.pathname,
    });
  });
})();

import { flywheel } from "./flywheel";

export const Component = ({ user }: { user?: CurrentUser }) => {
  const onClick = () => {
    const properties = {
      email: user?.email,
      userId: user?.id,
    };

    flywheel.track("Special Button Clicked", properties);
  };

  return <button onClick={onClick}>Special Button</button>;
};