---
title: advanced_dom_selection_changed
description: >-
  The `advanced_dom_selection_changed` event is published when a customer uses
  text selection on a page.


  > Shopify Plus:

  > This event is limited on
  [checkout](https://help.shopify.com/manual/checkout-settings) to stores on the
  [Shopify Plus](https://www.shopify.com/plus) plan.
api_name: web-pixels
source_url:
  html: >-
    https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_selection_changed
  md: >-
    https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_selection_changed.md
---

# advanced\_​dom\_​selection\_​changed

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_selection_changed` event is published when a customer uses text selection on a page.

Shopify Plus

This event is limited on [checkout](https://help.shopify.com/manual/checkout-settings) to stores on the [Shopify Plus](https://www.shopify.com/plus) plan.

## Properties

* clientId

  string

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

* data

  PixelEventsAdvancedDomSelectionChangedData

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

### PixelEventsAdvancedDomSelectionChangedData

* node

  The node object for the event target.

  ```ts
  DomNode
  ```

```ts
export interface PixelEventsAdvancedDomSelectionChangedData {
  /**
   * The node object for the event target.
   */
  node?: DomNode;
}
```

### DomNode

Representation of a node in the document.

* attributes

  A dictionary of attributes of an element. Only available on element nodes.

  ```ts
  { [key: string]: string; }
  ```

* checked

  The checked state of an element. Only available on input element nodes.

  ```ts
  boolean
  ```

* clientRect

  The coordinates of the element in the viewport. Only available on element nodes.

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

  ```ts
  number
  ```

* scroll

  The scroll coordinates of the element in the viewport. Only available on element nodes.

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

  ```ts
  number
  ```

* tagName

  A string representation of the tag of a node. Only available on element nodes.

  ```ts
  string
  ```

* textContent

  The text content of an element. Only available on text nodes.

  ```ts
  string
  ```

```ts
export interface DomNode {
  /**
   * 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.
   */
  nodeType?: number;

  /**
   * The serialization id of the node. This is a unique identifier for the node
   * based on its stable reference in the host DOM tree.
   */
  serializationId?: number;

  /**
   * A dictionary of attributes of an element. Only available on element nodes.
   */
  attributes?: {[key: string]: string};

  /**
   * The checked state of an element. Only available on input element nodes.
   */
  checked?: boolean;

  /**
   * The coordinates of the element in the viewport. Only available on element
   * nodes.
   */
  clientRect?: ClientRect;

  /**
   * The scroll coordinates of the element in the viewport. Only available on
   * element nodes.
   */
  scroll?: ClientRect;

  /**
   * A string representation of the tag of a node. Only available on element
   * nodes.
   */
  tagName?: string;

  /**
   * The text content of an element. Only available on text nodes.
   */
  textContent?: string;
}
```

### ClientRect

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

* height

  ```ts
  number
  ```

* width

  ```ts
  number
  ```

* x

  ```ts
  number
  ```

* y

  ```ts
  number
  ```

```ts
export interface ClientRect {
  height?: number;
  width?: number;
  x?: number;
  y?: number;
}
```

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

### Examples

* #### Accessing Advanced DOM Events

  ##### App Pixel

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

  register(({analytics}) => {
    analytics.subscribe('advanced_dom_selection_changed', (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,
          value: node.attributes?.value,
        },
      };

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