Improving Elements Analytics - Proof of Concept

form-tracking.js

// Run addDataLayerTracking for each form to be tracked
// When the user enters invalid information call trackValidationError
export function addFormTracking(form) {
  form.addEventListener('change', ev => {
    let option = null
    if (input.type == 'checkbox') {
      option = input.checked ? 'Checked' : null
    }
    else if (input.type == 'radio') {
      option = input.dataset.trackingLabel
    }
    // we might to set and unset in the calls to dataLayer.push
    dataLayer.push({
      event: 'formChange',
      formId: form.dataset.trackingId,
      inputId: input.dataset.trackingId,
      option,
    })
  })
  form.addEventListener('submit', ev => {
    dataLayer.push({
      event: 'formSubmit',
      formId: form.dataset.trackingId,
    })
  })
}

export function trackValidationError(form, input, message) {
  dataLayer.push({
    event: 'formInvalid',
    formId: form.dataset.trackingId,
    inputId: input.dataset.trackingId,
    message,
  })
}

link-tracking.js

// Run addLinkTracking on the document (on load)
export function addLinkTracking(document) {
  document.body.addEventListener('click', ev => {
    // only track clicks on a or button that have a tracking ID
    const element = ev.target.closest('a[data-tracking-id], button[data-tracking-id]')
    if (!element) {
      return
    }
    const block = getBlock(element) || document.createElement('div')
    dataLayer.push({
      event: 'click',
      pageId: body.dataset.trackingId,
      blockId: block.dataset.trackingId,
      blockLabel: block.dataset.trackingLabel,
      elementId: element.dataset.trackingId,
      elementLabel: element.dataset.trackingLabel,
      tagName: element.tagName,
      blockPosition: getPosition(block),
      elementPosition: getPosition(element),
    })
  }
}

function getBlock(element) {
  return element.parentNode.closest('[data-tracking-id]')
}

function getPosition(element) {
  const parent = element.parentNode
  if (['ul', 'ol'].includes(parent.tagName)) {
    return Array.from(parent.children).indexOf(element)
  }
}