Vercel

this doc will demonstrate how you can replace vercel analytics with the fastest, easiest and cheapest privacy friendly analytics in 2 minutes

if you get stuck or not feeling confident, i will personally help you integrate it :) book a time on my calendly

install the package

npm install rustalytics

set the NEXT_PUBLIC_RUSTALYTICS_API_KEY environment variable inside your .env file

NEXT_PUBLIC_RUSTALYTICS_API_KEY=your-api-key  # client side api keys must start with NEXT_PUBLIC_

replace @vercel/analytics

replace @vercel/analytics with rustalytics inside your layout.tsx file

import { Analytics } from 'rustalytics';

export default function Home() {
  return (
    <Analytics />
  );
}

custom events

custom events on ANY html elements

after importing the Analytics component and using it in your layout.tsx file, you can add custom events on ANY html elements by adding a data-rustalytics attribute. The value should be the event name you want to track, for example: "clicked-checkout" or if you are a/b testing you can add the variation: "clicked-checkout-variation-a"

export default function Home() {
  return (
    <a
      data-rustalytics="clicked-calendly-link-variation-a"
      href="..."
    >calendly</a>
  );
}