Example: Google Integration

Google Analytics 4

// Offer events
document.body.addEventListener('carpose-offer-select', function(event) {
  const offerData = event.detail.data;

  gtag('event', 'offer_select', {
    offer_id: offerData.id,
    offer_headline: offerData.headline,
    event_category: 'offer_interaction',
    event_label: offerData.subHeadline
  });
});

document.body.addEventListener('carpose-offer-contact', function(event) {
  const offerData = event.detail.data;

  gtag('event', 'offer_contact', {
    offer_id: offerData.id,
    offer_headline: offerData.headline,
    event_category: 'lead_generation',
    event_label: 'contact_form'
  });
});

// Car events
document.body.addEventListener('carpose-car-select', function(event) {
  const carData = event.detail.data;

  gtag('event', 'car_selected', {
    car_id: carData.id,
    car_name: carData.name,
    manufacturer: carData.manufacturer,
    model: carData.model,
    offer_number: carData.offerNumber,
    event_category: 'car_interaction'
  });
});

document.body.addEventListener('carpose-car-contact-modal-open', function(event) {
  const carData = event.detail.data;

  gtag('event', 'car_contact_modal_open', {
    car_id: carData.id,
    car_name: carData.name,
    manufacturer: carData.manufacturer,
    event_category: 'lead_generation',
    event_label: 'modal_open'
  });
});

document.body.addEventListener('carpose-car-contact', function(event) {
  const carData = event.detail.data;

  gtag('event', 'car_contact_submitted', {
    car_id: carData.id,
    car_name: carData.name,
    manufacturer: carData.manufacturer,
    offer_number: carData.offerNumber,
    event_category: 'lead_generation',
    event_label: 'contact_form'
  });
});

Google Tag Manager (dataLayer)

// Offer events
document.body.addEventListener('carpose-offer-select', function(event) {
  const offerData = event.detail.data;

  if (window.dataLayer) {
    window.dataLayer.push({
      event: 'offer_interaction',
      offer_id: offerData.id,
      offer_headline: offerData.headline,
      offer_subheadline: offerData.subHeadline,
      interaction_type: 'selection'
    });
  }
});

document.body.addEventListener('carpose-offer-contact', function(event) {
  const offerData = event.detail.data;

  if (window.dataLayer) {
    window.dataLayer.push({
      event: 'lead_generation',
      offer_id: offerData.id,
      offer_headline: offerData.headline,
      lead_type: 'contact_request'
    });
  }
});

// Car events
document.body.addEventListener('carpose-car-select', function(event) {
  const carData = event.detail.data;

  if (window.dataLayer) {
    window.dataLayer.push({
      event: 'car_interaction',
      car_id: carData.id,
      car_name: carData.name,
      manufacturer: carData.manufacturer,
      model: carData.model,
      offer_number: carData.offerNumber,
      interaction_type: 'selection'
    });
  }
});

document.body.addEventListener('carpose-car-contact-modal-open', function(event) {
  const carData = event.detail.data;

  if (window.dataLayer) {
    window.dataLayer.push({
      event: 'car_contact_modal',
      car_id: carData.id,
      car_name: carData.name,
      manufacturer: carData.manufacturer,
      modal_action: 'open'
    });
  }
});

document.body.addEventListener('carpose-car-contact', function(event) {
  const carData = event.detail.data;

  if (window.dataLayer) {
    window.dataLayer.push({
      event: 'lead_generation',
      car_id: carData.id,
      car_name: carData.name,
      manufacturer: carData.manufacturer,
      offer_number: carData.offerNumber,
      lead_type: 'car_contact_form'
    });
  }
});