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担当までお問い合わせ下さい。