Tracking Events on your Website

Events in Crowd capture user actions like button clicks, checkout completions, or feature usage. They power funnels, cohorts, dashboards, and alerts, providing insights into the complete user journey, both before and after identification. This guide explains how to track events effectively.

1. Why Track Events?

Events help you:

• Understand user behavior (e.g., what features are used most).

• Build funnels to measure conversions (e.g., signup to activation).

• Create cohorts (e.g., power users with high event counts).

• Set up dashboards and alerts for real-time insights.

2. Methods to Track Events

2.1 Track with HTML Only

Add the data-crowd-event attribute to any element to capture clicks automatically.

<button data-crowd-event="signup_clicked">Sign up</button>

• Event Name: Use snake_case for consistency (e.g., signup_clicked).

• Add Properties: Include additional details using data-crowd-props (JSON format).

<button
  data-crowd-event="plan_selected"
  data-crowd-props='{"plan":"pro","discount":"spring"}'>
  Upgrade to Pro
</button>

• Use Case: Ideal for static sites or simple click tracking.

2.2 Track with JavaScript

Use crowd.track() for dynamic actions like SPA route changes or modal opens.

crowd.track("checkout_completed", {
  amount: 99,
  currency: "USD",
  items: 3
});

• Supported Property Types: String, number, boolean, ISO date, array.

• Use Case: Best for client-side actions that aren’t tied to DOM clicks.

2.3 Track with Server-Side / cURL

Track events from the backend (e.g., billing webhooks) using the HTTP endpoint.

curl -X POST https://api.crowd.com/track \
  -H "Content-Type: application/json" \
  -H "X-Crowd-Key: YOUR_SERVER_KEY" \
  -d '{
        "website": "YOUR_PUBLIC_ID",
        "type": "event",
        "event_name": "checkout_completed",
        "user_id": "user_12345",
        "data": {"amount": 99, "currency": "USD"},
        "timestamp": "2025-05-20T14:29:00Z"
      }'

• For Anonymous Users: Omit user_id for guest actions (e.g., guest checkout); Crowd associates the event with the current anon_ ID.

• Use Case: Ideal for server-side events.

3. Verify Events in Crowd

To confirm events are being tracked:

1. Set up events on Crowd

2. Go to User activities > Events > dashboard

3. Look for a green active status

4. Best Practices

• Use Descriptive Names: Keep event names short but meaningful (e.g., signup_clicked, not button_clicked).

• Avoid Redundant Verbs: Don’t repeat the action context (e.g., prefer signup_clicked over clicked_signup_button).

• Don’t Send PII: Avoid sensitive data (e.g., credit card numbers) in properties; hash if necessary.

• One Event per Action: Track meaningful actions, not every UI element.

5. Troubleshooting

• Symptom: Event doesn’t appear in Live stream

• Likely Cause: Ad-blocker blocking domain

• Fix: Use a custom subdomain or whitelist api.crowd.com.

• Symptom: property missing

• Likely Cause: Mixed data types across hits

• Fix: Keep the same type per property (string vs number) subdomain or whitelist api.crowd.com.Property missing

• Symptom: 401 on curl

• Likely Cause: Missing or wrong X-Crowd-Key

• Fix: Use the server API key, not the public one.

• Symptom: High event count in funnels

• Likely Cause: Event fired on both click and route change

• Fix: Debounce or choose one trigger.

6. Next Steps

With events tracked, you can:

• Build a funnel.

• Create cohorts (e.g., power users with event_count > 10 in 7 days).

7. Glossary

• event_name: A snake_case string identifying the action (e.g., checkout_completed).

• properties: JSON key-value pairs describing the event (e.g., {"amount": 99}).

• anon_xxx: Temporary profile before identification.

• user_: Stable profile after identification.*

For more details contact support@crowdapp.io