Client Event Integration Guide

How to receive the events the Perfitt button sends on your page and pass them to an analytics tool such as GA4. Among the five ways to confirm purchases, this is the one where you build the metrics yourself; matching orders by member ID is done by Perfitt.

How it works

Your product page

Perfitt size guide

Perfitt button (iframe)

viewPerfittProduct
perfittOpened
measureCompleted
viewRecommendation

Your page script

PerfittSize.onEvent(…)

2joined with the signed-in member ID

Analytics tool · your server

GA4, Power BI, Airbridge, your DB

While the user uses the Perfitt button, what happens inside the iframe is passed to your page (outside) as events such as viewPerfittProduct and perfittOpened.
You join those events with the signed-in member ID your page knows, and send them to the analytics tool you already use or to your own server. The events carry no member data.

Events and when they fire

Returning customers skip measuring and see the recommendation right away

View product
viewPerfittProduct
Click button
perfittOpened
Measure feet
measureCompleted
See recommendation
viewRecommendation
Close · keep shopping
closeResultkeepShopping

Returning customers skip measuring and see the recommendation right away

Event	When	How often	payload
viewPerfittProduct	The Perfitt button is shown on a recommendable product page	Once per page	`{}`
perfittOpened	The button is pressed and the Perfitt screen opens	Every time it opens	`{}`
measureCompleted	Foot measurement finishes	Every measurement. One person can measure several times; returning customers may not measure at all	`{}`
viewRecommendation	The recommended size is shown	Every time it is shown	`{}`
closeResult / keepShopping	The result screen is closed or 'Keep shopping' is pressed	Every press	`{ feetId }`

The payload of the four events is empty. Decide by the event name alone, and read the product code from PerfittSize.productId. On a MEASURE page type (measuring without a product), viewPerfittProduct does not fire. checkPerfittProduct is the old name of viewPerfittProduct and receives the same event.

Receiving events

Pass one event name (string) or several (array) and a callback to PerfittSize.onEvent. The callback receives { eventName, payload }. Call it after the Perfitt script has loaded, so place it below the Perfitt script.

Basic

const eventNames = ['viewPerfittProduct', 'perfittOpened', 'measureCompleted', 'viewRecommendation'];
PerfittSize.onEvent(eventNames, ({ eventName }) => {
  console.log('[PerfittSize]', eventName);
});

To tie events to a member, send the signed-in member ID your page knows along with them. GA4 example:

GA4

// Your signed-in member ID. Leave empty when not signed in
const memberId = MEMBER_ID;

PerfittSize.onEvent(['viewPerfittProduct', 'perfittOpened', 'measureCompleted', 'viewRecommendation'], ({ eventName }) => {
  gtag('event', 'perfitt_' + eventName, {
    user_id: memberId,
    product_id: PerfittSize.productId,
  });
});

With Google Tag Manager, push to dataLayer.

Google Tag Manager

PerfittSize.onEvent('viewRecommendation', ({ eventName }) => {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({ event: 'perfitt_' + eventName, member_id: MEMBER_ID, product_id: PerfittSize.productId });
});

Customers who are not signed in have no member ID, so their orders cannot be tied. You do not need to force sign-in; just note that only signed-in customers are covered.

How to verify

After adding the basic code above, check in the browser console in this order.

Open a recommendable product page on a phone (or a PC incognito window). The console should show [PerfittSize] viewPerfittProduct.
Press the Perfitt button to see perfittOpened, finish measuring to see measureCompleted, and viewRecommendation when the recommended size appears.
Open it again on the same device: measuring is skipped, so only viewRecommendation appears without measureCompleted.

If no event appears at all, first check that the button shows up. Troubleshooting

Server-to-server (Webhook)

There is also a way for the Perfitt server to notify your server directly when a measurement or recommendation happens, without going through the browser (FOOT_MEASURE_COMPLETED, SIZE_RECOMMENDED, etc.). It needs a receiving endpoint on your server and customerId integration.

Your Perfitt contact will walk you through the specification. Contact us

Client Event Integration Guide

How it works

While the user uses the Perfitt button, what happens inside the iframe is passed to your page (outside) as events such as viewPerfittProduct and perfittOpened.

You join those events with the signed-in member ID your page knows, and send them to the analytics tool you already use or to your own server. The events carry no member data.

Events and when they fire

Receiving events

How to verify

Server-to-server (Webhook)

While the user uses the Perfitt button, what happens inside the iframe is passed to your page (outside) as events such as `viewPerfittProduct` and `perfittOpened`.