Salesforce Commerce Cloud スタートガイド

このページで学べること

Salesforce Commerce Cloud を Klaviyo と外部連携する方法をご覧ください。Klaviyo のカートリッジと API 外部連携により、Salesforce Commerce Cloud（旧 Demandware）を使用するウェブサイトは、Klaviyo に迅速に接続し、リアルタイムと履歴の両方のデータを Klaviyo に送信できます。Klaviyo を Salesforce Commerce Cloud（SFCC）と外部連携すると、Klaviyo はウェブサイトのナビゲーション、検索のトラッキング、商品の閲覧、カテゴリの閲覧、カートへの商品追加、チェックアウト、注文など、人々がリアルタイムで行うアクションのトラッキングを開始します。

SFCC を Klaviyo と連携するには、主に 3 つのステップがあります。

1. SFCC に Klaviyo カートリッジをインストールする。
2. SFCC に有効化スニペットを追加する。
3. Klaviyo で SFCC OCAPI 外部連携を有効にする。

始める前に

Klaviyo は、SFCC の Controller ベースの Site Genesis（SG）サイトと Storefront Reference Architecture（SFRA）サイトの両方と連携します。各フレームワークでは、以下で説明するように、カートリッジの設定とスニペットが若干異なります。

バージョン 23.7.0 のカートリッジ（またはそれ以降のバージョン）を使用するには、SFCC 互換モードを 21.7 以降に更新することを推奨します。

まず開発環境を外部連携したい場合は、この記事で説明されている方法を使用してリンクされた Klaviyo アカウントを作成し、そのアカウントで開発環境を接続できます。ログイン時にアカウントをより適切に区別できるよう、アカウントの設定時に使用する会社名に "Dev" または "Staging" という単語を含めることをおすすめします。

認証や設定関連の問題を最小限に抑えるため、ファイアウォールプロバイダーの許可リストに Klaviyo IP を追加することも推奨されます。詳しくは、Klaviyo 連携トラフィックの IP アドレスを許可リストに登録する方法をご覧ください。

Klaviyo カートリッジを設定する

カートリッジをダウンロードする

Salesforce AppExchange でアプリ リスティングを確認できます。AppExchange では、Klaviyo の詳細を確認し、[今すぐ入手] をクリックして Github に移動できます。そこでは、カートリッジが zip ファイルとしてダウンロード可能です。SFRA サイトの場合は KlaviyoSFRA zip ファイルをダウンロードし、Site Genesis サイトの場合は KlaviyoSG zip ファイルをダウンロードしてください。

ダウンロードした zip ファイルに含まれているカートリッジを 2 つ設定する必要があります。これらのカートリッジには、以下が含まれます：

• int_klaviyo または int_klaviyo_sfra：サイト固有のカートリッジです。int_klaviyo は Site Genesis ベースのウェブサイト用で、int_klaviyo_sfra は SFRA ベースのウェブサイト用です。
• int_klaviyo_core：両方のインフラストラクチャの種類に対して、基本的な重複機能がいくつか含まれています。

カートリッジをインポートする

最初のステップは、Visual Studio Code または Eclipse でカートリッジをインポートし、SFCC インスタンスにリンクできるようにすることです。

VS Code で

1. int_klaviyo_core カートリッジをコピーして貼り付けます。
2. int_klaviyo（Site Genesis）または int_klaviyo_sfra（SFRA）のフォルダを、他のカートリッジ フォルダと同階層になるようにコードベースにコピーしてください。

Eclipse で

1. ［管理］ > ［インポート］ > ［一般］ > ［ワークスペースに既存プロジェクトをインポート］に移動します。
2. インポートウィザードを使用して int_klaviyo_core ディレクトリをインポートします。
3. カートリッジを接続する SFCC インスタンスを選択してください。
4. プロパティを選択してください。
5. [プロジェクト参照] を選択します。
6. int_klaviyo_core カートリッジで確認してください。
7. フレームワークに固有のもう一方のカートリッジ（int_klaviyo または int_klaviyo_sfra）についても、手順 2～6 を繰り返します。

カートリッジをカートリッジパスに追加する

カートリッジをインポートしたら、SFCC の Business マネージャーを使用して、サイトで使用するカートリッジのリストに追加する必要があります。

