前端h5页面项目埋点方案

function sendTrackingData(eventType, eventData) {
  const trackingData = {
    eventType: eventType,
    eventData: eventData,
    timestamp: new Date().toISOString(),
    userAgent: navigator.userAgent,
    url: window.location.href
  };

  fetch('https://your-backend-api.com/track', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(trackingData)
  })
  .then(response => response.json())
  .then(data => console.log('Tracking data sent successfully:', data))
  .catch(error => console.error('Error sending tracking data:', error));
}

window.addEventListener('load', () => {
  sendTrackingData('page_view', {
    title: document.title
  });
});

document.querySelectorAll('.track-click').forEach(element => {
  element.addEventListener('click', (event) => {
    sendTrackingData('click', {
      elementId: event.target.id,
      elementText: event.target.innerText
    });
  });
});

document.querySelectorAll('form').forEach(form => {
  form.addEventListener('submit', (event) => {
    sendTrackingData('form_submit', {
      formId: event.target.id,
      formData: new FormData(event.target)
    });
  });
});

<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'YOUR_TRACKING_ID');
</script>

document.querySelectorAll('.track-click').forEach(element => {
  element.addEventListener('click', (event) => {
    gtag('event', 'click', {
      'event_category': 'button',
      'event_label': event.target.id,
      'value': event.target.innerText
    });
  });
});