---
title: advanced_dom_changed
description: |-
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.
api_name: web-pixels
source_url:
html: https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_changed
md: https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_changed.md
---
# advanced\_dom\_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_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\ to stores on the \Shopify Plus\ plan.
## Properties
* **clientId**
**string**
The client-side ID of the customer, provided by Shopify
* **data**
**PixelEventsAdvancedDomChangedData**
* **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**
### PixelEventsAdvancedDomChangedData
* addedFragments
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.
```ts
DomFragment[]
```
* modifiedNodes
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.
```ts
DomNode[]
```
* removedNodes
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.
```ts
DomNode[]
```
### DomFragment
Representation of a sub-tree of the host document.
* children
Array of \`DomFragment\` representing children of the parent \`DomFragment\`.
```ts
DomFragment[]
```
* node
The node object of the \`DomFragment\`.
```ts
DomNode
```
* parentSerializationId
The serialization ID of the parent node. -1 if there are no parents.
```ts
number
```
* prevSiblingSerializationId
The serialization ID of the previous sibling node. -1 if there are no previous siblings.
```ts
number
```
### 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
```
### 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
```
### EventType
* AdvancedDom
```ts
advanced-dom
```
* Custom
```ts
custom
```
* Dom
```ts
dom
```
* Meta
```ts
meta
```
* Standard
```ts
standard
```
Examples
### Examples
* #### Accessing Advanced DOM Events
##### App Pixel
```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;
}
});
});
});
```