form_
interface
The event logs an instance where a form on a page is submitted.
Anchor to propertiesProperties
- Anchor to clientIdclientIdstring
The client-side ID of the customer, provided by Shopify
- Anchor to datadata
- string
The ID of the customer event
- Anchor to namenamestring
The name of the customer event
- number
The sequence index number of the event.
- Anchor to timestamptimestampstring
The timestamp of when the customer event occurred, in ISO 8601 format
- Anchor to typetype.Dom
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
string - data
PixelEventsFormSubmittedData - id
The ID of the customer event
string - name
The name of the customer event
string - seq
The sequence index number of the event.
number - timestamp
The timestamp of when the customer event occurred, in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format
string - type
EventType.Dom
export interface PixelEventsFormSubmitted {
/**
* The client-side ID of the customer, provided by Shopify
*/
clientId?: string;
data?: PixelEventsFormSubmittedData;
/**
* The ID of the customer event
*/
id?: string;
/**
* The name of the customer event
*/
name?: string;
/**
* The sequence index number of the event.
*/
seq?: number;
/**
* The timestamp of when the customer event occurred, in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format
*/
timestamp?: string;
type?: EventType.Dom;
}PixelEventsFormSubmittedData
- element
FormElement
export interface PixelEventsFormSubmittedData {
element?: 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
export interface FormElement {
/**
* The action attribute of a form element
*/
action?: string | null;
elements?: InputElement[];
/**
* The id attribute of an element
*/
id?: 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
export interface InputElement {
/**
* The id attribute of an element
*/
id?: string | null;
/**
* The name attribute of an element
*/
name?: string | null;
/**
* A string representation of the tag of an element
*/
tagName?: string | null;
/**
* The type attribute of an element. Often relevant for an input or button
* element.
*/
type?: string | null;
/**
* The value attribute of an element. Often relevant for an input element.
*/
value?: string | null;
}EventType
- AdvancedDom
advanced-dom - Custom
custom - Dom
dom - Meta
meta - Standard
standard
export enum EventType {
AdvancedDom = 'advanced-dom',
Custom = 'custom',
Dom = 'dom',
Meta = 'meta',
Standard = 'standard',
}Was this section helpful?
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,
});
});
});
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, }); });