Data compass widget

Available market Only US

This widget will help sellers better understand their shop performance, manage operations effectively, and grow their business on TikTok. The data compass widget will enable sellers to access core analytics like GMV, visitors, reviews, and product rankings.

<div style="text-align: center"><img src="https://p16-arcosite-sg.ibyteimg.com/tos-alisg-i-k9wyc2ijk0-sg/0962d033fc814cc4885aec307d1e5598~tplv-k9wyc2ijk0-image.image" width="1476px" /></div>

Core analysis

Sellers can monitor shop sales and traffic performance for a selected time period through six core metrics:

Shop trends

This shows core metric trends. If you click Compare With the Same Period [1], you can view a comparison of trends between the current period and previous periods. Image

Products ranked by GMV

The seller can check the products Top 5 ranking list ordered by GMV, Information and indicators of products and SKUs:

• Product name/ID
• GMV
• Units sold

Image For more detailed data on TikTok Shop, you can add an entrance for merchants to click and go to Seller Center> analysis Image

React framework

Configure preload in WidgetConfigProvider preloadWidgetNames, you can put WidgetConfigProvider to the outermost preload time 1: @tiktokshop-widget/compass:metricGrid

import { WidgetConfigProvider,RemoteWidget } from '@tiktokshop/widget-kit-react';

const getWidgetToken = async () => {
  const res: any = await get('https://xxx/api/v1/widget/access_token', {
    outer_shop_id: 'xxx',
    partner_type: '1',
  });
  if (res?.code === 0) {
    return res?.data;
  }
  return {};
};

const initOptions = {
  config: {
    shopId: 'xxx', //seller id, such as 123456
    oecRegion: 'xxx', //country,such as US
    appKey: 'xxx', //The key corresponding to the merchant's creation service
    isvInfo: {
      name: 'xxx', //ISV name,such as OPEN_PLATFORM
    },
  },
  getToken: getWidgetToken,  //get auth token
  remotes: [
    {
      name: 'xxx', //Integrated business name, provided by the open platform,such as:@tiktokshop-widget/compass:metricGrid
    },
  ],
};

export default () => {
  return (
    <WidgetConfigProvider
      config={initOptions.config}
      getToken={initOptions.getToken}
      remotes={initOptions.remotes}
      preloadWidgetNames={['@tiktokshop-widget/compass:metricGrid']}>
      <RemoteWidget
        name={'@tiktokshop-widget/compass:metricGrid'}
        className={'containerClass'}
        options={{
            onClick: onHandleClick,//Control the jump event of clicking the 'More details' button inside the widget
        }} //Pass in the props required by the widget. If there are none, you don't need to pass them in.
      />
    </WidgetConfigProvider>
  );
};

2: @tiktokshop-widget/compass:performance

import { WidgetConfigProvider,RemoteWidget } from '@tiktokshop/widget-kit-react';

const getWidgetToken = async () => {
  const res: any = await get('https://xxx/api/v1/widget/access_token', {
    outer_shop_id: 'xxx',
    partner_type: '1',
  });
  if (res?.code === 0) {
    return res?.data;
  }
  return {};
};

const initOptions = {
  config: {
    shopId: 'xxx', //seller id, such as 123456
    oecRegion: 'xxx', //country,such as US
    appKey: 'xxx', //The key corresponding to the merchant's creation service
    isvInfo: {
      name: 'xxx', //ISV name,such as OPEN_PLATFORM
    },
  },
  getToken: getWidgetToken, //get auth token
  remotes: [
    {
      name: 'xxx', //Integrated business name, provided by the open platform,such as:@tiktokshop-widget/compass:performance
    },
  ],
};

export default () => {
  return (
    <WidgetConfigProvider
      config={initOptions.config}
      getToken={initOptions.getToken}
      remotes={initOptions.remotes}
      preloadWidgetNames={['@tiktokshop-widget/compass:performance']}>
      <RemoteWidget
        name={'@tiktokshop-widget/compass:performance'}
        className={'containerClass'}
        options={{}} //Pass in the props required by the widget. If there are none, you don't need to pass them in.
      />
    </WidgetConfigProvider>
  );
};

Widget SDK User Guide