--- title: input_changed description: The `input_changed` event logs an instance where an input value changes. api_name: web-pixels source_url: html: https://shopify.dev/docs/api/web-pixels-api/dom-events/input_changed md: https://shopify.dev/docs/api/web-pixels-api/dom-events/input_changed.md --- # input\_​changedinterface The `input_changed` event logs an instance where an input value changes. ## Properties * clientId string The client-side ID of the customer, provided by Shopify * data PixelEventsInputChangedData * id string The ID of the customer event * name string The name of the customer event * seq number The sequence index number of the event. * timestamp string The timestamp of when the customer event occurred, in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format * type EventType.Dom ### PixelEventsInputChangedData * element ```ts InputElement ``` ```ts export interface PixelEventsInputChangedData { element?: InputElement; } ``` ### InputElement An object that contains data about an input element type * id The id attribute of an element ```ts string | null ``` * name The name attribute of an element ```ts string | null ``` * tagName A string representation of the tag of an element ```ts string | null ``` * type The type attribute of an element. Often relevant for an input or button element. ```ts string | null ``` * value The value attribute of an element. Often relevant for an input element. ```ts string | null ``` ```ts 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 ```ts advanced-dom ``` * Custom ```ts custom ``` * Dom ```ts dom ``` * Meta ```ts meta ``` * Standard ```ts standard ``` ```ts export enum EventType { AdvancedDom = 'advanced-dom', Custom = 'custom', Dom = 'dom', Meta = 'meta', Standard = 'standard', } ``` ### Examples * #### Accessing DOM Events ##### App Pixel ```javascript import {register} from '@shopify/web-pixels-extension'; register(({analytics}) => { analytics.subscribe('input_changed', (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 ```javascript analytics.subscribe('input_changed', (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, }); }); ```