clickedinterface
interface
The clicked event logs an instance where a customer clicks on a page element.
Anchor to propertiesProperties
- Anchor to clientIdclientIdstring
The client-side ID of the customer, provided by Shopify
- Anchor to datadataMouseEventData
- 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
MouseEventData
An object that contains data about a mouse event
- clientX
number - clientY
number - element
GenericElement - movementX
number - movementY
number - offsetX
number - offsetY
number - pageX
number - pageY
number - screenX
number - screenY
number
export interface MouseEventData {
clientX?: number;
clientY?: number;
element?: GenericElement;
movementX?: number;
movementY?: number;
offsetX?: number;
offsetY?: number;
pageX?: number;
pageY?: number;
screenX?: number;
screenY?: number;
}GenericElement
An object that contains data about a generic element type
- href
The href attribute of an element
string | null - 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 GenericElement {
/**
* The href attribute of an element
*/
href?: string | null;
/**
* 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('clicked', (event) => {
// Example for accessing event data
const element = event.data.element;
const elementId = element.id;
const elementValue = element.value;
const elementHref = element.href;
const payload = {
event_name: event.name,
event_data: {
id: elementId,
value: elementValue,
url: elementHref,
},
};
// 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('clicked', (event) => { // Example for accessing event data const element = event.data.element; const elementId = element.id; const elementValue = element.value; const elementHref = element.href; const payload = { event_name: event.name, event_data: { id: elementId, value: elementValue, url: elementHref, }, }; // 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('clicked', (event) => { // Example for accessing event data const element = event.data.element; const elementId = element.id; const elementValue = element.value; const elementHref = element.href; const payload = { event_name: event.name, event_data: { id: elementId, value: elementValue, url: elementHref, }, }; // Example for sending event to third party servers fetch('https://example.com/pixel', { method: 'POST', body: JSON.stringify(payload), keepalive: true, }); });