Custom Events for Product Analytics: Track What Matters Before Launch

Page views tell you visitors came. They do not tell you what those visitors did. If 500 people visit your landing page and 25 sign up, that is a 5 percent conversion rate -- but page views alone cannot tell you whether the non-converters ever scrolled to your pricing section, clicked your CTA button, or started watching your demo.

Custom events answer those questions. You define the event name and any properties you want to track, fire one line of JavaScript when an interaction happens, and the data appears in your Analytics tab within seconds.

How Custom Events Work

The OperatorStack SDK exposes trackEvent() as soon as the script tag loads. It takes an event name (a string you define) and an optional properties object:

OperatorStack.trackEvent("event_name", { key: "value" });

The event queues in memory and flushes to your dashboard in a 5-second batch. trackEvent() is non-blocking: it will not delay button clicks or form submissions while it runs.

Events appear in the Events section of your Analytics tab. Each event name shows a total count and a breakdown by the properties you passed.

Setting Up Your First Event

You need the OperatorStack script tag on your page with your project key:

<script src="https://operatorstack.dev/os.js" data-project="pk_your_project_key"></script>

Then attach trackEvent() to any DOM interaction:

document.getElementById("hero-cta").addEventListener("click", () => {
  OperatorStack.trackEvent("cta_clicked", {
    section: "hero",
    variant: "primary",
  });
});

No API keys, no webhook setup, no additional configuration.

The Four Events That Matter Most Pre-Launch

Not every interaction needs an event. These four reveal the signals that matter for pre-launch validation.

cta_clicked

Tells you which call-to-action drives conversions. If your hero CTA fires 400 times and your pricing CTA fires 12 times, the pricing section has a problem.

document.querySelectorAll("[data-cta]").forEach((btn) => {
  btn.addEventListener("click", () => {
    OperatorStack.trackEvent("cta_clicked", {
      section: btn.dataset.cta,
    });
  });
});

Set data-cta="hero", data-cta="pricing", or data-cta="footer" on each button. The event breakdown in your dashboard shows which CTA converts and which one visitors ignore.

pricing_viewed

Fires when a visitor scrolls to your pricing section. High pricing views with low signups means your price point or tier structure is blocking conversion.

const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    OperatorStack.trackEvent("pricing_viewed", { section: "pricing" });
    observer.disconnect(); // fire once per page load
  }
});
observer.observe(document.getElementById("pricing"));

feature_interest

Shows which features visitors engage with before they decide to sign up or leave. If you list three features and one gets 10x the clicks, build that one first.

document.querySelectorAll("[data-feature]").forEach((el) => {
  el.addEventListener("click", () => {
    OperatorStack.trackEvent("feature_interest", {
      feature: el.dataset.feature,
    });
  });
});

demo_started / demo_completed

If you have an embedded demo video or interactive walkthrough, tracking both start and completion gives you a drop-off rate. Drop-off above 60 percent means the demo is too long or not resonating.

const video = document.getElementById("demo-video");
video.addEventListener("play", () => OperatorStack.trackEvent("demo_started"));
video.addEventListener("ended", () => OperatorStack.trackEvent("demo_completed"));

Reading Event Data in the Dashboard

Your Analytics tab shows each event name, its total count, and a property breakdown. If cta_clicked fired 200 times and 90 percent came from section: "hero" while 10 percent came from section: "pricing", the pricing CTA needs work.

Events are also linked to contact records. If a visitor fires feature_interest { feature: "analytics" } before signing up, that signal appears on their contact record. You can filter your contact list by pre-signup behavior to find your highest-intent leads.

How Many Events Is Too Many?

For pre-launch, 4-6 events is enough. Track the CTA, the pricing section, and your top 2-3 feature items. More than that creates noise before you have enough traffic to act on the data.

Add or remove events after 2-4 weeks based on what you have learned. Custom events are measurement tools for a specific question, not permanent infrastructure.