clicked
interface

The clicked event logs an instance where a customer clicks on a page element.

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

PixelEventsClicked

The `clicked` event logs an instance where any element on the page has been clicked

clientId
The client-side ID of the customer, provided by Shopify
```
string
```
data
```
MouseEventData
```
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 PixelEventsClicked {
  /**
   * The client-side ID of the customer, provided by Shopify
   */
  clientId?: string;
  data?: MouseEventData;
  /**
   * 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;
}

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';

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

clickedinterface

Anchor to propertiesProperties

PixelEventsClicked

MouseEventData

GenericElement

EventType

examples

Accessing DOM Events

App Pixel

Custom Pixel

clicked
interface