1. [管理]>[サイト]>[サイトの管理] の順に進みます。
2. サイトを選択します。
3. [設定] タブを選択します。
4. Cartridges というラベルの付いたカートリッジ パス入力の先頭で、インポートした Klaviyo カートリッジの名前を追加し、コア カートリッジを最後に配置します（int_klaviyo:int_klaviyo_core または int_klaviyo_sfra:int_klaviyo_core のいずれか）。
5. [適用] をクリックします。

[適用] をクリックすると、有効なカートリッジ パス というラベルの付いたフィールドの先頭に 2 つのカートリッジが表示されるはずです。

サービスを追加する

カートリッジをインポートしてサイトのカートリッジパスに追加したら、カートリッジの設定を構成できるようにするために Klaviyoサービスを追加する必要があります。Klaviyoカートリッジのzipファイルのルート ディレクトリには、metadata.zipという別のzipファイルがあります。以下の手順では、このzipファイルを参照します。

1. ［管理 > サイト開発 > サイトのインポートとエクスポート > サービス］ に移動します。
2. アップロードしてから metadata.zip ファイルをインポートしてください。
   

3. 選択したアーカイブをインポートするかどうかの確認を求められたら、[OK] を選択します。
4. ページ下部付近の Status セクションに、インポートが実行中として表示されます。
   

5. これで、Merchant tools > Site Preferences > Custom Preferences > Klaviyoでプリファレンス ページにアクセスできるようになります。
   
   ここから、以下の設定を管理できます。

• Klaviyo 有効
  カートリッジを有効にするには、"はい" に設定する必要があります。
• Klaviyo Private Key
  Klaviyo プライベート API キー。この外部連携に使用する Klaviyo プライベート API キーにフルアクセスが付与されていることを確認してください。
• Klaviyo アカウント
  Klaviyo 公開 API キー（またはサイト ID）。
• イベントに SFCC とラベル付け
  イベントに SFCC とラベル付けすることを選択すると、SFCC データを使用した Klaviyo の事前構築済みフローにアクセスできるようになります。現在、イベントにラベルを付けることの欠点として、ラベルを付けると、Klaviyo 商品フィード内で Viewed Product または Added to Cart のレコメンデーションにアクセスできなくなります。
  
  • 以前に 23.7.0 より古いカートリッジ バージョンをインストールしていて、現在 23.7.0 以上のバージョンにアップグレードする場合は、いいえ に設定してください。2023年7月13日より前に作成された外部連携（つまり、23.7.0 より前のカートリッジ バージョン）は、SFCC としてラベル付けされないメトリックを生成します。過去に 23.7.0 より前のバージョンを使用していた場合、この設定によって旧来の命名規則が考慮され、アカウント内のメトリックデータの不連続を防止します。
• カートに追加イベントを「Add To Cart」として送信
  以前に 23.7.0 より古いバージョンのカートリッジをインストールしており、現在バージョン 23.7.0 以降にアップグレードしている場合は、はい に設定します。それ以外の場合は、いいえ に設定します。この設定により、アカウント内のメトリック データの不連続が防止されます。
• Klaviyo Email フィールド セレクターとチェックアウトのメール フィールド セレクター
  これら 2 つのフィールドの設定方法について、詳しくは以下のセクションをご覧ください。
• 画像タイプ
  Klaviyo に送信されるイベント データで使用する商品画像のタイプ。設定する画像タイプがわからない場合は、[Merchant tools] > [Products and Catalogs] > [Products] に移動し、商品をクリックして、利用可能なもの（例：large、medium、small、hi-res）に基づいて使用するビュータイプを判断してください。
• マーケティングメールリスト ID
  チェックアウトでメール購読者を収集し、Klaviyo のリストに同期できます。この設定は、メール購読者を追加する対象として指定する Klaviyo 内のリストの ID です。Klaviyo でリスト ID を見つける方法について学びましょう。チェックアウトでメール購読者を収集するには、後のセクションで説明するチェックボックススニペットも追加する必要があります。
