# advanced_dom_changed

The `advanced_dom_changed` event is published when the DOM has been changed in any way, such as an element being added, removed, or modified.

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

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

const domFragmentMap = new Map();

register(({analytics}) => {
  let root;

  // Get the root node when it becomes available.
  analytics.subscribe('advanced_dom_available', (event) => {
    root = event.data.root;
  });

  // Keep the domFragmentMap up to date for reference with other events.
  analytics.subscribe('advanced_dom_changed', (event) => {
    // Handle added fragments
    event.data.addedFragments.forEach((addedFragment) => {
      const parentFragment = domFragmentMap.get(
        addedFragment.parentSerializationId,
      );
      if (parentFragment) {
        // Find the correct insertion index based on prevSiblingSerializationId
        // Default to end if no prev sibling found
        let insertIndex = parentFragment.children.length;
        if (addedFragment.prevSiblingSerializationId !== -1) {
          const prevSiblingIndex = parentFragment.children.findIndex(
            (childFragment) =>
              childFragment.node.serializationId ===
              addedFragment.prevSiblingSerializationId,
          );
          // Insert after the previous sibling
          insertIndex = prevSiblingIndex + 1;
        }
        // Insert at the calculated index
        parentFragment.children.splice(insertIndex, 0, addedFragment);
        domFragmentMap.set(addedFragment.node.serializationId, addedFragment);
      }
    });

    // Handle removed nodes
    event.data.removedNodes.forEach((removedNode) => {
      const removedFragment = domFragmentMap.get(removedNode.serializationId);
      const parentFragment = domFragmentMap.get(
        removedFragment.parentSerializationId,
      );
      if (parentFragment) {
        parentFragment.children = parentFragment.children.filter(
          (childFragment) =>
            childFragment.node.serializationId !== removedNode.serializationId,
        );
        domFragmentMap.delete(removedNode.serializationId);
      }
    });

    // Handle modified nodes
    event.data.modifiedNodes.forEach((modifiedNode) => {
      const fragment = domFragmentMap.get(modifiedNode.serializationId);
      if (fragment) {
        fragment.node = modifiedNode;
      }
    });
  });
});

```

## Properties

### PixelEventsAdvancedDomChanged

The `advanced_dom_changed` event logs an instance where the DOM has been changed in any way, such as an element being added, removed, or modified.

### clientId

value: `string`

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

### data

value: `PixelEventsAdvancedDomChangedData`

  - PixelEventsAdvancedDomChanged: export interface PixelEventsAdvancedDomChanged {
  /**
   * The client-side ID of the customer, provided by Shopify
   */
  clientId?: string;
  data?: PixelEventsAdvancedDomChangedData;
  /**
   * 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.AdvancedDom;
}
  - PixelEventsAdvancedDomChangedData: export interface PixelEventsAdvancedDomChangedData {
  /**
   * Array of `DomFragment` added to the document. Each `DomFragment` represents
   * a sub-tree of the document. Use the `parentSerializationId` and the
   * `prevSiblingSerializationId` to reconstruct the document.
   */
  addedFragments?: DomFragment[];

  /**
   * Array of `DomNode` that have had their attributes changed. Use the
   * `serializationId` of each to find it and update your own representation of
   * the document.
   */
  modifiedNodes?: DomNode[];

  /**
   * Array of `DomNode` removed from the document. Use the `serializationId` of
   * each to find it and remove it from your own representation of the document.
   */
  removedNodes?: DomNode[];
}

### id

value: `string`

The ID of the customer event

### name

value: `string`

The name of the customer event.

### seq

value: `number`

The sequence index number of the event.

### timestamp

value: `string`

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

### type

value: `EventType.AdvancedDom`

  - EventType: export enum EventType {
  AdvancedDom = 'advanced-dom',
  Custom = 'custom',
  Dom = 'dom',
  Meta = 'meta',
  Standard = 'standard',
}

### PixelEventsAdvancedDomChangedData

### addedFragments

value: `DomFragment[]`

  - DomFragment: export interface DomFragment {
  /**
   * Array of `DomFragment` representing children of the parent `DomFragment`.
   */
  children?: DomFragment[];

  /**
   * The node object of the `DomFragment`.
   */
  node?: DomNode;

  /**
   * The serialization ID of the parent node. -1 if there are no parents.
   */
  parentSerializationId?: number;

  /**
   * The serialization ID of the previous sibling node. -1 if there are no
   * previous siblings.
   */
  prevSiblingSerializationId?: number;
}
Array of `DomFragment` added to the document. Each `DomFragment` represents a sub-tree of the document. Use the `parentSerializationId` and the `prevSiblingSerializationId` to reconstruct the document.

### modifiedNodes

value: `DomNode[]`

  - DomNode: 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;
}
Array of `DomNode` that have had their attributes changed. Use the `serializationId` of each to find it and update your own representation of the document.

### removedNodes

value: `DomNode[]`

  - DomNode: 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;
}
Array of `DomNode` removed from the document. Use the `serializationId` of each to find it and remove it from your own representation of the document.

### DomFragment

Representation of a sub-tree of the host document.

### children

value: `DomFragment[]`

  - DomFragment: export interface DomFragment {
  /**
   * Array of `DomFragment` representing children of the parent `DomFragment`.
   */
  children?: DomFragment[];

  /**
   * The node object of the `DomFragment`.
   */
  node?: DomNode;

  /**
   * The serialization ID of the parent node. -1 if there are no parents.
   */
  parentSerializationId?: number;

  /**
   * The serialization ID of the previous sibling node. -1 if there are no
   * previous siblings.
   */
  prevSiblingSerializationId?: number;
}
Array of `DomFragment` representing children of the parent `DomFragment`.

### node

value: `DomNode`

  - DomNode: 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;
}
The node object of the `DomFragment`.

### parentSerializationId

value: `number`

The serialization ID of the parent node. -1 if there are no parents.

### prevSiblingSerializationId

value: `number`

The serialization ID of the previous sibling node. -1 if there are no previous siblings.

### DomNode

Representation of a node in the document.

### attributes

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

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

### checked

value: `boolean`

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

### clientRect

value: `ClientRect`

  - ClientRect: export interface ClientRect {
  height?: number;
  width?: number;
  x?: number;
  y?: number;
}
The coordinates of the element in the viewport. Only available on element nodes.

### nodeType

value: `number`

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.

### scroll

value: `ClientRect`

  - ClientRect: export interface ClientRect {
  height?: number;
  width?: number;
  x?: number;
  y?: number;
}
The scroll coordinates of the element in the viewport. Only available on element nodes.

### serializationId

value: `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.

### tagName

value: `string`

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

### textContent

value: `string`

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

### ClientRect

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

### height

value: `number`


### width

value: `number`


### x

value: `number`


### y

value: `number`


### EventType

### AdvancedDom

value: `advanced-dom`


### Custom

value: `custom`


### Dom

value: `dom`


### Meta

value: `meta`


### Standard

value: `standard`