---
title: advanced_dom_available
description: >-
  The `advanced_dom_available` event is published when the DOM has been loaded
  and is available for interaction.
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
  ```

### 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 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);
    });
  });
  ```

***