• マーケティング SMS リスト ID
  チェックアウト時に SMS 購読者を収集し、Klaviyo リストに同期できます。この設定は、SMS 購読者を追加したい Klaviyo リスト ID です。Klaviyo でリスト ID を見つける方法をご覧ください。SMS とメールの両方の購読者を収集する場合は、メール用とは別のリストを SMS 用に選択してください。これにより、同意が常に正しいチャネルに適切に関連付けられることが保証されます。チェックアウトで SMS 購読者を収集するには、後のセクションで説明するチェックボックス スニペットに加えて、いくつかの前提条件が必要です。
  

6. metadata.zip ファイルは、SFCC に新しいサービスも作成します。[管理]>[運用]>[サービス] の順に進むと、[サービス] タブの下に KlaviyoEventService と KlaviyoSubscribeProfilesService という 2 つの新しいエントリが表示され、それぞれに対応するプロファイルと認証情報のエントリも表示されます。

Klaviyo Email フィールドセレクターとチェックアウトのメールフィールドセレクターの設定

これらの設定は、Klaviyo がサイト訪問者を正しく識別してトラッキングするために不可欠です。訪問者が Klaviyo で識別されていない場合、その訪問者のイベントはトラッキングされません。外部連携が完了したら、以下の Test your SFCC setup セクションで、Klaviyo Email とチェックアウトのメールフィールド セレクターの設定をテストする方法を確認できます。

Klaviyo Email フィールド セレクター

Klaviyo Email Field Selectors のサイト設定は、サイト上のすべてのメールおよび電話番号の入力フィールド（以下で扱う、チェックアウト内にあるメール入力を除く）をターゲットにするために使用されます。これらのフィールドは標準の CSS セレクターで識別し、それぞれを個別にサイト設定に追加します（これは “文字列のセット” であり、複数の文字列値を 1 つずつ入力できます）。標準のスタイルシートで特定の要素をターゲットにするために使用できる複雑なセレクターはすべて使用できます。たとえば、#dwfrm_login div.username input.input-text は有効です。また、共有属性に基づいてサイト全体の複数要素をターゲットにできるセレクター（例：input[type=email]）も使用できます。動的に生成された ID（SiteGen で非常によくあるケース）を介して入力をターゲットにしないよう注意してください。これらの ID はページ読み込みに応じて変わるため、失敗します（例：#dwfrm_login_username_d0fignzngiyq）。

ページ読み込み後に DOM に追加されたフィールドでも、ターゲット設定できることに注意してください。例としては、AJAX 呼び出し後にモーダルに挿入されるメールアドレスフィールド、またはサードパーティの JavaScript によって DOM に注入されるフィールドが挙げられます。

また、電話番号フィールドだけでは、Klaviyo がユーザーを完全に識別できない場合があることにも注意してください。これは、Klaviyo アカウント内の SMS 設定（SMS が有効で、入力された電話番号の国に関連付けられた送信元番号がある場合、ブラウザが識別されます）によって異なります。このため、電話番号フィールドをターゲットにする CSS セレクターの追加は「あると便利」または「必要に応じて」と考えられますが、メールフィールドについては必須と考える必要があります。

チェックアウトのメールフィールド セレクター

チェックアウトでのメール収集フィールドは特殊なケースであるため、ターゲティング用に独自のサイト設定があります。この原則は、Klaviyo Email フィールド セレクターのサイト設定とまったく同じです。チェックアウトの開始、終了、または途中のいずれに表示されるかにかかわらず、サイトのチェックアウト フロー内のメールアドレス フィールドをターゲットにする単一の CSS セレクターを入力するだけです。

チェックアウトでメール収集フィールドをターゲットにするようにこのサイト設定を正しく構成することは、Started Checkout イベントを正しくトラッキングするうえで不可欠です。そのため、チェックアウトのメール収集フィールドにメールアドレスを入力した後に、Started Checkout イベントが Klaviyo に表示されることを確認するテストを行うことを強くおすすめします。

また、Checkout Email Field Selector サイトプリファレンスが対象とするチェックアウトのメールフィールドは、Started Checkout イベントをトリガーすることに加えてユーザーを識別するために自動的に接続される点にも注意してください（つまり、チェックアウトのメールフィールドの CSS セレクターを Klaviyo Email Field Selectors と Checkout Email Field Selector の両方のサイトプリファレンスに含める必要はありません）。

設定用スニペットを追加

