送料無料まであとXXX円表示
このドキュメントでは、KARTEで「あとXXX円で送料無料」シナリオを実装する詳細な手順を説明します。
前提条件
カートイベントが正しく送信されている
Step 1: カートイベントの確認
まずは、この接客の配信に必要な「カートイベント」が、意図した形で発火していることを確認します。
1-1. イベント一覧を開く
KARTE管理画面にログイン
左メニュー > 「イベント」をクリック
イベント一覧から「cart」を検索
1-2. カートイベントのパラメータ確認
以下のパラメータが正しく送信されていることを確認してください：
| パラメータ名 | 型 | 必須 | 説明 | 例 |
|---|---|---|---|---|
| `price` | number | ◎ | カート内合計金額 | `4500` |
確認ポイント:
イベント一覧にすぐ反映されるか
priceの値が正しいか
Step 2: 接客アクション作成
次に、接客の設定を行なっていきます。
2-1. 新規接客作成
KARTE管理画面 > 接客サービス > 「新規作成」
テンプレート選択: 「ユーザーに見せる」 > 「カード」 > 「Card07」
2-2. ユーザー情報変数の設定
必須変数:
| 変数名 | 種類 | 設定値 | 説明 |
|---|---|---|---|
| `#{cartPrice}` | ユーザー情報変数 | `price` | カート内合計金額 |
設定手順（ユーザー情報変数）:
共通設定 > ユーザー情報変数 > 追加
変数名: cartPrice
値: price
型: number
2-2. HTML編集
<!-- 見出し -->
<h1 class="card-heading text-center">
あと{{diffAmount}}円で送料無料！
</h1>※HTML18行目
Step 3: JavaScript設定
アクション内に「あとXXX円の購入で送料無料」の「あとXXX円」を計算するために必要なJavaScriptを設定します。
3-1. スクリプト貼り付け
「JavaScript」タブを開く
エディタに貼り付け
/* 送料無料になる金額 */
var freeMin = 5000;
/* カート内の合計金額（ユーザー情報変数で取得） */
var cartPrice = #{cartPrice} || 0;
/* 送料無料まで必要な金額（スクリプトで計算） */
var diffAmount = freeMin - cartPrice;
// カート金額が送料無料に達していたら接客を表示しない
if (cartPrice >= freeMin) return;
// カート金額が0円の場合も非表示
if (cartPrice <= 0) return;
// 送料無料まで必要な金額をカンマ区切りで設定
widget.setVal('diffAmount', formatMoney(diffAmount));
// ウィジェットを表示
widget.show();
// 数値をカンマ区切りの金額形式に変換
function formatMoney(x) {
x = String(parseInt(x));
var y = (y = x.length) > 3 ? y % 3 : 0;
return (y ? x.substr(0, y) + ',' : '') +
x.substr(y).replace(/(\d{3})(?=\d)/g, '$1,');
}
3-2. パラメータのカスタマイズ
// 送料無料ラインを3,000円に変更する場合
var freeMin = 3000;Step 4: 配信設定
接客を意図したタイミングで表示させるための配信設定を行います。
4-1. 対象ユーザー設定
「配信設定」タブを開く
対象ユーザー: 「テストユーザー」
4-2. 配信イベント設定
トリガーイベント: カートイベント
配信イベント > その他のイベントで設定
イベント名: cart
パラメータ: date（送信日時）
条件: 存在する
4-3. 配信頻度設定
推奨設定:
同一セッション内: 1回のみ
異なるセッション: 毎回表示
設定理由:
同じセッション内で何度も表示するとユーザーに煩わしい
セッションをまたぐ場合はカート内容が変わっている可能性が高い
4-4. 配信ページ設定
推奨設定:
全ページで配信: ON
除外ページ: カート・購入完了ページ
除外理由:
カートページ: すでにカート金額が表示されている
購入完了ページ: 購入後は不要
配信ページ > 除外設定
URL: /cart/*
URL: /order/complete/*
Step 5: テスト配信
意図したタイミングで接客が表示されるかをチェックしてみましょう。
5-1. テストユーザーに配信
対象ユーザーにテストユーザーを設定
「テスト配信開始」
5-2. 動作確認手順
ステップ1: カート追加
サイトで商品をカートに追加（例: 2,000円の商品）
カートイベントが発火することを確認（Chrome DevTools）
ステップ2: 接客表示確認
ポップアップが表示されるか
「あと3,000円で送料無料」と表示されるか
ステップ3: 追加購入
さらに商品を追加（例: 3,500円の商品、合計5,500円）
接客が非表示になるか（送料無料達成のため）
5-3. デバッグ方法
Chrome DevToolsで確認:
// コンソールで実行
krt('send', 'cart', { price: 4500 });KARTEイベントビューアで確認:
管理画面 > イベント > リアルタイム
ユーザーID検索 > 自分のID
cartイベントが表示されるか確認
よくあるエラー:
| エラー | 原因 | 対処法 |
|---|---|---|
| 接客が表示されない | セグメント条件が厳しい | セグメントのカート金額範囲を広げる |
| 金額が0円と表示 | `#{cartPrice}`が取得できていない | ユーザー情報変数の設定を確認 |
| 計算がおかしい | `#{freeMin}`が正しくない | 静的変数の値を確認 |
トラブルシューティング
問題1: 接客が表示されない
確認項目:
セグメント条件を満たしているか
カートイベントが正しく送信されているか
配信設定が有効になっているか
除外ページ設定で弾かれていないか
解決方法:
// ブラウザコンソールで確認
console.log('Cart Price:', #{cartPrice});
console.log('Free Min:', #{freeMin});
console.log('Diff Amount:', #{freeMin} - #{cartPrice});問題2: 金額が正しく表示されない
原因:
formatMoney()関数のエラーdiffAmountの計算ミス#{freeMin}または#{cartPrice}が正しく取得できていない
解決方法:
// デバッグコードを追加
var freeMin = #{freeMin};
var cartPrice = #{cartPrice} || 0;
var diffAmount = freeMin - cartPrice;
console.log('Free Min:', freeMin);
console.log('Cart Price:', cartPrice);
console.log('Diff Amount:', diffAmount);
console.log('Formatted:', formatMoney(diffAmount));問題3: カート更新時に表示が変わらない
原因:
配信イベントが正しく設定されていない
配信頻度が「1回のみ」のためリロードされない
ブラウザキャッシュの影響
解決方法:
配信イベントが「cart」に設定されているか確認
テスト時は配信頻度を「毎回」に設定
ブラウザキャッシュをクリアしてテスト