AnalyticsAPI
API
The API for interacting with web pixels.
Anchor to standardapiStandardApi
The base API object provided to purchase extension targets.
Anchor to analytics
analytics
required
The methods for interacting with Web Pixels, such as emitting an event.
Was this section helpful?
Publish
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>;
}
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.
Was this section helpful?
Visitor
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>;
}
