# Analytics
The API for interacting with web pixels.
### Publish

```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
Methods for interacting with [Web Pixels](/docs/apps/marketing), such as emitting an event.
### Analytics

### publish
Publish method to emit analytics events to [Web Pixels](/docs/apps/marketing).
### visitor
A method for capturing details about a visitor on the online store.
### VisitorResult
Represents a visitor result.
VisitorSuccess | VisitorError
### VisitorSuccess
Represents a successful visitor result.
### type
Indicates that the visitor information was validated and submitted.
### VisitorError
Represents an unsuccessful visitor result.
### type
Indicates that the visitor information is invalid and wasn't submitted.
Examples are using the wrong data type or missing a required property.
### 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.
## Related
- [Targets](/docs/api/checkout-ui-extensions/targets)
- [Components](/docs/api/checkout-ui-extensions/components)
- [Configuration](/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.
### Visitor

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

```