EC-CUBEの環境にKARTEを導入するための手順をまとめたページです。

各タグの設置箇所などは以下の各ページをご参照ください。

※ 以下の説明は、EC-CUBE 2系での利用を想定しています。
※ EC-CUBE 3系を利用している場合でもKARTEの導入は可能ですが、設定方法が異なる部分があります。
※ EC-CUBE 3系、4系を利用している場合は、EC-CUBEプラグインを利用した導入でも導入いただけます。

EC-CUBE環境に計測タグを設置する

EC-CUBEへのKAETEタグの設置方法は以下の3通りがあります。

EC-CUBEへ直接設置
Googleタグマネージャを用いた設置
EC-CUBEプラグインをインストールして設置 ※3系、4系のみ

本ページでは「1. EC-CUBEへ直接設置」に関してのみ解説します。
「2. Googleタグマネージャを用いた設置」に関してはタグマネージャ経由の設置を参照してください。
「3. EC-CUBEプラグインをインストールして設置」に関しては EC-CUBEプラグインを利用した導入を参照してください。※3系、4系のみ

計測タグの設置

EC-CUBE管理画面にログインし、計測タグを設置してください。

PC
「デザイン管理 → PC → ヘッダー/フッター設定」に進んでください。
「ヘッダー編集」内最上部にKARTE管理画面から取得できる計測タグを設定してください。
スマートフォン
「デザイン管理 → スマートフォン → ヘッダー/フッター設定」に進んでください。
「ヘッダー編集」内最上部にKARTE管理画面から取得できる計測タグを設定してください。

ユーザータグ、 buyイベントタグについてもヘッダーに設置してください。
計測タグはアカウント開設フローの設定環境で「EC-CUBE」を選択後の「計測タグの設置」の項目のステップ1に出てきているタグをコピー＆ペーストして利用ください。

EC-CUBEのカスタマイズ

EC-CUBE標準の状態では、「buyイベントタグ」に必要な情報を取得することができません。

「buyイベントタグ」に必要な情報を取得したい場合はLC_Page_Shopping_Complete.phpを編集してください。
※ GoogleAnalytics等でコンバージョン情報を取得するために、既にカスタマイズ済みの場合はこの項目でのカスタマイズは必要ありません

以下のように注文者・注文情報を取得できるようにカスタマイズすると、注文完了画面にて「$arrOrder」で注文情報を、「$arrOrderDetail」で注文明細情報を参照することができます。

    public function action()
     {
         $this->arrInfo = SC_Helper_DB_Ex::sfGetBasisData();
          $objPurchase = new SC_Helper_Purchase();

          // コンバージョントラッキング用のコード
          if ($_SESSION['order_id']) {
              // 注文者データの取得
              $arrOrder = $objPurchase->getOrder($_SESSION['order_id']);
              // 注文商品データの取得
              $arrOrderDetail = $objPurchase->getOrderDetail($_SESSION['order_id']);  

              $this->arrGAOrder = $arrOrder; // Smartyに渡す
              $this->arrGAOrderDetail = $arrOrderDetail; // Smartyに渡す
              unset($_SESSION['order_id']);
          }
     }

EC-CUBE環境にユーザータグを設置する

本項目は「EC-CUBEのカスタマイズ」を完了していることを前提とします。

ユーザータグの設置

計測タグの下に下記のタグを挿入してください。

※ ユーザータグは計測タグが読み込まれていないと動作しません。
必ず計測タグの下に挿入してください。

なお、LC_Page_Shopping_Complete.phpを独自にカスタマイズしている場合は、下記のタグを挿入しても正常にデータが取得できない場合があります。