カートリッジ設定の最後の手順は、カートリッジがサイトと通信できるように、スニペットをサイトのテンプレート ファイルに追加することです。これらの手順は Site Genesis（SG）と Storefront Reference Architecture（SFRA）のインフラストラクチャで大きく異なるため、設定に合った正しい手順に従ってください。

Storefront Reference Architecture（SFRA）スニペットの設定

次のコードを pageFooter.isml ファイルの末尾に追加します。

<isinclude template="klaviyo/klaviyoFooter"/>

これで、SFRA ストアのスニペットのセットアップが完了しました。

Site Genesis（SG）スニペットの設定

1. KlaviyoFooter.isml をグローバル フッターに追加するには：次のコードを footer.isml ファイルの下部（または、すべてのページの下部付近で読み込まれる同様のテンプレート）に追加します。
   

<isinclude template="klaviyo/klaviyoFooter"/>

1. サーバーサイドのユーザー識別用にスニペットを追加するには：次のスニペットを、各テンプレートのレンダリング呼び出し（例：app.getView(...)）の前であればどこでも、Account-Show と Cart-Show コントローラーに追加します。
   

   // KLAVIYO
    var klaviyoUtils = require('*/cartridge/scripts/klaviyo/utils'), klid;
    if(klaviyoUtils.klaviyoEnabled && 
    !klaviyoUtils.getKlaviyoExchangeID()){
    klid = klaviyoUtils.getProfileInfo();
    }
    // END KLAVIYO

1. 次に、app.getView(...) 呼び出しを更新して、pdict 変数として klid を含めます。
   • アカウント表示コントローラー内：
     

app.getView({downloadAvailable: true, klid: klid}).render('account/accountoverview');
// KLAVIYO: added 'klid: klid'

• Cart-Show コントローラー内で：
  

