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