---
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\ to stores on the \Shopify 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
```
### 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 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);
});
});
```