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

ecforceへの導入

計測タグの設置

ユーザータグのタグ設置

カートタグのタグ設置

購入（buy）タグのタグ設置

上記以外のイベント内容の連携について

間違い、誤植等があれば教えて下さい😃

目次