クライアントイベント連携ガイド

動作の仕組み

1. ユーザーがPerfittボタンを使う間、iframeの中で起きたことがviewPerfittProductやperfittOpenedなどのイベントとしてお客様のページ(外側)へ渡されます。

2. お客様はそのイベントを、ご自身のページが知っているログイン会員IDと結び付け、使用中の分析ツールや自社サーバーへ送ります。イベントに会員情報は含まれません。

イベントと発生タイミング

イベントを受け取る

PerfittSize.onEventにイベント名を1つ(文字列)または複数(配列)と、コールバックを渡します。コールバックには{ eventName, payload }が届きます。Perfittのスクリプトの読み込み後に呼ぶ必要があるため、Perfittのスクリプトより下に置いてください。

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

会員と結び付けるには、お客様のページが知っているログイン会員IDを一緒に送ります。GA4の例です。

// お客様のログイン会員ID。未ログインなら空にします
const memberId = MEMBER_ID;

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

Google Tag Managerをお使いならdataLayerに入れます。

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

確認方法

上の基本コードを入れたあと、ブラウザのコンソールで順に確認します。

1. スマートフォン(またはPCのシークレットウィンドウ)で推薦可能な商品ページを開きます。コンソールに[PerfittSize] viewPerfittProductが出るはずです。
2. PerfittボタンをタップするとperfittOpened、計測を終えるとmeasureCompleted、推薦サイズが表示されるとviewRecommendationが順に出ます。
3. 同じ端末でもう一度開くと計測を省略するため、measureCompletedなしでviewRecommendationだけが出ます。

イベントが1つも出ない場合は、まずボタンが表示されるかを確認してください。トラブルシューティング

サーバー間連携 (Webhook)

ブラウザを経由せず、計測や推薦が起きたときにPerfittのサーバーからお客様のサーバーへ直接通知する方式もあります(FOOT_MEASURE_COMPLETED、SIZE_RECOMMENDEDなど)。お客様のサーバーの受信URLとcustomerId連携が必要です。

詳しい仕様はPerfittの担当者がご案内します。導入のご相談