Custom Event Tracking: Go Beyond Pageviews

Pageviews tell you where users went.

Custom events tell you what they did.

---

What Are Custom Events?

Custom events track specific user actions:

• Clicked a CTA button
• Played a video
• Downloaded a resource
• Submitted a form
• Used a feature
• Completed a milestone

Anything meaningful to your business can be an event.

---

Why Custom Events Matter

Pageviews Only Show Navigation

User visited: /home → /features → /pricing → left

Questions this doesn't answer:

• Did they watch the demo video?
• Did they try the interactive demo?
• Did they expand the FAQ?
• Did they start filling out the signup form?

---

Events Show Behavior

User actions:
- Viewed homepage
- Watched 75% of demo video
- Clicked "See Pricing"
- Expanded 3 FAQ items
- Started signup form
- Abandoned at email field

Now you understand why they didn't convert.

---

Tracking Custom Events

Basic Event Tracking

// Track simple event
window?.trackfox("cta_clicked");

---

Events With Properties

// Track event with details
window?.trackfox("cta_clicked", {
  button_text: "Start Free Trial",
  location: "hero",
  page: "/home",
});

---

Common Event Examples

CTA Clicks:

window?.trackfox("cta_clicked", {
  cta_type: "primary",
  destination: "/signup",
  location: "navbar",
});

Video Engagement:

window?.trackfox("video_played", {
  video_id: "product-demo",
  duration_seconds: 180,
  completion_percent: 75,
});

Form Interactions:

// Form started
window?.trackfox("form_started", {
  form_name: "contact",
  page: "/contact",
});

// Form submitted
window?.trackfox("form_submitted", {
  form_name: "contact",
  fields_count: 5,
});

Feature Usage:

window?.trackfox("feature_used", {
  feature: "export_csv",
  context: "dashboard",
  user_type: "trial",
});

---

Event Properties

What Properties Can Include

Standard types:

• Strings: "premium", "home_page"
• Numbers: 99, 3.5, 180
• Booleans: true, false

Examples:

window?.trackfox("purchase_completed", {
  plan: "pro",           // String
  amount: 99,            // Number
  annual: true,          // Boolean
  discount_percent: 20,  // Number
  coupon: "LAUNCH20",    // String
});

---

Property Best Practices

Be consistent:

// Good - consistent naming
window?.trackfox("button_clicked", { button_type: "primary" });
window?.trackfox("button_clicked", { button_type: "secondary" });

// Bad - inconsistent naming
window?.trackfox("button_clicked", { type: "primary" });
window?.trackfox("button_clicked", { button_style: "secondary" });

Be specific:

// Good - specific and useful
window?.trackfox("signup_started", {
  method: "google_oauth",
  source_page: "/pricing",
  plan_intent: "pro",
});

// Bad - vague
window?.trackfox("signup_started", {
  data: "some stuff",
});

---

Event Categories

Engagement Events

Track how users interact with content:

// Scroll depth
window?.trackfox("scroll_depth", { percent: 50 });

// Time on page milestone
window?.trackfox("time_on_page", { seconds: 60 });

// Content interaction
window?.trackfox("faq_expanded", { question: "pricing" });

---

Conversion Events

Track conversion milestones:

// Micro conversions
window?.trackfox("newsletter_subscribed");
window?.trackfox("resource_downloaded", { resource: "ebook" });
window?.trackfox("demo_requested");

// Macro conversions
window?.trackfox("trial_started");
window?.trackfox("payment_completed", { amount: 99 });

---

Error Events

Track things going wrong:

// Form errors
window?.trackfox("form_error", {
  form: "signup",
  field: "email",
  error: "invalid_format",
});

// Payment errors
window?.trackfox("payment_failed", {
  error_code: "card_declined",
  amount: 99,
});

---

Analyzing Events

Event Dashboard

See all events in one place:

• Total event count
• Events over time
• Events by type
• Event properties breakdown

---

Event Filtering

Filter events by:

• Event name
• Property values
• Time period
• Traffic source
• Device type

Example: "Show me all demo_requested events from Google Ads in the last 7 days"

---

Event Funnels

Build funnels with events:

video_started → video_completed → cta_clicked → signup_completed

See drop-off at each event step.

---

Event Attribution

Connect events to revenue:

"Users who watched the demo video have 3x higher conversion rate and $50 higher LTV"

---

Implementation Patterns

React/Next.js

function CTAButton({ text, destination }) {
  const handleClick = () => {
    window?.trackfox("cta_clicked", {
      text,
      destination,
      page: window.location.pathname,
    });
  };

  return (
    <Link href={destination} onClick={handleClick}>
      {text}
    </Link>
  );
}

---

Vue

<template>
  <button @click="trackClick">{{ text }}</button>
</template>

<script>
export default {
  props: ["text", "action"],
  methods: {
    trackClick() {
      window?.trackfox("button_clicked", {
        text: this.text,
        action: this.action,
      });
    },
  },
};
</script>

---

Vanilla JavaScript

document.querySelectorAll("[data-track]").forEach((element) => {
  element.addEventListener("click", () => {
    const event = element.dataset.track;
    const props = JSON.parse(element.dataset.trackProps || "{}");
    window?.trackfox(event, props);
  });
});

<button data-track="cta_clicked" data-track-props='{"location":"hero"}'>
  Start Free Trial
</button>

---

Server-Side Events

When to Use Server-Side

• Payment confirmations
• Subscription changes
• Backend actions
• Sensitive events

---

Server-Side Implementation

// Node.js example
const trackfox = require("trackfox-node");

// Initialize with API key
trackfox.init({ apiKey: "your_api_key" });

// Track server-side event
await trackfox.track({
  event: "subscription_renewed",
  userId: user.id,
  properties: {
    plan: "pro",
    amount: 99,
    period: "monthly",
  },
});

---

Event Limits

What's Included

All TrackFox plans include:

• Unlimited event types
• Unlimited properties per event
• 90-day event history
• Real-time event data

---

Event Counting

Events count toward your plan limit:

• Pageviews = 1 event
• Custom events = 1 event each

10k plan = 10,000 total events (pageviews + custom events)

---

Best Practices

1. Name Events Clearly

// Good
window?.trackfox("demo_video_completed");
window?.trackfox("pricing_faq_expanded");

// Bad
window?.trackfox("event1");
window?.trackfox("clicked");

2. Use Consistent Naming Convention

// Pick a convention and stick with it
// snake_case
window?.trackfox("button_clicked");
window?.trackfox("form_submitted");

// Or camelCase
window?.trackfox("buttonClicked");
window?.trackfox("formSubmitted");

3. Don't Over-Track

Track what matters:

• Conversion milestones
• Key feature usage
• Error conditions
• Revenue events

Don't track everything:

• Every mouse movement
• Every scroll pixel
• Every character typed

4. Include Context

// Include enough context to be useful
window?.trackfox("feature_used", {
  feature: "export",
  format: "csv",
  record_count: 150,
  user_plan: "pro",
});

---

Pricing

Custom events included in all plans:

• Unlimited event types
• Unlimited properties
• Real-time data
• Full dashboard access

$9/month for 10k events. 14-day free trial.

---

Start Tracking Events

Understand what users actually do.

Start your free trial →

Go beyond pageviews. Track what matters.

---

Last updated: January 2026