Track Events
Learn how to track events and user interactions in your application using Oppla.
Using Data Attributes
Track events by adding data attributes to your HTML elements:
<!-- Basic event tracking -->
<button id="signup-button" data-oppla-event="Signup button">
Sign up
</button>
<!-- Event tracking with additional data -->
<button
id="signup-button"
data-oppla-event="Signup button"
data-oppla-event-buttonId="signup-button"
data-oppla-event-page="homepage">
Sign up
</button>
Using JavaScript
Track events programmatically using the Oppla object:
// Browser implementation
window.oppla.track('Button Clicked', {
buttonId: 'signup-button',
page: 'homepage'
});
// Node.js implementation
oppla.track('Button Clicked', {
buttonId: 'signup-button',
page: 'homepage'
});
Event Properties
Add detailed properties to your events:
// Browser implementation
window.oppla.track('Purchase Completed', {
// Order details
orderId: '12345',
amount: 99.99,
currency: 'USD',
items: ['product1', 'product2'],
// User context
userId: 'user_123',
userType: 'premium',
// Custom properties
source: 'homepage',
campaign: 'summer_sale'
});
// Node.js implementation
oppla.track('Purchase Completed', {
// Same properties as above
});
Common Event Types
Page Views
Track page views automatically or manually:
// Automatic tracking (configured in init)
window.oppla.init({
projectId: 'your-project-id',
trackPageViews: true
});
// Manual tracking
window.oppla.track('Page Viewed', {
path: '/products',
title: 'Products Page',
referrer: 'https://google.com'
});
User Actions
Track user interactions:
<!-- Button clicks -->
<button
id="checkout-button"
data-oppla-event="Button Clicked"
data-oppla-event-buttonId="checkout-button"
data-oppla-event-buttonText="Checkout Now">
Checkout Now
</button>
<!-- Form submissions -->
<form
id="contact-form"
data-oppla-event="Form Submitted"
data-oppla-event-formId="contact-form"
data-oppla-event-formType="contact">
<!-- form content -->
</form>
<!-- Link clicks -->
<a
id="pricing-link"
data-oppla-event="Link Clicked"
data-oppla-event-linkId="pricing-link"
data-oppla-event-linkText="View Pricing"
data-oppla-event-destination="/pricing"
href="/pricing">
View Pricing
</a>
E-commerce Events
Track e-commerce activities:
// Browser implementation
window.oppla.track('Product Viewed', {
productId: 'prod_123',
name: 'Premium Plan',
price: 99.99
});
window.oppla.track('Added to Cart', {
productId: 'prod_123',
quantity: 1,
price: 99.99
});
window.oppla.track('Checkout Started', {
orderId: 'order_123',
total: 99.99,
items: ['prod_123']
});
// Node.js implementation
oppla.track('Product Viewed', {
productId: 'prod_123',
name: 'Premium Plan',
price: 99.99
});
Important Notes
-
Data Attributes:
- Event data cannot be sent without an event name
- All event data will be saved as strings
- Other event listeners inside the element will not be triggered
-
JavaScript Method:
- Use for dynamic data
- Supports all data types (numbers, dates, booleans, etc.)
- Allows for more complex tracking logic
Best Practices
- Be Consistent: Use consistent event names and property names
- Be Specific: Include relevant context in event properties
- Be Organized: Group related events with similar naming patterns
- Be Careful: Don’t include sensitive user data in events
Next Steps