<!--{if $smarty.session.customer.customer_id}-->
<script type="text/javascript">
(function(){
    if('krt' in window){
    if(location.protocol === 'https:'){
        try{
        var __karte_user = {};
        __karte_user.user_id =  '<!--{$smarty.session.customer.customer_id}-->';
        __karte_user.name =  '<!--{$smarty.session.customer.name01}--> <!--{$smarty.session.customer.name02}-->';
        __karte_user.name01 =  '<!--{$smarty.session.customer.name01}-->';
        __karte_user.name02 =  '<!--{$smarty.session.customer.name02}-->';
        __karte_user.kana01 =  '<!--{$smarty.session.customer.kana01}-->';
        __karte_user.kana02 =  '<!--{$smarty.session.customer.kana02}-->';
        __karte_user.zip01 =  '<!--{$smarty.session.customer.zip01}-->';
        __karte_user.zip02 =  '<!--{$smarty.session.customer.zip02}-->';
        __karte_user.pref =  '<!--{$smarty.session.customer.pref}-->';
        __karte_user.addr01 =  '<!--{$smarty.session.customer.addr01}-->';
        __karte_user.addr02 =  '<!--{$smarty.session.customer.addr02}-->';
        __karte_user.email =  '<!--{$smarty.session.customer.email}-->';
        __karte_user.email_mobile =  '<!--{$smarty.session.customer.email_mobile}-->';
        __karte_user.tel01 =  '<!--{$smarty.session.customer.tel01}-->';
        __karte_user.tel02 =  '<!--{$smarty.session.customer.tel02}-->';
        __karte_user.tel03 =  '<!--{$smarty.session.customer.tel03}-->';
        __karte_user.fax01 =  '<!--{$smarty.session.customer.fax01}-->';
        __karte_user.fax02 =  '<!--{$smarty.session.customer.fax02}-->';
        __karte_user.fax03 =  '<!--{$smarty.session.customer.fax03}-->';
        __karte_user.gender =  '<!--{$smarty.session.customer.sex}-->';
        __karte_user.job =  '<!--{$smarty.session.customer.job}-->';
        var birth_date = '<!--{$smarty.session.customer.birth}-->';
        if(birth_date!==''){
            __karte_user.birth_date =  new Date(birth_date);
        }
        var first_buy_date = '<!--{$smarty.session.customer.first_buy_date}-->';
        if(first_buy_date!==''){
            __karte_user.first_buy_date =  new Date(first_buy_date);
        }
        var last_buy_date = '<!--{$smarty.session.customer.last_buy_date}-->'
        if(last_buy_date!==''){
            __karte_user.last_buy_date =  new Date(last_buy_date);
        }
        var buy_times = '<!--{$smarty.session.customer.buy_times}-->';
        if(buy_times!=='' && !isNaN(buy_times)){
            __karte_user.buy_times =  Number(buy_times);
        }
        var buy_total =  '<!--{$smarty.session.customer.buy_total}-->';
        if(buy_total!=='' && !isNaN(buy_total)){
            __karte_user.buy_total = Number(buy_total);
        }
        var point = '<!--{$smarty.session.customer.point}-->';
        if(point!=='' && !isNaN(point)){
            __karte_user.point =  Number(point);
        }
        __karte_user.note =  '<!--{$smarty.session.customer.note}-->';
        __karte_user.status =  '<!--{$smarty.session.customer.status}-->';
        var create_date = '<!--{$smarty.session.customer.create_date}-->';
        if(create_date!==''){
            __karte_user.create_date =  new Date(create_date);
        }
        var update_date = '<!--{$smarty.session.customer.update_date}-->';
        if(update_date!==''){
            __karte_user.update_date =  new Date(update_date);
        }
        __karte_user.del_flg =  '<!--{$smarty.session.customer.del_flg}-->';
        __karte_user.cell01 =  '<!--{$smarty.session.customer.cell01}-->';
        __karte_user.cell02 =  '<!--{$smarty.session.customer.cell02}-->';
        __karte_user.cell03 =  '<!--{$smarty.session.customer.cell03}-->';
        __karte_user.mobile_phone_id =  '<!--{$smarty.session.customer.mobile_phone_id}-->';
        var subscription =  '<!--{$smarty.session.customer.mailmaga_flg}-->';
        if(subscription==='true' || subscription==='false'){
            __karte_user.subscription = subscription==='true';
        }
        }catch(e){
        krt('send', '_error',{message: e.message});
        }finally{
        if(Object.keys(__karte_user).length > 0){
            krt('send', 'identify', __karte_user);
        }
        }
    }
    }
})()
</script>
<!--{/if}-->

EC-CUBE環境にbuyイベントタグを設置する

