Script
Learn how to add and configure the Oppla tracking script in your application.
Installation
Basic Installation
Add the Oppla tracking script to your website’s <head> section:
<script>
(function(p,r,o,d,i,o){p[i]=p[i]||function(){(p[i].q=p[i].q||[]).push(arguments)};
o=r.createElement('script');o.async=1;o.src=d;r.head.appendChild(o);
})(window,document,'script','https://cdn.oppla.app/tracker.js','oppla');
window.oppla.init('YOUR_PROJECT_ID');
</script>
Async Loading
For better performance, load the script asynchronously:
<script async src="https://cdn.oppla.app/tracker.js"></script>
<script>
window.oppla = window.oppla || function(){(window.oppla.q=window.oppla.q||[]).push(arguments)};
window.oppla.init('YOUR_PROJECT_ID');
</script>
Configuration
Basic Configuration
Configure basic tracking settings:
window.oppla.config({
trackPageViews: true,
trackClicks: true,
trackForms: true,
debug: false
});
Advanced Configuration
Add advanced tracking options:
window.oppla.config({
// Enable automatic tracking
autoTrack: {
pageViews: true,
clicks: true,
forms: true,
scroll: true
},
// Configure session settings
session: {
timeout: 30, // minutes
extendOnActivity: true
},
// Set up custom domains
domains: ['yourdomain.com', 'app.yourdomain.com'],
// Configure data collection
dataCollection: {
ipAddress: false,
userAgent: true,
referrer: true
}
});
Event Tracking
Track Events
Track events using the script:
// Track a simple event
window.oppla.track('Button Clicked', {
buttonId: 'signup-button',
page: 'homepage'
});
// Track with additional context
window.oppla.track('Purchase Completed', {
orderId: '12345',
amount: 99.99,
currency: 'USD',
items: ['product1', 'product2']
});
User Identification
Identify users:
window.oppla.identify({
userId: 'user_123',
traits: {
name: 'John Doe',
email: 'john@example.com',
plan: 'premium'
}
});
Data Attributes
Track Events with Data Attributes
Add data attributes to your HTML elements:
<!-- Basic event tracking -->
<button
id="signup-button"
data-oppla-event="Button Clicked"
data-oppla-event-buttonId="signup-button"
data-oppla-event-page="homepage">
Sign up
</button>
<!-- Event tracking with tags -->
<button
id="search-button"
data-oppla-event="Feature Used"
data-oppla-event-feature="search"
data-oppla-event-tags="core-feature,high-priority">
Search
</button>
Best Practices
- Load Early: Add the script as early as possible in the
<head>
- Use Async: Load the script asynchronously for better performance
- Configure Properly: Set up tracking options based on your needs
- Test Thoroughly: Verify tracking in development environment
Common Issues
Script Not Loading
- Check network connectivity
- Verify script URL is correct
- Check for JavaScript errors
- Ensure proper script placement
Events Not Tracking
- Verify initialization
- Check event names and properties
- Ensure proper timing of script loading
- Check for console errors
Next Steps
