# advanced_dom_available 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. ### Accessing Advanced DOM Events ```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 = '<!DOCTYPE'; if (attrs.name) { html += ` ${attrs.name}`; } if (attrs.publicId) { html += ` PUBLIC "${attrs.publicId}"`; } if (attrs.systemId) { html += ` "${attrs.systemId}"`; } return `${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 += `</${tagName}>`; } 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); }); }); ``` ## Properties ### PixelEventsAdvancedDomAvailable The `advanced_dom_available` event logs an instance where the DOM has been loaded and is available for interaction. ### clientId The client-side ID of the customer, provided by Shopify ### data ### id The ID of the customer event ### name The name of the customer event. ### seq The sequence index number of the event. ### timestamp The timestamp of when the customer event occurred, in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format ### type ### PixelEventsAdvancedDomAvailableData ### root A fragment that contains the entire DOM tree, starting with the document node. ### DomFragment Representation of a sub-tree of the host document. ### children Array of `DomFragment` representing children of the parent `DomFragment`. ### node The node object of the `DomFragment`. ### parentSerializationId The serialization ID of the parent node. -1 if there are no parents. ### prevSiblingSerializationId The serialization ID of the previous sibling node. -1 if there are no previous siblings. ### DomNode Representation of a node in the document. ### attributes A dictionary of attributes of an element. Only available on element nodes. ### checked The checked state of an element. Only available on input element nodes. ### clientRect The coordinates of the element in the viewport. Only available on element nodes. ### 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. ### scroll The scroll coordinates of the element in the viewport. Only available on element nodes. ### 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. ### tagName A string representation of the tag of a node. Only available on element nodes. ### textContent 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 ### width ### x ### y ### EventType ### AdvancedDom ### Custom ### Dom ### Standard