--- title: advanced_dom_available description: >- The `advanced_dom_available` event is published when the DOM has been loaded and is available for interaction. > 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_available md: >- https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_available.md --- # advanced\_​dom\_​available 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_available` event is published when the DOM has been loaded and is available for interaction. 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 PixelEventsAdvancedDomAvailableData * 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 ### PixelEventsAdvancedDomAvailableData * root A fragment that contains the entire DOM tree, starting with the document node. ```ts DomFragment ``` ```ts export interface PixelEventsAdvancedDomAvailableData { /** * A fragment that contains the entire DOM tree, starting with the document * node. */ root?: DomFragment; } ``` ### 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 ``` ```ts 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; } ``` ### 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'; const voidElements = new Set([ 'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr', ]); const domFragmentMap = new Map(); function buildHtml(fragment) { const node = fragment.node; if (!domFragmentMap.has(node.serializationId)) { domFragmentMap.set(node.serializationId, fragment); } // Handle text nodes (nodeType === 3) if (node.nodeType === 3) { return node.textContent || ''; } // Handle document node if (node.nodeType === 9) { return fragment.children.reduce( (html, childFragment) => `${html}${buildHtml(childFragment)}`, '', ); } // Doctype node if (node.nodeType === 10) { const attrs = node.attributes; let html = '`; } if (!node.tagName) return ''; // Handle element nodes const tagName = node.tagName.toLowerCase(); const attributes = Object.keys(node.attributes) .filter((attr) => node.attributes[attr]) .map((attr) => ` ${attr}="${node.attributes[attr]}"`) .join(''); // Start tag let html = `<${tagName}${attributes}${voidElements.has(tagName) ? ' /' : ''}>`; // Add children recursively fragment.children.forEach((childFragment) => { html += buildHtml(childFragment); }); // End tag if (!voidElements.has(tagName)) { html += ``; } return html; } register(({analytics}) => { let root; analytics.subscribe('advanced_dom_available', (event) => { root = event.data.root; // E.g. rebuilds the HTML string of the whole document. buildHtml(root); }); }); ```