form_submitted

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

Anchor to propertiesProperties

Anchor to clientId clientId string: The client-side ID of the customer, provided by Shopify
Anchor to data data
Anchor to id id string: The ID of the customer event
Anchor to name name string: The name of the customer event
Anchor to seq seq number: The sequence index number of the event.
Anchor to timestamp timestamp string: The timestamp of when the customer event occurred, in ISO 8601 format
Anchor to type type .Dom

PixelEventsFormSubmittedData

element
An object that contains data about a form element type
```
FormElement
```

FormElement

An object that contains data about a form element type

action
The action attribute of a form element
```
string | null
```
elements
```
InputElement[]
```
id
The id attribute of an element
```
string | null
```

InputElement

An object that contains data about an input element type

id
The id attribute of an element
```
string | null
```
name
The name attribute of an element
```
string | null
```
tagName
A string representation of the tag of an element
```
string | null
```
type
The type attribute of an element. Often relevant for an input or button element.
```
string | null
```
value
The value attribute of an element. Often relevant for an input element.
```
string | null
```

EventType

AdvancedDom
```
advanced-dom
```
Custom
```
custom
```
Dom
```
dom
```
Meta
```
meta
```
Standard
```
standard
```

Examples

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

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,

});

Examples

Accessing DOM Events

App Pixel

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,
    });
  });
});

Custom Pixel

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,
  });
});

Was this page helpful?