ecforceの環境でKARTEをご利用いただくためのヘルプページです。
計測タグの設置
- ショップ管理 > 各種設定 > ショップのタグ管理 > タグ管理 > 新規作成
- タグ名:KARTE計測タグ
- タグ表示箇所:header要素の最初に追加
- 説明:KARTE計測タグ
- タグコード:KARTE管理画面から取得したコードを貼り付ける
- ショップ管理 > 各種設定 > ショップタグ設定
- すべての画面、カート、ショップ購入画面で計測タグを選択し保存
- ショップ管理 > 各種設定 > ショップページタグ設定
- カート、ショップ購入(すべての種類)で計測タグを選択し保存
ユーザータグのタグ設置
- ショップ管理 > 各種設定 > ショップのタグ管理 > タグ管理 > 新規作成
- タグ名:KARTEユーザータグ
- タグ表示箇所:header要素の最初に追加
- 説明:KARTEユーザータグ(会員情報を取得)
- タグコード:サンプルコードを貼り付ける
- ショップ管理 > 各種設定 > ショップタグ設定
- すべての画面でユーザータグを選択し保存
- ショップ管理 > 各種設定 > ショップページタグ設定
- カート、ショップ購入(すべての種類)でユーザータグを選択し保存
- サンプルコード:
<script> try { krt('send', 'identify', { user_id: "{{ order.customer.number }}", email: "{{ order.email }}", subscription: {{ order.customer.optin }}, name: "{{ order.billing_address.full_name }}", first_name: "{{ order.billing_address.name01 }}", last_name: "{{ order.billing_address.name02 }}" }); } catch(e) { if('krt' in window) { krt('send', '_error', { message: e.message }); } } </script>
カートタグのタグ設置
ショップ管理 > 各種設定 > ショップのタグ管理 > タグ管理 > 新規作成
- タグ名:KARTEカートタグ
- タグ表示箇所:header要素の最初に追加
- 説明:KARTEカートタグ(カート商品情報を取得)
- タグコード:サンプルコードを貼り付ける
ショップ管理 > 各種設定 > ショップページタグ設定
- カートでカートタグを選択し保存
サンプルコード:
{% if order.order_items.size > 0 %}{% assign quantity = 0 %}<script type="text/javascript"> try{ var items = []; {% for order_item in order.order_items %} {% if order_item.available_thumbnail %} {% assign src = order_item.available_thumbnail %} {% else %} {% assign src = 'missing' | image_url %} {% endif %} {% assign quantity = quantity | plus: order_item.quantity %} var item = { item_id: "{{ order_item.product.master.sku }}", name: "{{ order_item.product.name }}", price: {{ order_item.price }}, quantity: {{ order_item.quantity }}, item_url: "/shop/products/{{ order_item.product.master.sku }}", item_image_url: "{{ src }}" } items.push(item) {% endfor %} // 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: {{ order.subtotal }}, quantity: {{quantity}}, 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> {% else %} <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> {% endif %}
購入(buy)タグのタグ設置
- ショップ管理 > 各種設定 > ショップのタグ管理 > タグ管理 > 新規作成
- タグ名:KARTE購入タグ
- タグ表示箇所:header要素の最初に追加
- 説明:KARTE購入タグ(購入情報を取得)、カートタグ(カートが空の状態を送信)
- タグコード:サンプルコードを貼り付ける
- ショップ管理 > 各種設定 > ショップページタグ設定
- ショップ購入(完了)で購入タグを選択し保存
- サンプルコード:
<script type="text/javascript"> var items = []; {% assign quantity = 0 %} try { {% for order_item in order.order_items %} {% if order_item.available_thumbnail %} {% assign src = order_item.available_thumbnail %} {% else %} {% assign src = 'missing' | image_url %} {% endif %} {% assign quantity = quantity | plus: order_item.quantity %} var item = { item_id: "{{ order_item.product.master.sku }}", name: "{{ order_item.product.name }}", price: {{ order_item.price }}, quantity: {{ order_item.quantity }}, item_url: "https://homei-nail.jp/shop/products/{{ order_item.product.master.sku }}", item_image_url: "{{ src }}" } items.push(item) {% endfor %} krt('send', 'buy', { transaction_id: "{{ order.number }}", revenue: {{ order.subtotal }}, items: items, tax: {{ order.tax }}, shipping: {{ order.deliv_fee }}, }); } catch(e) { if ('krt' in window) { krt('send', '_error', { error_message: e.message }); } } try{ krt('send', 'identify', { user_id: "{{ current_customer.number }}", email: "{{ current_customer.email }}", subscription: "{{ current_customer.optin }}", name: "{{ current_customer.billing_address.full_name }}", first_name: "{{ current_customer.billing_address.name01 }}", last_name: "{{ current_customer.billing_address.name02 }}" }); } catch(e) { if('krt' in window){ krt('send', '_error',{ message: e.message }); } } 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>
以上で設定は完了です。タグが動作し、KARTEの管理画面にユーザーが表示されているかどうか、上記のイベントが飛んでいるかどうかをご確認ください
上記以外のイベント内容の連携について
デフォルト以外の情報を連携したい場合は、ecforce社またはPLAID担当までお問い合わせ下さい。