--- 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. 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](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** **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 * #### ##### App Pixel ```js 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; } }); }); }); ``` ***