input_
interface
The event logs an instance where an input on a page gains focus.
Anchor to propertiesProperties
- Anchor to clientIdclientIdstring
The client-side ID of the customer, provided by Shopify
- Anchor to datadataPixelEventsInputFocusedData
- 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 typetypeEventType.Dom
PixelEventsInputFocusedData
- element
InputElement
export interface PixelEventsInputFocusedData {
element?: InputElement;
}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('input_focused', (event) => {
// Example for accessing event data
const element = event.data.element;
const elementId = element.id;
const elementValue = element.value;
const payload = {
event_name: event.name,
event_data: {
id: elementId,
value: elementValue,
},
};
// 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('input_focused', (event) => { // Example for accessing event data const element = event.data.element; const elementId = element.id; const elementValue = element.value; const payload = { event_name: event.name, event_data: { id: elementId, value: elementValue, }, }; // 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('input_focused', (event) => { // Example for accessing event data const element = event.data.element; const elementId = element.id; const elementValue = element.value; const payload = { event_name: event.name, event_data: { id: elementId, value: elementValue, }, }; // Example for sending event to third party servers fetch('https://example.com/pixel', { method: 'POST', body: JSON.stringify(payload), keepalive: true, }); });