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

Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/upgrading-to-2026-04) to upgrade your extension.

# Analytics API

The API for interacting with web pixels.

## StandardApi

The base API object provided to `purchase` extension targets.

* **analytics**

  **Analytics**

  **required**

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

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

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

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

Examples

### Examples

* #### Publish

  ##### Description

  You can publish analytics events to the Shopify analytics frameworks and they will be propagated to all web pixels on the page.

  ##### React

  ```jsx
  import {useState, useEffect} from 'react';
  import {
    Banner,
    reactExtension,
    useApi,
  } from '@shopify/ui-extensions-react/checkout';

  export const purchaseCheckoutBlockRender =
    reactExtension(
      'purchase.checkout.block.render',
      () => <Extension />,
    );

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

    analytics
      .publish('checkout-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-react/checkout';
  import {useEffect} from 'react';

  export default extension(
    'purchase.checkout.block.render',
    (root, {analytics}) => {
      useEffect(() => {
        analytics
          .publish('checkout-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 {useState, useEffect} from 'react';
  import {
    Banner,
    reactExtension,
    useApi,
  } from '@shopify/ui-extensions-react/checkout';

  export const purchaseCheckoutBlockRender =
    reactExtension(
      'purchase.checkout.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-react/checkout';

  export default extension(
    'purchase.checkout.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),
            );
          }
        });
    },
  );
  ```

## Related

[Reference - Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)

[Reference - Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)

[Reference - Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)

[Learn - Tutorials](https://shopify.dev/apps/checkout)