# 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.

```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

value: `string`

The client-side ID of the customer, provided by Shopify

### data

value: `PixelEventsAdvancedDomAvailableData`


### id

value: `string`

The ID of the customer event

### name

value: `string`

The name of the customer event.

### seq

value: `number`

The sequence index number of the event.

### timestamp

value: `string`

The timestamp of when the customer event occurred, in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format

### type

value: `EventType.AdvancedDom`


### PixelEventsAdvancedDomAvailableData

### root

value: `DomFragment`

A fragment that contains the entire DOM tree, starting with the document node.

### DomFragment

Representation of a sub-tree of the host document.

### children

value: `DomFragment[]`

Array of `DomFragment` representing children of the parent `DomFragment`.

### node

value: `DomNode`

The node object of the `DomFragment`.

### parentSerializationId

value: `number`

The serialization ID of the parent node. -1 if there are no parents.

### prevSiblingSerializationId

value: `number`

The serialization ID of the previous sibling node. -1 if there are no previous siblings.

### DomNode

Representation of a node in the document.

### attributes

value: `{ [key: string]: string; }`

A dictionary of attributes of an element. Only available on element nodes.

### checked

value: `boolean`

The checked state of an element. Only available on input element nodes.

### clientRect

value: `ClientRect`

The coordinates of the element in the viewport. Only available on element nodes.

### nodeType

value: `number`

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

value: `ClientRect`

The scroll coordinates of the element in the viewport. Only available on element nodes.

### serializationId

value: `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.

### tagName

value: `string`

A string representation of the tag of a node. Only available on element nodes.

### textContent

value: `string`

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

value: `number`


### width

value: `number`


### x

value: `number`


### y

value: `number`


### EventType

### AdvancedDom

value: `advanced-dom`


### Custom

value: `custom`


### Dom

value: `dom`


### Meta

value: `meta`


### Standard

value: `standard`