Analytics API not available to customer-account extensions on the Order Status page

[mikefortney]

Please list the package(s) involved in the issue, and include the version you are using

app V3.52.0, cli V3.52.0, ui-extensions V2024.4.1, ui-extensions-react V2024.4.1

Describe the bug

When attempting to publish an event from a checkout extension when rendered to the block target on the order status page customer-account.order-status.block.render a browser console error is reported:

AnalyticsApiError: The analytics API is not available on the order status page.
    at publish (OrderDetails-c2d07e54873d5d20c206.js:1:5762)
    at Object.call (vendors-node_modules_preact_signals-react_dist_signals_module_js-node_modules_remote-ui_async-231f7c-e1912468c1248eb8e348.js:2:71448)
    at MessagePort._ (vendors-node_modules_preact_signals-react_dist_signals_module_js-node_modules_remote-ui_async-231f7c-e1912468c1248eb8e348.js:2:74023)

When clicking the code link to "OrderDetails-c2d07e54873d5d20c206.js:1:5762" this code is shown, which tells me that on the Order Status page, in the Order Details section, the analytics methods are simply defined to report this error, and nothing else.

function L({}) {
  const e = "The analytics API is not available on the order status page.";
  return {
    analytics: {
      publish: async()=>(console.error(new P(e)),
      !1),
      visitor: async()=>(console.error(new P(e)),
      {
        type: "error",
        message: e
      })
    }
  }
}

According to the customer-account.order-status.block.render target documentation, the analytics API should be available: https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/block/customer-account-order-status-block-render#customeraccountstandardapi-propertydetail-analytics

Steps to reproduce the behavior:

1. Create a new checkout extension according to the docs: https://shopify.dev/docs/apps/checkout/thank-you-order-status/add-survey?extension=react#create-a-checkout-ui-extension
2. Add the following simple example code to Checkout.tsx

import { Text } from '@shopify/ui-extensions-react/checkout';
import { useApi, reactExtension } from '@shopify/ui-extensions-react/customer-account';

const orderStatusBlock = reactExtension('customer-account.order-status.block.render', () => (
  <Extension />
));
export { orderStatusBlock };

function Extension() {
  const api = useApi<'customer-account.order-status.block.render'>();
  const { analytics } = api;
  analytics.publish('test_event', {
    name: 'order status test'
  });
  return <Text>This is the order status page</Text>;
}

3. Adjust the extensions.targeting section of shopify.extension.toml to this:

[[extensions.targeting]]
module = "./src/Checkout.tsx"
target = "customer-account.order-status.block.render"
export = "orderStatusBlock"

4. Run yarn dev, press p to open the preview console in your browser
5. Click the customer-account.order-status.block.render link to open a checkout
6. Complete the checkout process
7. View the Thank You page
8. Refresh the page to load the Order Status page
9. Open the browser dev tools console
10. See the error described above

Expected behavior

Analytics API methods are available on the Order Status page as described in the documentation: https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/block/customer-account-order-status-block-render#customeraccountstandardapi-propertydetail-analytics

Screenshots

[mikefortney]

Hello @jamesvidler and @robin-drexler is there any update on this ticket? Thanks!

[mikefortney]

@jamesvidler @robin-drexler @graeme-shopify are there any updates on this issue? Thanks!

[graeme-shopify]

Hey @mikefortney thanks for the patience with us getting back to this!

What you're describing here is a known issue, with unfortunately no fixed timeline for getting resolved. We are actively looking into the path to getting analytics and web pixels to work correctly on the order status targets. Once that work is complete I'll update this issue.

In the meantime it would be helpful to better understand the use case you're solving for here so we can be sure everything works as expected once this issue is resolved.

[mikefortney]

@graeme-shopify I appreciate the update. I am attempting to fire custom events from my checkout UI extension (customer interaction with my extension) on both the thank you page and order status page, but the analytics API is unavailable on the order status page, so I am unable to measure those custom events.

[graeme-shopify]

Roger that @mikefortney!

[lilong7676]

I have encountered the same problem, hope it can be solved as soon as possible, thank you very much! @graeme-shopify