本項目は「EC-CUBEのカスタマイズ」を完了していることを前提とします。

buyイベントタグの導入

計測タグの下に下記のタグを挿入してください。

※ ユーザータグと同様に、buyイベントタグも計測タグが読み込まれていないと動作しません。
※ ユーザータグとの順番はどちらでも構いません。

<!--{if $smarty.server.PHP_SELF == "`$smarty.const.ROOT_URLPATH`shopping/complete.php"}-->
<script type="text/javascript">
(function(){
    if('krt' in window){
    try{
        var __karte_items = [];
    <!--{section name=cnt loop=$arrGAOrderDetail}-->
        try{
        var __karte_item = {};
        __karte_item.item_id = '<!--{$arrGAOrderDetail[cnt].product_id}-->';
        __karte_item.name = '<!--{$arrGAOrderDetail[cnt].product_name}-->';
        __karte_item.category = ['<!--{$arrGAOrderDetail[cnt].classcategory_name1}-->'];
        var price = '<!--{$arrGAOrderDetail[cnt].price}-->';
        if(price!=='' && !isNaN(price)){
            __karte_item.price = Number(price);
        }
        var quantity = '<!--{$arrGAOrderDetail[cnt].quantity}-->';
        if(quantity!=='' && !isNaN(quantity)){
            __karte_item.quantity = Number(quantity);
        }
        }catch(e){
        tracker.track('_error',{message:e.message});
        }finally{
        if(Object.keys(__karte_item).length > 0){
            __karte_items.push(__karte_item);
        }
        }
    <!--{/section}-->
        var __karte_buy = {};
        __karte_buy.transaction_id = '<!--{$arrGAOrder.order_id}-->';
        var revenue = '<!--{$arrGAOrder.total}-->';
        if(revenue!=='' && !isNaN(revenue)){
        __karte_buy.revenue = Number(revenue);
        }
        __karte_buy.shipping = 0;
        __karte_buy.tax = 0;
        __karte_buy.items = __karte_items;
    }catch(e){
        krt('send', '_error',{ message: e.message });
    }finally{
        if(Object.keys(__karte_buy).length > 0){
            krt('send', 'buy', __karte_buy);
        };
    }
    }
})()
</script>
<!--{/if}-->

EC-CUBE環境にカートタグを設置する

本項目は「EC-CUBEのカスタマイズ」を完了していることを前提とします。

カートタグの導入

EC-CUBEの、「デザイン管理 > PC/モバイル > ページ詳細設定 > 現在のカゴの中 > ページ詳細」から、以下のスクリプトを追加してください。

<!--{if count($cartItems) > 0}-->
<script type="text/javascript">
var __karte__cart = {};
var __karte__items = [];
__karte__cart.status = true;
<!--{foreach from=$cartKeys item=key}-->
__karte__cart.price = <!--{$tpl_total_inctax[$key]}-->+0;
<!--{foreach from=$cartItems[$key] item=item}-->
__karte__items.push({
    category1: "<!--{$item.productsClass.classcategory_name1}-->",
    category2: "<!--{$item.productsClass.classcategory_name2}-->",
    name:      "<!--{$item.productsClass.name|h}-->",
    price:      <!--{$item.price_inctax|h}-->+0,
    quantity:   <!--{$item.quantity|h}-->+0,
    subtotal:   <!--{$item.total_inctax|h}-->+0
});
<!--{/foreach}-->
<!--{/foreach}-->
__karte__cart.items = __karte__items;
krt("send", "cart", __karte__cart);
</script>
<!--{/if}-->

null

ご利用開始の流れ

タグ設置・イベント計測

KARTE基礎知識・仕様

インサイト

アクション

接客タイプ

トーク

データハブ

レポート

ライトサポート

ストア

お知らせ

設定メニュー

KARTE Signals

KARTE Message β

メッセージ

ライブ

ブロックス

KARTE for App

アクション

スターターマニュアル

レポート

インサイト

データハブ

KARTE Talk

ユーザーダッシュボード

KARTE for App

KARTE Academy

KARTE CX Clip

KARTE Forum

KARTE Developer Portal

EC-CUBEへの導入

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

目次