---
title: advanced_dom_input_focused
description: >-
  The `advanced_dom_input_focused` event is published when an input on a page
  gains focus.
api_name: web-pixels
source_url:
  html: >-
    https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_input_focused
  md: >-
    https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_input_focused.md
---

# advanced\_dom\_input\_focused

**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_input_focused` event is published when an input on a page gains focus.

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

  **PixelEventsAdvancedDomInputFocusedData**

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

### PixelEventsAdvancedDomInputFocusedData

* node

  The node object for the event target.

  ```ts
  DomNode
  ```

### 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';

  register(({analytics}) => {
    analytics.subscribe('advanced_dom_input_focused', (event) => {
      // Accessing event payload
      const node = event.data.node;

      if (node?.nodeType !== Node.ELEMENT_NODE) return;

      const payload = {
        event_name: event.name,
        event_data: {
          id: node.serializationId,
          value: node.attributes?.value,
        },
      };

      // E.g. sending event to third party servers
      fetch('https://example.com/pixel', {
        method: 'POST',
        body: JSON.stringify(payload),
        keepalive: true,
      });
    });
  });
  ```

***