---
title: clicked
description: >-
  The `clicked` event logs an instance where a customer clicks on a page
  element.
api_name: web-pixels
source_url:
  html: 'https://shopify.dev/docs/api/web-pixels-api/dom-events/clicked'
  md: 'https://shopify.dev/docs/api/web-pixels-api/dom-events/clicked.md'
---

# clickedinterface

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

## Properties

* clientId

  string

  The client-side ID of the customer, provided by Shopify

* data

  MouseEventData

* 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

### MouseEventData

An object that contains data about a mouse event

* clientX

  ```ts
  number
  ```

* clientY

  ```ts
  number
  ```

* element

  ```ts
  GenericElement
  ```

* movementX

  ```ts
  number
  ```

* movementY

  ```ts
  number
  ```

* offsetX

  ```ts
  number
  ```

* offsetY

  ```ts
  number
  ```

* pageX

  ```ts
  number
  ```

* pageY

  ```ts
  number
  ```

* screenX

  ```ts
  number
  ```

* screenY

  ```ts
  number
  ```

```ts
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

  ```ts
  string | null
  ```

* 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 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

  ```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('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

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