カラーミーショップへの導入手順

カラーミーショップ(COLOR ME)を使用しているECサイトへ、Flipdeskの基本タグやコンバージョンタグ、その他オプションタグを設置する際は、カラーミーの管理画面から設定します。

※カラーミーショップのアプリストアからFlipdeskを導入された場合、タグは自動インストールされるのでこちらの作業は必要ありません。

カラーミーショップ　Flipdeskタグ埋め込み方法

基本タグの設置：Flipdeskを利用するうえで必須な作業です。この作業を行うことにより、シナリオが配信できます。
コンバージョンタグの設置：任意の作業です。設置すると、コンバージョン履歴を利用し、ターゲティンを行うことが可能です。
カート情報取得タグの設置：Flipdeskと直契約の場合、カラーミーショップではカート情報取得タグの設置は出来ません。

1. 基本タグの設置

Flipdesk　➡各種タグ　➡基本タグ　を開き、基本タグをコピーする
COLOR ME　➡ショップ作成　➡デザイン　➡デザイン　➡テンプレート編集　➡
共通　➡HTML・CSS編集　➡ HTML編集

➡HTML編集のソースコード末尾に基本タグを設置し、【保存】を押す

イメージ）

2. コンバージョンタグの設置　（※購入完了CV）

COLOR ME　➡ツール　➡コンバージョンタグ　➡コンバージョンタグ
➡bodyタグ内設置内に以下のscriptを貼り付ける

<script>
var colorme_obj_timer = setInterval(insertFDTag, 300);
function insertFDTag() {
  if (window.parent.Colorme && window.parent.Colorme.sale) {
    // assign
    window.Colorme = window.parent.Colorme;
    // insert tag
    const element = document.createElement('script');
    element.src =
     'https://api.flipdesk.jp/chat_clients/flipdesk_chat.js?api_token=★★★&enc=UNICODE';    element.defer = true;
    const objBody = document.getElementsByTagName('body').item(0);
    objBody.appendChild(element);
    // clear
    clearInterval(colorme_obj_timer);
    return;
  } else {
    // continue
  }
}
</script>

Flipdesk　➡各種タグ　➡基本タグ　を開き、基本タグのapiトークンのみをコピーし、先ほど貼り付けたscript内の「★★★」部分に貼り付ける
例）

<script>
var colorme_obj_timer = setInterval(insertFDTag, 300);
function insertFDTag() {
  if (window.parent.Colorme && window.parent.Colorme.sale) {
    // assign
    window.Colorme = window.parent.Colorme;
    // insert tag
    const element = document.createElement('script');
    element.src =
      'https://api.flipdesk.jp/chat_clients/flipdesk_chat.js?api_token=3c8101acb51e8f51363933e63bfb9106ec64d6e4&enc=UNICODE';
    element.defer = true;
    const objBody = document.getElementsByTagName('body').item(0);
    objBody.appendChild(element);
    // clear
    clearInterval(colorme_obj_timer);
    return;
  } else {
    // continue
  }
}
</script>

【保存】を押す