app.getView('Cart', {cart: app.getModel('Cart').get(),RegistrationStatus: false,klid: klid // KLAVIYO: added 'klid: klid'}).render('checkout/cart/cart');
        

1. Cart-AddProduct コントローラーに Added To Cart スニペットを追加するには：テンプレートをレンダリングする呼び出し（例：app.getView(...)）の前であればどこでも、次のスニペットを Cart-AddProduct コントローラーに追加します。
   

 /* Klaviyo Added to Cart event tracking */
    var BasketMgr = require('dw/order/BasketMgr');
    var klaviyoUtils = require('*/cartridge/scripts/klaviyo/utils');
    var addedToCartData = require('*/cartridge/scripts/klaviyo/eventData/addedToCart');
    if(klaviyoUtils.klaviyoEnabled){
    var exchangeID = klaviyoUtils.getKlaviyoExchangeID();
    var dataObj, serviceCallResult, currentBasket;
    var isKlDebugOn = request.getHttpReferer().includes('kldebug=true') ? true
    : false;
    if (exchangeID) {
    currentBasket = BasketMgr.getCurrentBasket();
    if (currentBasket && currentBasket.getProductLineItems().toArray().length)
    {
    dataObj = addedToCartData.getData(currentBasket);
    serviceCallResult = klaviyoUtils.trackEvent(exchangeID, dataObj, klaviyoUtils.EVENT_NAMES.addedToCart,
    false);
    if (isKlDebugOn) {
    var klDebugData = klaviyoUtils.prepareDebugData(dataObj);
    var serviceCallData = klaviyoUtils.prepareDebugData(serviceCallResult);
    var siteGenKlDebutData = `<input type="hidden" name="siteGenKlDebutData"
    id="siteGenKlDebutData" value="${klDebugData}"/>`;
    var siteGenServiceCallData = `<input type="hidden" name="siteGenServiceCallData"
    id="siteGenServiceCallData" value="${serviceCallData}"/>`;
    response.writer.print(siteGenKlDebutData);
    response.writer.print(siteGenServiceCallData);
    }
    }
    }
    }
    /* END Klaviyo Added to Cart event tracking */

1. Started Checkout スニペット：Started Checkout イベントを追跡するためにチェックアウトコントローラーに Klaviyo スニペットを追加する場合は、以下の点に留意することが重要です。
   • これらのスニペットを追加する目的は、チェックアウト フロー内の Basket オブジェクトにメールアドレスが紐付けられているかどうかを確認し、紐付けられた時点で チェックアウトを開始 イベントを発火させることです。チェックアウト フローでは、できるだけ早い段階でメールアドレスと Basket の関連付けを捉えることが重要です。
   • サイトベースのチェックアウトのカスタマイズにより、メールアドレスが添付された Basket オブジェクトを最初に受け取るコントローラーを、Klaviyo が正確に定義することはできません。
   • チェックアウト内でトリガーされるすべての主要なルートにコードスニペットを追加することをおすすめします。デバッガーを使用して、チェックアウトフロー内でメールアドレスがバスケットに正確にいつ関連付けられるかを特定できる場合は、そのルートにのみスニペットを追加しても構いません。ただし、すべての可能なチェックアウトパス（ゲスト、ログイン済み、チェックアウト内でログインする場合など）がコードをトリガーすることを確認するために、徹底的にテストしてください。
2. チェックアウトでの最初のルートヒット（通常は COCustomer-Start）のスニペットは次のとおりです。テンプレートをレンダリングする呼び出し（すなわち、app.getView(...)）の前であれば、どこにでも挿入できます。このスニペットにおける重要な違いとして、他のチェックアウトスニペット（下でハイライト）と比較して、KLCheckoutHelpers.startedCheckoutHelper メソッドの第 1 引数を false ではなく true として渡している点にご注意ください。次のスニペットでは、KLCheckoutHelpers.startedCheckoutHelperメソッドが、（他のチェックアウトスニペットのように）false ではなく true になっている点にご注意ください。これは、新しいStarted Checkoutイベントをトラッキングする必要があることをコードに知らせるために不可欠です。

/* Klaviyo Started Checkout event tracking */
   var KLCheckoutHelpers = require('*/cartridge/scripts/klaviyo/checkoutHelpers');
   var customerEmail = KLCheckoutHelpers.getEmailFromBasket();
   var KLTplVars = KLCheckoutHelpers.startedCheckoutHelper(true, customerEmail);
   if (KLTplVars.klDebugData || KLTplVars.serviceCallData) {
       app.getView({
           klDebugData: KLTplVars.klDebugData,
           serviceCallData: KLTplVars.serviceCallData
       }).render('klaviyo/klaviyoDebug');
   }
   /* END Klaviyo Started Checkout event tracking */

1. 次に、app.getView(...) 呼び出しを更新して、pdict 変数として klid を含めます。

app.getView({
  ContinueURL: URLUtils.https('COCustomer-LoginForm').append('scope', 'checkout'),
klid: KLTplVars.klid, // KLAVIYO: added 'klid: klid'
}).render('checkout/checkoutlogin');

1. 次のスニペットは、メールアドレスが Basket オブジェクトに関連付けられた後に最初に実行されるルートに追加する必要があります。不明な場合、または念のため確実にしておきたい場合は、以下のすべてのルートにこのスニペットを追加することをおすすめします。上記のスニペットと同様に、このスニペットは、テンプレートをレンダリングする呼び出しの前、または後続のコントローラー（COBilling-Save の例：app.getController(‘COSummary’).Start()）の呼び出しの前であれば、どこにでも追加できます。
   • COShipping-Start
   • COBilling-PublicStart
   • COBilling-Save
   • COPlaceOrder-Start

/* Klaviyo Started Checkout event tracking */
  var KLCheckoutHelpers = require('*/cartridge/scripts/klaviyo/checkoutHelpers');
var customerEmail = KLCheckoutHelpers.getEmailFromBasket();
  var KLTplVars = KLCheckoutHelpers.startedCheckoutHelper(false, customerEmail);
if (KLTplVars.klDebugData || KLTplVars.serviceCallData) {
app.getView({
klDebugData: KLTplVars.klDebugData,
serviceCallData: KLTplVars.serviceCallData
}).render('klaviyo/klaviyoDebug');
}
/* END Klaviyo Started Checkout event tracking */

1. テンプレートを直接呼び出すルート（例：COShipping-Start）の場合は、app.getView(...) 呼び出しを更新し、pdict 変数として klid を含めてください。COShipping-Start ルートの例は次のとおりです：

app.getView({
ContinueURL: URLUtils.https('COShipping-SingleShipping'),
Basket: cart.object,
HomeDeliveries: homeDeliveries,
klid: KLTplVars.klid, // KLAVIYO: added 'klid: klid'
}).render('checkout/shipping/singleshipping');

1. COSummary-ShowConfirmation コントローラに注文確認スニペットを追加するには：テンプレートをレンダリングする呼び出しの前の任意の場所で、次のスニペットを COSummary-ShowConfirmation コントローラに追加します。

/* Klaviyo Order Confirmation event tracking */
  var klaviyoUtils = require('*/cartridge/scripts/klaviyo/utils');
  var orderConfirmationData = require('*/cartridge/scripts/klaviyo/eventData/orderConfirmation');
var Logger = require('dw/system/Logger');
if (klaviyoUtils.klaviyoEnabled){
session.privacy.klaviyoCheckoutTracked = false;
var exchangeID = klaviyoUtils.getKlaviyoExchangeID();
var dataObj, serviceCallResult;
if (order && order.customerEmail) {
// check to see if the status is new or created
  if (order.status == dw.order.Order.ORDER_STATUS_NEW || order.status == dw.order.Order.ORDER_STATUS_OPEN)
  {
dataObj = orderConfirmationData.getData(order, exchangeID);
  serviceCallResult = klaviyoUtils.trackEvent(exchangeID, dataObj, klaviyoUtils.EVENT_NAMES.orderConfirmation,
  order.customerEmail);
}
  if('KLEmailSubscribe' in session.custom || 'KLSmsSubscribe' in session.custom)
  {
var email = order.customerEmail;
var phone = order.defaultShipment.shippingAddress.phone;
var e164PhoneRegex = new RegExp(/^\+[1-9]\d{1,14}$/);
if (phone) {
  // NOTE: Klaviyo only accepts phone numbers that include + and the country code
  at the start (ex for US: +16465551212)
  // in order to successfully get users subscribed to SMS list you must collect
  the country code in your order phone number field!
phone = '+' + phone.replace(/[^a-z0-9]/gi, '');
if(!e164PhoneRegex.test(phone)) {
if (session.custom.KLSmsSubscribe) {
  var logger = Logger.getLogger('Klaviyo', 'Klaviyo.core: Order-Confirm');
  logger.error(`SMS Subscription requested by user, but an invalid phone number
  was provided. Phone number: ${phone}`);
}
phone = null;
}
}
if (email || phone) {
klaviyoUtils.subscribeUser(email, phone);
}
}
}
}
/* END Klaviyo Order Confirmation event tracking */

Site Genesis ストアのスニペット設定が完了しました。

チェックアウトでの同意チェックボックス スニペット（SG および SFRA）を追加する

チェックアウトでメールと SMS の同意を収集するには、上記の Add services セクションで示した List ID 設定を構成することに加えて、同意チェックボックスが希望の場所に表示されるようにするためのコードスニペットを含める必要があります。

たとえば、これらのスニペットをチェックアウトに表示するには、SFRA 内の shipmentCard.isml テンプレート（app_storefront_base）に配置するか、SiteGen 内の billing.isml テンプレート（app_storefront_core）に配置できます。

以下は Site Genesis と SFRA の両方の ISML スニペットで、特定のサイトに最適なチェックアウト フロー内の任意の場所に配置できます。Site Genesis でチェックアウト時の同意が正しく機能するには、上記の セットアップ スニペットを追加 セクションで参照されている注文確認スニペットを含めている必要があります。

以下のスニペットは、メールと SMS のオプトイン文言が 'checkout' という名前のプロパティ リソースバンドルに含まれていることを前提としています。`your.email.subscribe.resource.string.here`および `your.sms.subscribe.resource.string.here`を、それぞれメールと SMS のオプトイン文言に対応するキーに置き換える必要があります。この文言はチェックボックスの横に表示されます。

たとえば、オプトイン文言は次のようになります。

• メール
  メール更新を購読する
• SMS
  SMS の最新情報を購読します。このボックスにチェックを入れて上記に電話番号を入力すると、提供された番号でマーケティング用テキストメッセージ（[プロモーションコード] や [カートのリマインダー] など）を [会社名] から受信すること（自動ダイヤルによるメッセージも含む）に同意したことになります。同意は購入の条件ではありません。メッセージおよびデータ通信料金が適用される場合があります。メッセージの頻度は変わることがあります。「STOP」と返信するか、いずれかのメッセージの購読解除リンク（利用可能な場合）をクリックして、いつでも購読を解除できます。プライバシーポリシー [リンク] および利用規約 [リンク] をご覧ください。

 <isset name="KLEmailSubscribed" value="${(session.custom.KLEmailSubscribe
  == true) ? 'checked' : ''}" scope="page" />
  <isset name="KLSmsSubscribed" value="${(session.custom.KLSmsSubscribe == true)
  ? 'checked' : ''}" scope="page" />
  <input type="checkbox" id="KLEmailSubscribe" ${KLEmailSubscribed} /> ${Resource.msg('your.email.subscribe.resource.string.here',
  'checkout', null)} <br />
  <input type="checkbox" id="KLSmsSubscribe" ${KLSmsSubscribed} /> ${Resource.msg('your.sms.subscribe.resource.string.here',
  'checkout', null)}

