Ucoder InsightUcoder Insight
Events

Custom Events

Learn how to implement custom event tracking in Ucoder Insight. Understand the data structure, usage examples, and best practices for tracking specific user interactions like 'Add to Cart', 'Form Submission', and more.

Custom Events

While Ucoder Insight automatically tracks page views and standard clicks, Custom Events allow you to track specific business actions like "Add to Cart", "Form Submission", or "Video Play".

Config Custom event

import { trackCustomEvent } from "ucoder-insight";

Data Structure

Every custom event follows a strict structure to ensure data consistency in your dashboard.

trackCustomEvent({dataKey: dataValue})

PropertyTypeRequiredDescription
event_namestringYesThe primary name of the event (e.g., user_signup).
action_categorystringYesGroup similar events (e.g., ecommerce, auth, video).
object_idstringNoID of the object being interacted with (e.g., product_id).
status'success' | 'failure'NoOutcome of the action.
messagestringNoReadable description or error message.
additionalDataobjectNoKey-value pairs for extra context.

Usage Examples

Blog

React
import { trackCustomEvent } from "ucoder-insight";

export default function AddToCartButton() {
  trackCustomEvent({
    event_name: "email_input_clicked",
    action_category: "interaction",
    object_id: "email_input_field",
    status: "success",
  });

  return <button onClick={handleAddToCart}>Buy Now</button>;
}

Data Constraints

To maintain performance, additionalData only accepts flat objects. Nested objects or arrays are not allowed.

Allowed types:

  • string
  • number
  • boolean
  • null / undefined

Invalid Example:

additionalData: {
  user_info: { name: "John" } // ❌ Nested objects are NOT allowed
}