カスタムイベントタグを利用して、カート内の商品情報をKARTEに送信します。
カートの情報が取得できることで、カート落ち施策などの強力な施策が実行できるようになります。

カートタグを実行するタイミング

• KARTEでは、カートの状態が変更される全てタイミングでカートタグを実行することを推奨しています
  • 例
    • 商品詳細ページでカートに商品が追加されたとき
    • カートページでカート内商品が削除されたとき
    • 購入完了ページでカートが空になったとき
• 実装が難しい場合、カートページでカート内商品の情報を取得するためのタグを実行するだけでも、ユーザーがカートに入れた商品の傾向を元にセグメントを切ることができます
  • ただし、「カート落ち」の施策などをすることはできません

カートタグを含むカスタムイベントタグは、必ず計測タグの後に実行されるように設置する必要があります

cartイベントのリファレンス

カートタグでは、cartというイベント名で下記のフィールドを連携することを推奨しています。

上記の例以外にも、フィールドは自由に追加することが可能です。

カート落ちの計測について

「カート落ち」を計測する場合、cartイベントでstatusというフィールドを正しく連携する必要があります。

• status: trueでタグ実行するときは？
  • カート内商品を追加/削除したタイミングで、カート内商品が1点以上残っている場合
• status: falseでタグ実行する場合
  • カート内商品を削除したタイミングで、カート内商品が1点も残っていない場合
  • 購入完了時（カートが空になるため）

statusフィールドを計測することで、下記のような状態をKARTE上で識別できます。

• cartイベントのstatusがtrueであれば、「カートに商品が入っているが購入完了していないユーザー」
• cartイベントのstatusがfalseであれば、「カートに商品が入っていないユーザー」

- カート内の商品を追加/削除した場合も、差分ではなくカート内商品全てのデータを連携してください
- 商品一覧や商品詳細ページからカートに遷移することなく商品を投入できる場合も、カート内の最新のデータが送信されるようにしてください

カートタグの実装サンプル

タグv2は、現在一部のプロジェクトに限定して先行提供しています。
特別な案内があった場合を除いて、タグv2ではなく従来の計測タグやカスタムイベントタグ（v1）を導入してください。
https://support.karte.io/post/7E5yZwHWroaDTDmd4f0SDx

カート内商品を追加/削除したタイミングで、カート内商品が1点以上残っている場合に実行するタグ

下記はサンプルコードになります。このままコピー＆ペーストをしても動作しません。
発生したカート情報にあわせて、値を出力する必要があることに注意してください。

• タグv1の場合

<script type="text/javascript">
try {
    // 実際のアイテム数に応じて、全てのアイテム情報を出力してください
    var items = [
        {
            item_id: '001',
            name: 'XXXXXXXXXXXXX',
            price: 3132,
            quantity: 1,
            item_url: 'XXXXXXXXXX',
            item_image_url: 'XXXXXXXXX'
        },
        {
            item_id: '002',
            name: 'XXXXXXXXXXXXX',
            price: 6372,
            quantity: 1,
            item_url: 'XXXXXXXXXX',
            item_image_url: 'XXXXXXXXX'
        }
    ];

    // itemsの各フィールド毎の値の配列を生成（カート落ち施策等で利用）
    var item_ids = items.map( function(item) { return item.item_id; });
    var item_names = items.map( function(item) { return item.name; });
    var item_prices = items.map( function(item) { return item.price; });
    var item_quantities = items.map( function(item) { return item.quantity; });
    var item_urls= items.map( function(item) { return item.item_url; });
    var item_image_urls = items.map( function(item) { return item.item_image_url; });

    tracker.track("cart", {
        price: 9504,
        quantity: 2,
        status: true,
        items: items,
        item_ids: item_ids,
        item_names: item_names,
        item_prices: item_prices,
        item_quantities: item_quantities,
        item_urls: item_urls,
        item_image_urls: item_image_urls
    });
} catch(e) {
    if('tracker' in window){
        tracker.track('_error',{
            error_message: e.message
        });
    }
}
</script>

• タグv2の場合

<script type="text/javascript">
try {
    // 実際のアイテム数に応じて、全てのアイテム情報を出力してください
    var items = [
        {
            item_id: '001',
            name: 'XXXXXXXXXXXXX',
            price: 3132,
            quantity: 1,
            item_url: 'XXXXXXXXXX',
            item_image_url: 'XXXXXXXXX'
        },
        {
            item_id: '002',
            name: 'XXXXXXXXXXXXX',
            price: 6372,
            quantity: 1,
            item_url: 'XXXXXXXXXX',
            item_image_url: 'XXXXXXXXX'
        }
    ];

    // itemsの各フィールド毎の値の配列を生成（カート落ち施策等で利用）
    var item_ids = items.map( function(item) { return item.item_id; });
    var item_names = items.map( function(item) { return item.name; });
    var item_prices = items.map( function(item) { return item.price; });
    var item_quantities = items.map( function(item) { return item.quantity; });
    var item_urls= items.map( function(item) { return item.item_url; });
    var item_image_urls = items.map( function(item) { return item.item_image_url; });

    krt("send", "cart", {
        price: 9504,
        quantity: 2,
        status: true,
        items: items,
        item_ids: item_ids,
        item_names: item_names,
        item_prices: item_prices,
        item_quantities: item_quantities,
        item_urls: item_urls,
        item_image_urls: item_image_urls
    });
} catch(e) {
    if('krt' in window){
        krt('send', '_error',{
            error_message: e.message
        });
    }
}
</script>

カートが空になったタイミングで実行するタグ

購入（buy）イベント発生時には、KARTEの機能で空のカートイベントを自動発生させることができます。

• 購入イベント発生時に空のカートイベントを自動発生させる | ドキュメント / インサイト / イベント | KARTEサポートサイト

カートページ等でカート商品が空になったタイミングでは、次のタグが実行されるように設置してください。

• タグv1の場合

<script type="text/javascript">
try{
    tracker.track('cart', {
        status: false,
        price: 0,
        quantity: 0,
        items: [''],
        item_ids: [''],
        item_names: [''],
        item_prices: [''],
        item_quantities: [''],
        item_urls: [''],
        item_image_urls: ['']
    });
} catch(e) {
    if('tracker' in window){
        tracker.track('_error',{
            error_message: e.message
        });
    }
}
</script>

• タグv2の場合

<script type="text/javascript">
try{
    krt('send', 'cart', {
        status: false,
        price: 0,
        quantity: 0,
        items: [''],
        item_ids: [''],
        item_names: [''],
        item_prices: [''],
        item_quantities: [''],
        item_urls: [''],
        item_image_urls: ['']
    });
} catch(e) {
    if('krt' in window){
        krt('send', '_error',{
            error_message: e.message
        });
    }
}
</script>