Klaviyo で OCAPI 外部連携を有効にする

エンドポイント

商品カタログおよび過去／継続中の注文データについて SFCC と連携するために、Klaviyo は 4 つの OCAPI エンドポイントを使用します。

• /order_search
  過去の注文データを Klaviyo に同期し、継続中の注文イベントを 60 分ごとに同期します。「購入商品」および「注文の確定」イベントは、セグメンテーションとフローフィルター用の追加データを同期し、「注文確認」イベントでは利用できない高度なパーソナライズに最適です。リアルタイムの注文確認メールについては、カートリッジの 「注文確認」イベントを使用します。
• /sites
  外部連携のセットアップ中に、Klaviyo がどのサイトからデータを同期するかを選択できます。
• /product_search
  カタログを Klaviyo に接続し、メールでの商品レコメンデーションなどの機能を有効にします。
• /products/*/variations
  Klaviyo にバリエーションを同期できるようにして、再入荷、在庫僅少、値下げフローなどの機能を有効にします。

SFCC 側の設定

SFCC の OCAPI と通信する前に、SFCC でいくつかの権限と設定をセットアップする必要があります。

Klaviyo の外部連携では order_search と product_search に対する POST 権限が必要ですが、実際には SFCC にデータを POST していません。これは SFCC の OCAPI の設計によるものです。

1. https://account.demandware.com/dw/account/APIAdmin に移動してください。そして、Klaviyo 用の API クライアントを追加します。API クライアント ID とパスワードは、OCAPI のベアラートークンを生成するために必要です。
2. API クライアントを追加したら、SFCC ビジネス マネージャーで [管理] > [サイト開発] > [Open Commerce API 設定] に移動します。
3. 次のスニペットを追加し、API バージョンと Client ID を置き換えます。API バージョンは 19.5 以降および 18.8 をサポートしています。CLIENT_ID を、前の手順の API クライアント設定で生成された API Client ID（"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" のような形式）に置き換えます。これらの API の設定がすでに存在する場合は、既存の clients JSON 配列に以下の強調表示されたセクションを追加するだけでよい場合があります。
   1. Shop タイプおよびコンテキスト Global (organization-wide) の下に次の JSON を追加し、SHOP_API_VERSION を OCAPI Shop API バージョンに置き換えてから、[保存] をクリックします。
      追加すると、設定は次のように表示されます：
      

{
 "_v":"SHOP_API_VERSION",
 "clients":[
 {
 "client_id":"CLIENT_ID",
 "resources":[
 {
 "resource_id":"/order_search",
 "methods":["post"],
 "read_attributes":"(**)",
 "write_attributes":"(**)"
 }
 ]
 }
 ]
 }

1. DATA_API_VERSION を OCAPI Data API バージョンに置き換え、タイプ Data とコンテキスト Global (organization-wide) の下に次の JSON を追加してから、[保存]をクリックします。
   追加すると、設定は次のように表示されます：
   

{
 "_v":"DATA_API_VERSION",
 "clients":[
 {
 "client_id":"CLIENT_ID",
 "resources":[
 {
 "resource_id":"/product_search",
 "methods":["post"],
 "read_attributes":"(**)",
 "write_attributes":"(**)"
 },
 {
 "resource_id":"/sites",
 "methods":["get"],
 "read_attributes":"(**)",
 },
 {
 "resource_id":"/products/*/variations",
 "methods":["get"],
 "read_attributes":"(**)",
 }
 ]
 }
 ]
}

