# Analytics

The API for interacting with web pixels.

```jsx
import React, {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>;
}

```

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

```

## StandardApi

The base API object provided to `purchase`, and `customer-account.order-status` extension targets.

### Docs_Standard_AnalyticsApi

### analytics

value: `Analytics`

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

### Analytics

### publish

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

Publish method to emit analytics events to [Web Pixels](https://shopify.dev/docs/apps/marketing).

### visitor

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

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

### VisitorSuccess

Represents a successful visitor result.

### type

value: `"success"`

Indicates that the visitor information was validated and submitted.

### VisitorError

Represents an unsuccessful visitor result.

### message

value: `string`

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.

### type

value: `"error"`

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

## Related

- [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)
- [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)
- [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)

## Examples

The API for interacting with web pixels.


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.

```jsx
import React, {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>;
}

```

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

```