カラーミーショップで構築されたサイトにKARTEのタグを設置する際の参考手順を紹介します。

注意点

カラーミーショップの契約プランやカスタマイズ状況に応じて、タグが意図通りに動作しない可能性があります
KARTEに連携したいデータに過不足がある場合は、このページで紹介している設定を参考に個別に設定してください
カラーミーショップ側のプロダクトアップデートにより、連携機能において下記のような制約がございます。（2022年8月10日時点）
- カラーミーショップの「新しいショッピングカート」をご利用の際には、カート関連の「KARTE連携」機能がご利用いただけません。

カラーミーショップへのタグ設置方法

カラーミーショップにタグ設置するための一般的な方法を紹介します。

決済に関わるページ以外のページ

カラーミーショップ管理画面の[ショップ作成 > デザイン > デザイン > テンプレート編集]からタグ設置します。

この画面から、各ページのHTMLを直接編集することができます。HTML内にタグを設置することで、対応するページが開かれたときにタグを発火させることができます。

決済に関わるページ

決済に関わるページは、基本的にHTMLの編集ができません。ただし、購入完了ページのみ、「コンバージョンタグ」からタグ設置が可能です。

カラーミーショップ管理画面の[ツール > コンバージョンタグ > コンバージョンタグ]からタグ設置します

計測タグの設置例

計測タグの概要については計測タグの設置をご参照ください。

手順

KARTEの管理画面から計測タグをコピーします
下記の2箇所に、コピーした計測タグを設置し、保存します
- 「決済に関わるページ以外のページ」
  - [テンプレート編集 > 共通ページ]のHTMLのなるべく上の方
- 「購入完了ページ」
  - [ツール > コンバージョンタグ > コンバージョンタグ > headタグ内設置]
タグを保存します
各ページで閲覧（view）イベントが発生することを確認します
- ただし、決済に関わるページのうち購入完了ページ以外ではイベント発生しません

通常は、決済に関わるページのうち購入完了ページ以外については、計測タグを設置することはできません。つまり、これらのページでは閲覧をトラッキングしたりアクションを配信したりすることはできません。

ユーザータグの設置例

ログイン状態でのページ閲覧時に、ユーザータグを発火させます。ユーザータグの概要については下記をご覧ください。

ユーザータグの設置 | KARTEサポートサイト

手順

下記のユーザータグ実装例を参考に、タグを作成します
- カラーミーショップ側の独自タグから情報を取得しています
- 連携したいフィールドに過不足がある場合は、タグをカスタマイズしてください

<script type="text/javascript">
(function(){
    try{
        var is_login = "<{$members_login_flg}>";
        if (is_login !== "1") return;

        var user_id = "<{$members_id}>";
        if (!user_id || user_id.indexOf('<{') === 0) return;

        tracker.user({
            user_id: user_id
        });
    } catch(e) {
        if('tracker' in window) {
            tracker.track('_error', {
                message: e.message
            });
        }
    }
})();
</script>

作成したタグを下記に設置し、保存します
- [テンプレート編集 > 共通ページ]のHTMLのなるべく下の方
アカウントページ閲覧時にユーザー情報（identify）イベントが発生することを確認します

コンバージョンタグの設置例

購入完了ページの閲覧時に、コンバージョンタグを発火させます。
コンバージョンタグの概要についてはコンバージョンタグの設置をご参照ください。

手順

下記のコンバージョンタグ実装例を参考に、タグを作成します
- カラーミーショップ側のコンバージョンに関わる独自タグから情報を取得しています
- 連携したいフィールドに過不足がある場合は、タグをカスタマイズしてください

<script type="text/javascript">
(function () {
    try {
        var transaction_id = '<{$order_no}>';
        if (transaction_id.indexOf('<{') === 0) transaction_id = null;

        var revenue = '<{$order_price}>';
        if (revenue.indexOf('<{') === 0) revenue = null;

        tracker.buy({
            transaction_id: transaction_id,
            revenue: revenue ? Number(revenue) : null,
        });
    } catch (e) {
        if ('tracker' in window) {
            tracker.track('_error', {
                message: e.message
            });
        }
    }
})();
</script>

作成したタグを下記に設置し、保存します
- [ツール > コンバージョンタグ > コンバージョンタグ > bodyタグ内設置]
購入状況ページで購入（buy）イベントが発生することを確認します

カラーミーショップへの導入

注意点