Tracking

The Events described in the Events Guide should be used to build a form specific tracking script which writes data to the dataLayer of the website that uses the form.

See the following Code for an example how such a script could be implemented.

function buildECommerceItem(formData) {
  // build needed e-commerce item from formData
  return {}
}

onFormMounted(({ form, isValid, groupName }) => {
  window.dataLayer.push({
    event: 'add_to_cart',
    ecommerce: {
      currency: 'EUR',
      value: 0.0,
      items: [buildECommerceItem(form.values)],
    },
  })
})

onValidationGroupChange(({ form, isValid, groupName }) => {
  if (groupName === 'shipping-information' && isValid) {
    window.dataLayer.push({
      event: 'add_shipping_info',
      ecommerce: {
        currency: 'EUR',
        value: 0.0,
        items: [buildECommerceItem(form.values)],
      },
    })
  }
})

onFormSubmit(({ form, formData }) => {
  window.dataLayer.push({
    event: 'purchase',
    ecommerce: {
      currency: 'EUR',
      value: 0.0,
      items: [buildECommerceItem(form.values)],
    },
  })
})

Tracking #

Tracking