form_submitted

The `form_submitted` event logs an instance where a form on a page is submitted.

Accessing DOM Events

import {register} from '@shopify/web-pixels-extension';

register(({analytics}) => {
  analytics.subscribe('form_submitted', (event) => {
    // Example for accessing event data
    const element = event.data.element;

    const elementId = element.id;
    const formAction = element.action;
    const emailRegex = /email/i;
    const [email] = element.elements
      .filter((item) => emailRegex.test(item.id) || emailRegex.test(item.name))
      .map((item) => item.value);
    const formDetails = element.elements.map((item) => {
      return {
        id: item.id,
        name: item.name,
        value: item.value,
      };
    });

    const payload = {
      event_name: event.name,
      event_data: {
        id: elementId,
        url: formAction,
        email: email,
        formDetails: formDetails,
      },
    };

    // Example for sending event to third party servers
    fetch('https://example.com/pixel', {
      method: 'POST',
      body: JSON.stringify(payload),
      keepalive: true,
    });
  });
});

analytics.subscribe('form_submitted', (event) => {
  // Example for accessing event data
  const element = event.data.element;

  const elementId = element.id;
  const formAction = element.action;
  const emailRegex = /email/i;
  const [email] = element.elements
    .filter((item) => emailRegex.test(item.id) || emailRegex.test(item.name))
    .map((item) => item.value);
  const formDetails = element.elements.map((item) => {
    return {
      id: item.id,
      name: item.name,
      value: item.value,
    };
  });

  const payload = {
    event_name: event.name,
    event_data: {
      id: elementId,
      url: formAction,
      email: email,
      formDetails: formDetails,
    },
  };

  // Example for sending event to third party servers
  fetch('https://example.com/pixel', {
    method: 'POST',
    body: JSON.stringify(payload),
    keepalive: true,
  });
});

Properties

PixelEventsFormSubmitted

The `form_submitted` event logs an instance where a form element on the page has been submitted

clientId

The client-side ID of the customer, provided by Shopify

data

id

The ID of the customer event

name

The name of the customer event

timestamp

The timestamp of when the customer event occurred, in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format

type

PixelEventsFormSubmittedData

element

FormElement

An object that contains data about a form element type

action

The action attribute of a form element

elements

id

The id attribute of an element

InputElement

An object that contains data about an input element type

id

The id attribute of an element

name

The name attribute of an element

tagName

A string representation of the tag of an element

type

The type attribute of an element. Often relevant for an input or button element.

value

The value attribute of an element. Often relevant for an input element.

EventType

AdvancedDom

Custom

Dom

Standard