advanced_dom_clicked

Requires access to the Advanced DOM Events in web pixel app extensions scope. To request access, please use the form in the Partner Dashboard. This scope is only available for apps that have a heatmap and/or session recordings. The Advanced DOM Events cannot be used on custom apps.

The advanced_dom_clicked event is published when a customer clicks on a page element.

Shopify Plus

This event is limited on checkout to stores on the Shopify Plus plan.

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 .AdvancedDom

AdvancedMouseEventData

An object that contains data about a mouse event.

clientX
```
number
```
clientY
```
number
```
movementX
```
number
```
movementY
```
number
```
node
The node object for the event target.
```
DomNode
```
offsetX
```
number
```
offsetY
```
number
```
pageX
```
number
```
pageY
```
number
```
screenX
```
number
```
screenY
```
number
```

DomNode

Representation of a node in the document.

attributes
A dictionary of attributes of an element. Only available on element nodes.
```
{ [key: string]: string; }
```
checked
The checked state of an element. Only available on input element nodes.
```
boolean
```
clientRect
The coordinates of the element in the viewport. Only available on element nodes.
```
ClientRect
```
nodeType
The type of node based on the native DOM API's [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType) values. It distinguishes different kind of nodes from each other, such as elements, text and comments.
```
number
```
scroll
The scroll coordinates of the element in the viewport. Only available on element nodes.
```
ClientRect
```
serializationId
The serialization id of the node. This is a unique identifier for the node based on its stable reference in the host DOM tree.
```
number
```
tagName
A string representation of the tag of a node. Only available on element nodes.
```
string
```
textContent
The text content of an element. Only available on text nodes.
```
string
```

ClientRect

An object that contains data about an element coordinates in a viewport.

height
```
number
```
width
```
number
```
x
```
number
```
y
```
number
```

EventType

AdvancedDom
```
advanced-dom
```
Custom
```
custom
```
Dom
```
dom
```
Meta
```
meta
```
Standard
```
standard
```

Examples

App Pixel

import {register} from '@shopify/web-pixels-extension';

analytics.subscribe('advanced_dom_clicked', (event) => {

// Accessing event payload

const node = event.data.node;

if (node?.nodeType !== Node.ELEMENT_NODE) return;

const payload = {

event_name: event.name,

event_data: {

id: node.serializationId,

url: node.attributes?.href,

};

// E.g. sending event to third party servers

fetch('https://example.com/pixel', {

method: 'POST',

body: JSON.stringify(payload),

keepalive: true,

});

Examples

App Pixel

import {register} from '@shopify/web-pixels-extension';

register(({analytics}) => {
  analytics.subscribe('advanced_dom_clicked', (event) => {
    // Accessing event payload
    const node = event.data.node;

    if (node?.nodeType !== Node.ELEMENT_NODE) return;

    const payload = {
      event_name: event.name,
      event_data: {
        id: node.serializationId,
        url: node.attributes?.href,
      },
    };

    // E.g. sending event to third party servers
    fetch('https://example.com/pixel', {
      method: 'POST',
      body: JSON.stringify(payload),
      keepalive: true,
    });
  });
});

Was this page helpful?