AnalyticsAPI
The API for interacting with web pixels.
Anchor to standardapiStandardApi
The base API object provided to this and other customer-account extension targets.
- Anchor to analyticsanalyticsrequired
Methods for interacting with Web Pixels, such as emitting an event.
NoteRequires to connect a third-party domain to Shopify for your customer account pages.
Docs_Standard_AnalyticsApi
- analytics
Methods for interacting with [Web Pixels](/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
export interface Docs_Standard_AnalyticsApi
extends Pick<StandardApi<any>, 'analytics'> {}Analytics
- publish
Publish method to emit analytics events to [Web Pixels](/docs/apps/marketing).
(name: string, data: Record<string, unknown>) => Promise<boolean> - visitor
A method for capturing details about a visitor on the online store.
(data: { email?: string; phone?: string; }) => Promise<VisitorResult>
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.
VisitorSuccess | VisitorErrorVisitorSuccess
Represents a successful visitor result.
- type
Indicates that the visitor information was validated and submitted.
"success"
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.
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.
"error"
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;
}Publish
examples
Publish
React
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
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); }); }, );
Anchor to examplesExamples
Anchor to example-visitorVisitor
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
examples
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
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
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), ); } }); }, );