カスタムイベントタグを利用して、カート内の商品情報をKARTEに送信します。
カートの情報が取得できることで、カート落ち施策などの強力な施策が実行できるようになります。
カートタグを実行するタイミング
- KARTEでは、カートの状態が変更される全てタイミングでカートタグを実行することを推奨しています
- 例
- 商品詳細ページでカートに商品が追加されたとき
- カートページでカート内商品が削除されたとき
- 購入完了ページでカートが空になったとき
- 例
- なお、カート追加時に必ずカートページに遷移するサイトの場合は、商品追加時のカートタグ実行についてはカートページで行うのが一般的です
- 「カートの状態が変更される全てタイミング」でのタグ実行が難しい場合でも、一部のページでカート内商品の情報を取得するためのタグを実行することで、ユーザーがカートに入れた商品の傾向を元にセグメントを切ることができます
- ただし、その場合は基本的に「カート落ち」の施策を厳密に行うことはできません
カートタグを含むカスタムイベントタグは、必ず計測タグの後に実行されるように設置する必要があります
cartイベントのリファレンス
カートタグでは、cart
というイベント名で下記のフィールドを連携することを推奨しています。
フィールド名 | 概要 | 例 | 型 |
---|---|---|---|
price | カート内合計金額。税額、送料、手数料抜きを推奨しています。 | 10000 |
数値 |
quantity | カート内合計商品点数 | 3 |
数値 |
status | カート内に商品があるかどうか。購入やカート内商品削除によってカートが空になったタイミングで毎回falseで連携してください | true |
真偽値 |
items | itemsというパラメータに個別商品データをセットしてください。 | - | Objectの配列 |
items.item_id | アイテムのユニークIDです。SKUなどを入れてください。 | 0000 |
文字列 |
items.name | 商品名 | KARTE Tシャツ |
文字列 |
items.price | 商品価格 | 5000 |
数値 |
items.quantity | 購入商品数 | 2 |
数値 |
items.item_url | 商品詳細ページURL | http://example.com/item/0000 |
文字列 |
items.item_image_url | 商品画像URL | ||
items.l_category_name | 親カテゴリ名 | "catA" | 文字列 |
items.s_category_name | 子カテゴリ名 | "catB" | 文字列 |
items.l_category_cd | 親カテゴリコード | "12" | 文字列 |
items.s_category_cd | 子カテゴリコード | "1234" | 文字列 |
items.brand_name | ブランド名 | "KARTE" | 文字列 |
items.brand_cd | ブランドコード | "karte" | 文字列 |
items.sku_id | SKUのID | 12345 | 文字列 |
items.sku_url | SKUのURL | "https://www.example.com/item/12345/?sku=1" | 文字列 |
items.sku_image_url | SKUの画像URL | "https://example.com/image/12345.jpg" | 文字列 |
http://example.com/images/item_0000.jpg |
文字列 | ||
added_item_id | カートに追加した商品のID | "0001" | 文字列 |
added_item_sku_id | カートに追加したSKUのID | "0001-001" | 文字列 |
deleted_item_id | カートから削除した商品のID | "0002" | 文字列 |
deleted_item_sku_id | カートから削除したSKUのID | "0002-002" | 文字列 |
item_ids | item.item_idの値の配列(主にかご落ち施策でのユーザー情報変数で利用) | - | 文字列の配列 |
item_names | item.nameの値の配列(主にかご落ち施策でのユーザー情報変数で利用) | - | 文字列の配列 |
item_prices | item.priceの値の配列(主にかご落ち施策でのユーザー情報変数で利用) | - | 数値の配列 |
item_quantities | item.quantityの値の配列(主にかご落ち施策でのユーザー情報変数で利用) | - | 数値の配列 |
item_urls | item.item_urlの値の配列(主にかご落ち施策でのユーザー情報変数で利用) | - | 文字列の配列 |
item_image_urls | item.item_image_urlの値の配列(主にかご落ち施策でのユーザー情報変数で利用) | - | 文字列の配列 |
上記の例以外にも、フィールドは自由に追加することが可能です。
カート落ちの計測について
「カート落ち」を計測する場合、cart
イベントでstatus
というフィールドを正しく連携する必要があります。
status: true
でタグ実行するときは?- カート内商品を追加/削除したタイミングで、カート内商品が1点以上残っている場合
status: false
でタグ実行する場合- カート内商品を削除したタイミングで、カート内商品が1点も残っていない場合
- 購入完了時(カートが空になるため)
status
フィールドを計測することで、下記のような状態をKARTE上で識別できます。
cart
イベントのstatus
がtrue
であれば、「カートに商品が入っているが購入完了していないユーザー」cart
イベントのstatus
がfalse
であれば、「カートに商品が入っていないユーザー」
- カート内の商品を追加/削除した場合も、差分ではなくカート内商品全てのデータを連携してください
- 商品一覧や商品詳細ページからカートに遷移することなく商品を投入できる場合も、カート内の最新のデータが送信されるようにしてください
カートタグの実装サンプル
カート内商品を追加/削除したタイミングで、カート内商品が1点以上残っている場合に実行するタグ
下記はサンプルコードになります。このままコピー&ペーストをしても動作しません。
発生したカート情報にあわせて、値を出力する必要があることに注意してください。
<script type="text/javascript">
// 実際のアイテム数に応じて、全てのアイテム情報を出力してください
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
});
</script>
カートが空になったタイミングで実行するタグ
購入(buy)イベント発生時には、KARTEの機能で空のカートイベントを自動発生させることができます。
カートページ等でカート商品が空になったタイミングでは、次のタグが実行されるように設置してください。
<script type="text/javascript">
krt('send', 'cart', {
status: false,
price: 0,
quantity: 0,
items: [''],
item_ids: [''],
item_names: [''],
item_prices: [''],
item_quantities: [''],
item_urls: [''],
item_image_urls: ['']
});
</script>