<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>

<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>

window.oppla.config({
  trackPageViews: true,
  trackClicks: true,
  trackForms: true,
  debug: false
});

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
  }
});

// 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']
});

window.oppla.identify({
  userId: 'user_123',
  traits: {
    name: 'John Doe',
    email: 'john@example.com',
    plan: 'premium'
  }
});

<!-- 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>