Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Frontend Tracking Demo</title> | |
| <style> | |
| body { font-family: sans-serif; padding: 20px; max-width: 800px; margin: 0 auto; } | |
| .section { border: 1px solid #ccc; padding: 20px; margin-bottom: 20px; border-radius: 8px; } | |
| .btn { padding: 10px 20px; cursor: pointer; background: #007bff; color: white; border: none; border-radius: 4px; margin-right: 10px; } | |
| .btn-danger { background: #dc3545; } | |
| .btn-success { background: #28a745; } | |
| #exposure-box { margin-top: 1500px; height: 200px; background: #ffc107; display: flex; align-items: center; justify-content: center; font-weight: bold; } | |
| /* Modal Styles */ | |
| #modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); } | |
| #modal-content { background: white; width: 80%; max-width: 600px; margin: 100px auto; padding: 20px; border-radius: 8px; position: relative; max-height: 80vh; overflow-y: auto; } | |
| .close { position: absolute; right: 20px; top: 20px; cursor: pointer; font-size: 24px; } | |
| pre { background: #f4f4f4; padding: 10px; overflow-x: auto; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Frontend Tracking SDK Demo</h1> | |
| <p>Open console to see queueing. Scroll down for exposure tracking.</p> | |
| <div class="section"> | |
| <h2>1. User Interaction</h2> | |
| <button id="btn-click" class="btn">Click Me (Track Click)</button> | |
| <input type="text" id="inp-text" placeholder="Type something..." style="padding: 10px;"> | |
| </div> | |
| <div class="section"> | |
| <h2>2. Business Logic</h2> | |
| <button id="btn-buy" class="btn btn-success">Purchase Item ($99)</button> | |
| </div> | |
| <div class="section"> | |
| <h2>3. Errors</h2> | |
| <button id="btn-error" class="btn btn-danger">Trigger JS Error</button> | |
| <button id="btn-promise" class="btn btn-danger">Trigger Promise Rejection</button> | |
| </div> | |
| <div class="section"> | |
| <h2>4. Performance</h2> | |
| <p>Performance metrics (LCP, CLS, Load Time) are collected automatically on load. Check the console or wait for the report.</p> | |
| </div> | |
| <div id="exposure-box"> | |
| I am an Exposure Element! (Scroll to see me) | |
| </div> | |
| <!-- Modal for showing uploaded data --> | |
| <div id="modal"> | |
| <div id="modal-content"> | |
| <span class="close">×</span> | |
| <h2>Data Uploaded Successfully</h2> | |
| <p><strong>Endpoint:</strong> /report</p> | |
| <pre id="modal-json"></pre> | |
| </div> | |
| </div> | |
| <script src="tracker.js"></script> | |
| <script> | |
| // Initialize Tracker | |
| const tracker = new AnalyticsTracker({ | |
| endpoint: '/report', | |
| bufferSize: 3, // Flush every 3 events | |
| flushInterval: 5000, // Or every 5 seconds | |
| maxRetries: 3, | |
| onSuccess: (events, result) => { | |
| showModal(events); | |
| } | |
| }); | |
| // 1. Interaction Tracking | |
| const btnClick = document.getElementById('btn-click'); | |
| tracker.trackInteraction(btnClick, 'click', { widget: 'demo-button' }); | |
| const inpText = document.getElementById('inp-text'); | |
| tracker.trackInteraction(inpText, 'change', { widget: 'demo-input' }); | |
| // 2. Business Logic | |
| document.getElementById('btn-buy').addEventListener('click', () => { | |
| tracker.log('business', { | |
| action: 'purchase', | |
| item_id: '12345', | |
| price: 99.99, | |
| currency: 'USD' | |
| }); | |
| alert('Purchase event queued!'); | |
| }); | |
| // 3. Error Tracking | |
| document.getElementById('btn-error').addEventListener('click', () => { | |
| try { | |
| // Simulating an error | |
| throw new Error("This is a simulated JS error!"); | |
| } catch (e) { | |
| // In real app, window.onerror catches uncaught. | |
| // Here we throw it again to let global handler catch it, | |
| // OR we can manually track caught errors. | |
| // Let's throw it asynchronously to avoid breaking this block and let global handler catch it if we want | |
| setTimeout(() => { throw e; }, 0); | |
| } | |
| }); | |
| document.getElementById('btn-promise').addEventListener('click', () => { | |
| Promise.reject(new Error("Simulated Promise Rejection")); | |
| }); | |
| // 4. Exposure Tracking | |
| const exposureBox = document.getElementById('exposure-box'); | |
| tracker.trackExposure(exposureBox, { section: 'footer-promo' }); | |
| // Modal Logic | |
| const modal = document.getElementById('modal'); | |
| const modalJson = document.getElementById('modal-json'); | |
| const closeBtn = document.querySelector('.close'); | |
| function showModal(data) { | |
| modalJson.textContent = JSON.stringify(data, null, 2); | |
| modal.style.display = 'block'; | |
| } | |
| closeBtn.onclick = () => modal.style.display = 'none'; | |
| window.onclick = (event) => { | |
| if (event.target == modal) modal.style.display = 'none'; | |
| } | |
| </script> | |
| </body> | |
| </html> | |