Klaviyo 側の設定

1. Klaviyo で、[外部連携] > [外部連携を追加] を選択します。
2. Salesforce Commerce Cloud を検索してカードをクリックし、次に インストール をクリックします。
3. ランディングページで [Salesforce Commerce Cloud へ接続] をクリックします。
4. 次のページで、以下の情報を入力します。
   • ストア URL
     ウェブサイトのドメイン（例：example.com または dev03-na01-example.demandware.net）。
   • 認証トークン
     ベアラートークンの要求に使用する、この外部連携用の認証トークンを作成します。認証トークンは、クライアント ID とパスワードをコロン（:）で結合し（例：xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:password）、それをBase-64 エンコードすることで生成されます。
   • データ API バージョン
     SFCC 側のセットアップ手順でアクセスを追加したデータ API のバージョン（例：v19_10）。
   • Shop API Version
     SFCC 側のセットアップ手順でアクセスを追加した Shop API のバージョン（例：v19_10）。
   • カタログ ID
     Klaviyo と同期する SFCC カタログの ID（例：storefront-catalog-en）。Salesforce Business Manager の [マーチャント ツール] > [商品とカタログ] > [カタログ] でカタログ ID を確認できます。
     

5. これらの認証情報を入力したら、[サイト一覧を取得] リンクをクリックして、SFCC インスタンス上のサイト一覧を取得します。
6. サイトが取得されたら、このアカウントと外部連携するサイトを選択し、[セットアップを完了] をクリックします。これで、注文、カタログ、顧客データの同期が開始されるはずです。

