---
title: Analytics
description: The API for interacting with web pixels.
api_version: 2025-07
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/apis/analytics
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/apis/analytics.md
---

# Analytics

The API for interacting with web pixels.

## StandardApi

The base API object provided to this and other `customer-account` extension targets.

* analytics

  Analytics

  required

  Methods for interacting with [Web Pixels](https://shopify.dev/docs/apps/marketing), such as emitting an event.

  Note

  Requires to [connect a third-party domain](https://help.shopify.com/en/manual/domains/add-a-domain/connecting-domains/connect-domain-customer-account) to Shopify for your customer account pages.

### Analytics

* publish

  Publish method to emit analytics events to \[Web Pixels]\(/docs/apps/marketing).

  ```ts
  (name: string, data: Record<string, unknown>) => Promise<boolean>
  ```

* visitor

  A method for capturing details about a visitor on the online store.

  ```ts
  (data: { email?: string; phone?: string; }) => Promise<VisitorResult>
  ```

```ts
export interface Analytics {
  /**
   * Publish method to emit analytics events to [Web Pixels](/docs/apps/marketing).
   */
  publish(name: string, data: Record<string, unknown>): Promise<boolean>;

  /**
   * A method for capturing details about a visitor on the online store.
   */
  visitor(data: {email?: string; phone?: string}): Promise<VisitorResult>;
}
```

### VisitorResult

Represents a visitor result.

```ts
VisitorSuccess | VisitorError
```

### VisitorSuccess

Represents a successful visitor result.

* type

  Indicates that the visitor information was validated and submitted.

  ```ts
  "success"
  ```

```ts
export interface VisitorSuccess {
  /**
   * Indicates that the visitor information was validated and submitted.
   */
  type: 'success';
}
```

### VisitorError

Represents an unsuccessful visitor result.

* message

  A message that explains the error. This message is useful for debugging. It's \*\*not\*\* localized, and therefore should not be presented directly to the buyer.

  ```ts
  string
  ```

* type

  Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property.

  ```ts
  "error"
  ```

```ts
export interface VisitorError {
  /**
   * Indicates that the visitor information is invalid and wasn't submitted.
   * Examples are using the wrong data type or missing a required property.
   */
  type: 'error';

  /**
   * A message that explains the error. This message is useful for debugging.
   * It's **not** localized, and therefore should not be presented directly
   * to the buyer.
   */
  message: string;
}
```

Examples

### Examples

* #### Publish

  ##### React

  ```jsx
  import {
    Banner,
    reactExtension,
    useApi,
  } from '@shopify/ui-extensions-react/customer-account';

  export const orderStatusBlockRender =
    reactExtension(
      'customer-account.order-status.block.render',
      () => <Extension />,
    );

  function Extension() {
    const {analytics} = useApi();

    analytics
      .publish(
        'customer-account-extension-loaded',
        {
          extensionName: 'My Extension',
        },
      )
      .then((result) => {
        if (result) {
          console.log(
            'succesfully published event, web pixels can now recieve this event',
          );
        } else {
          console.log('failed to publish event');
        }
      })
      .catch((error) => {
        console.log('failed to publish event');
        console.log('error', error);
      });

    return <Banner>See console for result</Banner>;
  }
  ```

  ##### JavaScript

  ```js
  import {extension} from '@shopify/ui-extensions/customer-account';

  export default extension(
    'customer-account.order-status.block.render',
    (root, {analytics}) => {
      analytics
        .publish(
          'customer-account-extension-loaded',
          {
            extensionName: 'My Extension',
          },
        )
        .then((result) => {
          if (result) {
            console.log(
              'succesfully published event, web pixels can now recieve this event',
            );
          } else {
            console.log('failed to publish event');
          }
        })
        .catch((error) => {
          console.error('failed to publish event');
          console.error('error', error);
        });
    },
  );
  ```

* #### Visitor

  ##### Description

  You can submit visitor information to Shopify, these will be sent to the shop backend and not be propagated to web pixels on the page.

  ##### React

  ```jsx
  import {
    Banner,
    reactExtension,
    useApi,
  } from '@shopify/ui-extensions-react/customer-account';

  export const orderStatusBlockRender =
    reactExtension(
      'customer-account.order-status.block.render',
      () => <Extension />,
    );

  function Extension() {
    const {analytics} = useApi();

    analytics
      .visitor({
        email: 'someEmail@example.com',
        phone: '+1 555 555 5555',
      })
      .then((result) => {
        if (result.type === 'success') {
          console.log('Success', result);
        } else {
          console.error('Error', result);
        }
      });

    return <Banner>See console for result</Banner>;
  }
  ```

  ##### JavaScript

  ```js
  import {extension} from '@shopify/ui-extensions/customer-account';

  export default extension(
    'customer-account.order-status.block.render',
    (root, {analytics}) => {
      analytics
        .visitor({
          email: 'someEmail@example.com',
          phone: '+1 555 555 5555',
        })
        .then((result) => {
          if (result.type === 'success') {
            console.log(
              `Success`,
              JSON.stringify(result),
            );
          } else {
            console.log(
              `Error`,
              JSON.stringify(result),
            );
          }
        });
    },
  );
  ```