clicked

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

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

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

Properties

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

data

id

The ID of the customer event

name

The name of the customer event

timestamp

The timestamp of when the customer event occurred, in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format

type

MouseEventData

An object that contains data about a mouse event

clientX

clientY

element

movementX

movementY

offsetX

offsetY

pageX

pageY

screenX

screenY

GenericElement

An object that contains data about a generic element type

href

The href attribute of an element

id

The id attribute of an element

name

The name attribute of an element

tagName

A string representation of the tag of an element

type

The type attribute of an element. Often relevant for an input or button element.

value

The value attribute of an element. Often relevant for an input element.

EventType

AdvancedDom

Custom

Dom

Standard