SFCC 外部連携をテストする

カートリッジの設定をテストするには、サイトにアクセスし、以下の手順に従ってください：

1. アドレスバーに URL パラメーター utm_email をメールアドレスとして追加して、Cookie を設定します。例：https://www.example.com/?utm_email=your@email.com。
2. カタログを検索します。
3. カテゴリページを表示します。
4. 商品ページを表示します。
5. 商品をカートに入れます。
6. テスト注文を行います。
7. Klaviyo で 分析 > メトリックに移動し、Salesforce Commerce Cloud からのメトリックを探します。

Klaviyo Email フィールドセレクターをテスト

特定のメール フィールドが適切にターゲット設定され、ユーザーを Klaviyo に正しく識別していることをテストするには：

1. シークレットモードのブラウザウィンドウを開きます。
2. Developer Console で次のコマンドを入力し、Enter キーを押します。
   klaviyo.isIdentified();
   これにより、次の出力が表示されます。
   Promise {<fulfilled>: false}
3. 対象のフィールドにメールアドレスを入力し、Tab キーをクリックして、ページ上の他の要素にフォーカスを移動します。
4. Developer Console に戻り、klaviyo.isIdentified(); をもう一度入力します。これにより、次の出力が生成されます。
   Promise {<fulfilled>: true}
5. Klaviyo が Identify コールを確実に受信していることを確認するには、Klaviyo で [分析] > [メトリック] に移動し、Active on Site イベントのアクティビティフィードを見つけてください。入力したメールアドレスが一覧表示されるはずです。

チェックアウトのメールフィールド セレクターをテスト

Started Checkout イベントがチェックアウトのメール収集フィールドによって正常にトリガーされていることをテストするには：

1. カートに 1 つ以上の商品を追加し、その後チェックアウトを開始します。
2. チェックアウト内で、対象のフィールドにメールアドレスを入力し、Tab キーをクリックしてフォーカスをページ上の別の要素に変更します。
3. Klaviyo が Identify 呼び出しを確実に受信していることを再確認するには、Klaviyo で 分析 > メトリック に移動し、Started Checkout イベントのアクティビティフィードを見つけて、最新のイベントがトラッキングされていることを確認します。

達成できること

Salesforce Commerce Cloud を K laviyo と外部連携し、外部連携のテストも完了しました。

その他のリソース