【2022年3月10日以前にタグ設置を実施されたお客様へ】
新たに、商品情報・会員フラグ・ログイン状態をカスタム属性に連携したことで、より効果的な接客を実施することが出来るようになりました。
※カスタム属性を利用した接客を実施するには、新しいタグへの置き換えおよびカスタム属性の登録を行っていただく必要がございます。対応手順の詳細は、以下の【導入手順の概要】、【計測タグの設置】、【カートタグの設置】、【コンバージョンタグの設置】、【カスタム属性の登録】をご参照下さい。
【注意事項】
- 以下は、ecコンシェルの設置方法の一例となっておりますので、貴社テストサイト等での動作をご確認いただき、本番サイトに導入するようお願いいたします。
- 計測タグ、カートタグ、コンバージョンタグを同一のドメインに設置する場合のみ動作いたします。
【導入手順の概要】
以下の導入手順は、大きく分けて2つの手順に分かれています。
1. タグの設置
2. カスタム属性の登録
後述の各ecコンシェルタグでは、EC-CUBE4系の商品情報・会員フラグ・ログイン状態をカスタム属性に連携しており、より効果的な接客を実施いただけます。
<効果的な接客事例>
・ユーザーが興味のある閲覧商品と同じカテゴリの商品を訴求して、購入を促進する
・ユーザーの好みにあった前回購入商品と同じジャンルの限定商品を訴求して、購入を促進する
・非会員に対して会員限定キャンペーンを訴求し、新規会員獲得を促進する
カスタム属性をご利用いただくには、ecコンシェル管理画面にてカスタム属性の登録を行う必要がありますので、タグ設置と併せてご登録をお願いいたします。
【導入手順】
以下の手順を1から順に実施をお願いいたします。
・タグを設置したページでは、カスタム属性を使った接客が可能となります。詳細は後述の【カスタム属性の登録】をご参照ください。
【計測タグの設置】
- 管理画面左メニューの コンテンツ管理 > ブロック管理 を押下します。
- 「新規作成」ボタンを押下します。
- ブロック設定ページにて、以下の様に入力します。
3-1. ブロック名:ecコンシェル計測タグ を入力します。
3-2. ファイル名:ecconcier_base を入力します。
3-3. コード:以下の手順3-3-1 ~ 3-3-3をご参照ください。
3-3-1. 以下の計測タグをコピーして、テキストエディタ等に貼り付けます。
(このテキストをクリックすると以下のタグをコピーできます)<!-- ecコンシェル計測タグ -->
<script>
(function(w,d,url,a,s,e){
w[a]= (w[a]||[]);
s = d.getElementsByTagName("script")[0];e = d.createElement("script");e.src=url;e.async=1;s.parentNode.insertBefore(e,s);
})(window,document,'//ec-concier.com/サイト識別子/analytics.js','ara');
ara.push(['init', 'サイト識別子']);
document.addEventListener("DOMContentLoaded", function() {
try{
ara.push(['custom_set', 'goods_product_name', ecc_goods_name]);
ara.push(['custom_set', 'goods_product_tag', ecc_goods_tag]);
ara.push(['custom_set', 'goods_system_code_min', ecc_goods_id_min]);
ara.push(['custom_set', 'goods_system_code_max', ecc_goods_id_max]);
ara.push(['custom_set', 'goods_category_name', ecc_goods_group]);
ara.push(['custom_set', 'goods_consumer_price_min', ecc_goods_teika_min]);
ara.push(['custom_set', 'goods_consumer_price_max', ecc_goods_teika_max]);
ara.push(['custom_set', 'goods_price_including_tax_min', ecc_goods_price_min]);
ara.push(['custom_set', 'goods_price_including_tax_max', ecc_goods_price_max]);
}catch (e) {}
});
var member_status = '{{ app.user.id }}';
function getMemberStatus(){
if(/.+/.test(member_status)){
return "1";
}else{
return "0";
};
};
var member_flag = getMemberStatus();
var login_status = '{{ app.user.id }}';
function getLoginStatus(){
if(/.+/.test(login_status)){
return "1";
}else{
return "0";
};
};
var login_flag = getLoginStatus();
try{
if(member_flag == "1"){
ara.push(['custom_set', 'member_flg', member_flag]);
};
ara.push(['custom_set', 'login_flg', login_flag]);
}catch (e) {}
</script>
<!-- ecコンシェル計測タグ -->
3-3-2. お客様のサイト識別子を確認、コピーし、手順3-3-1の計測タグ内の「サイト識別子」(前後の「'」(シングルクォーテーション)は含めず)と置き換えて下さい。(計2箇所)
お客様のサイト識別子の確認方法はこちらのページを参照して下さい。
3-3-3. 手順3-3-2で編集した計測タグを、「コード」の入力欄に貼り付けます。
3-4. 「登録」ボタンを押下して、登録を完了します。 - 管理画面左メニューのコンテンツ管理 > レイアウト管理を押下します。
- トップページ用レイアウトを押下します。
- 手順1~3にて作成した「ecコンシェル計測タグ」ブロックを、「<head></head>タグ内」にドラッグします。
- 画面右下の「登録」ボタンを押下して、登録を完了します。
- 管理画面左メニューのコンテンツ管理 > レイアウト管理を押下します。
- 下層ページ用レイアウトを押下します。
- 手順1~3にて作成した「ecコンシェル計測タグ」ブロックを、「<head></head>タグ内」にドラッグします。
- 画面右下の「登録」ボタンを押下して、登録を完了します。
【閲覧商品情報連携用タグの設置】
※当タグを設置することで、商品詳細ページにてカスタム属性を利用した接客が可能になります。
- 管理画面左メニューのコンテンツ管理 > ページ管理を押下します。
- 「商品詳細ページ」を押下します。
- 以下のタグをコピーします。
(このテキストをクリックすると以下のタグをコピーできます)<!-- 閲覧商品情報連携 -->
<script>
var ecc_goods_name = '{{ Product.name }}';
var ecc_goods_tag = [];
{% for Tag in Product.Tags %}
ecc_goods_tag.push('{{ Tag }}');
{% endfor %}
ecc_goods_tag = ecc_goods_tag.filter(function(value, index, array) { return value.length >= 0 }).join(',');
var ecc_goods_id_min = '{{ Product.code_min }}';
var ecc_goods_id_max = '{{ Product.code_max }}';
var ecc_goods_group = [];
{% for ProductCategory in Product.ProductCategories %}
ecc_goods_group.push('{{ ProductCategory.Category.name }}');
{% endfor %}
ecc_goods_group = ecc_goods_group.filter(function(value, index, array) { return value.length >= 0 }).join(',');
var ecc_goods_teika_min = '{{ Product.getPrice01IncTaxMin }}';
if(/.+/.test(ecc_goods_teika_min) == false){
ecc_goods_teika_min = 0;
};
var ecc_goods_teika_max = '{{ Product.getPrice01IncTaxMax }}';
if(/.+/.test(ecc_goods_teika_max) == false){
ecc_goods_teika_max = 0;
};
var ecc_goods_price_min = {{ Product.getPrice02IncTaxMin }};
var ecc_goods_price_max = {{ Product.getPrice02IncTaxMax }};
</script>
<!-- 閲覧商品情報連携 --> - コードのHTMLの最下部の「 {% endblock %} 」の直前に、手順3のタグを貼り付けます。
- 画面右下の「登録」ボタンを押下して、登録を完了します。
【カートタグの設置】
- 管理画面左メニューのコンテンツ管理 > ページ管理を押下します。
- 「現在のカゴの中」を押下します。
- 以下のカートタグをコピーして、テキストエディタ等に貼り付けます。
(このテキストをクリックすると以下のタグをコピーできます)<!-- ecコンシェルカートタグ -->
<script>
(function(w,d,url,a,s,e){
w[a]= (w[a]=w[a]||[]);
s = d.getElementsByTagName("script")[0];e = d.createElement("script");e.src=url;e.async=1;e.src=url;s.parentNode.insertBefore(e,s);
})(window,document,'//ec-concier.com/サイト識別子/analytics.js','ara');
ara.push(['init', 'サイト識別子']);
ara.push(['cart',{cartPrice:'{{ Cart.totalPrice|price }}'}]);
var cart_array = {
NAME: 0, TANKA: 1, SYOKEI: 2, AMOUNT: 3
};
var ITEMS = new Array(Object.keys(cart_array).length);
for (var i = 0; i < ITEMS.length; i++) {
ITEMS[i] = [];
};
{% for CartItem in Cart.CartItems %}
{% set ProductClass = CartItem.ProductClass %}
{% set Product = ProductClass.Product %}
ITEMS[cart_array.NAME].push('{{ Product.name }}');
ITEMS[cart_array.TANKA].push('{{ CartItem.price|price }}');
ITEMS[cart_array.SYOKEI].push('{{ CartItem.total_price|price }}');
ITEMS[cart_array.AMOUNT].push('{{ CartItem.quantity|number_format }}');
{% endfor %}
for (var i = 0; i < ITEMS[cart_array.TANKA].length; i++) {
ITEMS[cart_array.TANKA][i] = ITEMS[cart_array.TANKA][i].replace(/,|¥/g, "");
ITEMS[cart_array.SYOKEI][i] = ITEMS[cart_array.SYOKEI][i].replace(/,|¥/g, "");
};
var cart_total_amount = 0;
for (var i = 0; i < ITEMS[cart_array.AMOUNT].length; i++) {
cart_total_amount += Number(ITEMS[cart_array.AMOUNT][i]);
};
for (var i = 0; i < ITEMS.length; i++) {
ITEMS[i] = ITEMS[i].filter(function(value, index, array) { return value.length >= 0 }).join(',');
};
ara.push(['custom_set', 'cart_product_name', ITEMS[cart_array.NAME]]);
ara.push(['custom_set', 'cart_price_including_tax', ITEMS[cart_array.TANKA]]);
ara.push(['custom_set', 'cart_product_price_with_options_including_tax', ITEMS[cart_array.SYOKEI]]);
ara.push(['custom_set', 'cart_quantity', ITEMS[cart_array.AMOUNT]]);
ara.push(['custom_set', 'cart_total_quantity', cart_total_amount]);
</script>
<!-- ecコンシェルカートタグ --> - お客様のサイト識別子を確認、コピーし、手順3のカートタグ内の「サイト識別子」(前後の「'」(シングルクォーテーション)は含めず)と置き換えて下さい。(計2箇所)
お客様のサイト識別子の確認方法はこちらのページを参照して下さい。 - コードのHTML内にて、「 {{ Cart.totalPrice|price }} 」を検索します。
- 以下のキャプチャの位置に、手順4で編集したカートタグを貼り付けます。
- 画面右下の「登録」ボタンを押下して、登録を完了します。
【コンバージョンタグの設置】
- 管理画面左メニューのコンテンツ管理 > ページ管理を押下します。
- 「商品購入/ご注文完了」を押下します。
- 以下のコンバージョンタグをコピーして、テキストエディタ等に貼り付けます。
(このテキストをクリックすると以下のタグをコピーできます)<!-- ecコンシェルコンバージョンタグ -->
<script>
(function(w,d,url,a,s,e){
w[a]= (w[a]=w[a]||[]);
s = d.getElementsByTagName("script")[0];e = d.createElement("script");e.src=url;e.async=1;e.src=url;s.parentNode.insertBefore(e,s);
})(window,document,'//ec-concier.com/サイト識別子/analytics.js','ara');
ara.push(['init', 'サイト識別子']);
ara.push(['conversion_type', {conversion_type:'goal',sumValue:{{ Order.total }}}]);
var purchase_array = {
NAME: 0, CODE: 1, TANKA: 2, SYOKEI: 3, AMOUNT: 4
};
var ITEMS = new Array(Object.keys(purchase_array).length);
for (var i = 0; i < ITEMS.length; i++) {
ITEMS[i] = [];
};
{% for OrderItem in Order.MergedProductOrderItems %}
{% set ProductClass = OrderItem.ProductClass %}
{% set Product = ProductClass.Product %}
ITEMS[purchase_array.NAME].push('{{ Product.name }}');
ITEMS[purchase_array.CODE].push('{{ OrderItem.product_code }}');
ITEMS[purchase_array.TANKA].push('{{ OrderItem.price|price }}');
ITEMS[purchase_array.SYOKEI].push('{{ OrderItem.total_price|price }}');
ITEMS[purchase_array.AMOUNT].push('{{ OrderItem.quantity|number_format }}');
{% endfor %}
for (var i = 0; i < ITEMS[purchase_array.TANKA].length; i++) {
ITEMS[purchase_array.TANKA][i] = ITEMS[purchase_array.TANKA][i].replace(/,|¥/g, "");
ITEMS[purchase_array.SYOKEI][i] = ITEMS[purchase_array.SYOKEI][i].replace(/,|¥/g, "");
};
var purchase_total_amount = 0;
for (var i = 0; i < ITEMS[purchase_array.AMOUNT].length; i++) {
purchase_total_amount += Number(ITEMS[purchase_array.AMOUNT][i]);
};
var purchase_coupon_name = [];
{% for item in Order.tax_free_discount_items %}
purchase_coupon_name.push('{{ item.product_name }}');
{% endfor %}
purchase_coupon_name = purchase_coupon_name.filter(function(value, index, array) { return value.length >= 0 }).join(',');
for (var i = 0; i < ITEMS.length; i++) {
ITEMS[i] = ITEMS[i].filter(function(value, index, array) { return value.length >= 0 }).join(',');
};
ara.push(['custom_set', 'purchase_product_name', ITEMS[purchase_array.NAME]]);
ara.push(['custom_set', 'purchase_system_code', ITEMS[purchase_array.CODE]]);
ara.push(['custom_set', 'purchase_price_excluding_tax', ITEMS[purchase_array.TANKA]]);
ara.push(['custom_set', 'purchase_price_including_tax', ITEMS[purchase_array.SYOKEI]]);
ara.push(['custom_set', 'purchase_quantity', ITEMS[purchase_array.AMOUNT]]);
ara.push(['custom_set', 'purchase_totalquantity', purchase_total_amount]);
ara.push(['custom_set', 'purchase_used_coupon_name', purchase_coupon_name]);
</script>
<!-- ecコンシェルコンバージョンタグ --> - お客様のサイト識別子を確認、コピーし、手順3のコンバージョンタグ内の「サイト識別子」(前後の「'」(シングルクォーテーション)は含めず)と置き換えて下さい。(計2箇所)
お客様のサイト識別子の確認方法はこちらのページを参照して下さい。 - コードのHTMLの最下部の「 {% endblock %} 」の直前に、手順4で編集したコンバージョンタグを貼り付けます。
- 画面右下の「登録」ボタンを押下して、登録を完了します。
【カスタム属性の登録】
カスタム属性を活用した効果的な接客を実施するために、以下の1,2,3,4のカスタム属性を登録します。
登録手順は、後述の【カスタム属性の登録手順】をご参照下さい。
・カスタム属性の詳細はこちらをご参照下さい。
・カスタム属性の条件設定方法についてはこちらをご参照ください。
・後述の2,3,4のカスタム属性一覧表内の「値の一例」には、以下のキャプチャの商品を閲覧・カート投入・購入した場合に連携される値の例を記載しております。導入サイトにてどんな値が連携されるかご確認の上、カスタム属性をご利用下さい。
・商品サンプル1:Tシャツ
・商品サンプル2:腕時計
1. 全ページでの連携項目の登録
・「会員フラグ」は一度ログインすれば、ログアウト後や再訪問時も"1"が連携されたまま(会員として判断し続ける)となります。
カスタム属性名 | カスタム属性のキー | データ種別 | 値の一例 |
---|---|---|---|
会員フラグ (コピーする) |
member_flg (コピーする) |
文字列 |
会員(ログイン経験有り)なら"1" |
ログイン状態 (コピーする) |
login_flg (コピーする) |
文字列 | ログイン状態なら"1" ログアウト状態なら"0" |
※1:非会員にのみ接客したい場合は、カスタム属性の条件を「会員フラグ が 未設定」に設定することで可能です。
2. 商品詳細ページでの連携項目の登録
・最後に閲覧した商品の情報が連携され、他ページへの遷移後や再訪問時にも接客条件に利用が可能です。
カスタム属性名 | カスタム属性のキー | データ種別 | 連携される商品情報 | 値の一例 |
---|---|---|---|---|
閲覧_商品名 (コピーする) |
goods_product_name (コピーする) |
文字列 | 商品名 | Tシャツ |
閲覧_商品タグ (コピーする) |
goods_product_tag (コピーする) |
文字列 | タグ | スタッフおすすめ,1万円以下 (※2) |
閲覧_システム商品コード_バリエーション中最低 (コピーする) |
goods_system_code_min (コピーする) |
文字列 | 商品コード(バリエーション中最も低い値) | Tshirts_01 (※3) |
閲覧_システム商品コード_バリエーション中最高 (コピーする) |
goods_system_code_max (コピーする) |
文字列 | 商品コード(バリエーション中最も高い値) | Tshirts_05 (※3) |
閲覧_商品グループ (コピーする) |
goods_category_name (コピーする) |
文字列 | カテゴリ | トップス,半袖 (※2) |
閲覧_商品価格(定価)_バリエーション中最低 (コピーする) |
goods_consumer_price_min (コピーする) |
数値 | 通常価格(バリエーション中最も低い値・税込) | 2200 |
閲覧_商品価格(定価)_バリエーション中最高 (コピーする) |
goods_consumer_price_max (コピーする) |
数値 | 通常価格(バリエーション中最も高い値・税込) | 11000 |
閲覧_商品価格(税込)_バリエーション中最低 (コピーする) |
goods_price_including_tax_min (コピーする) |
数値 | 販売価格(バリエーション中最も低い値・税込) | 1100 |
閲覧_商品価格(税込)_バリエーション中最高 (コピーする) |
goods_price_including_tax_max (コピーする) |
数値 | 販売価格(バリエーション中最も高い値・税込) | 9900 |
※2:1商品に対してタグ・カテゴリが複数登録されている場合、「 , 」区切りで1つの文字列として連携します。
※3:閲覧_システム商品コード_バリエーション中最低/最高に連携される値は、以下の手順にてご確認ください。
確認手順は、こちらをクリックしてご確認下さい。
- GoogleChromeにて導入サイトの商品詳細ページにアクセスします。
・商品詳細ページのURL例:https://[サイトドメイン]/products/detail/4 - ページの任意の箇所を右クリック > メニュー内の「検証」を押下して、開発ツールを開きます。
- Elementsタブを選択してElementsパネルを表示します。
- Elementsパネルを左クリックしてから検索ウィンドウを表示(Windows: [Ctrl]+[F]、Mac: [command ⌘]+[F])し、文字列「ecc_goods_id_min」と「ecc_goods_id_max」をそれぞれ検索します。
- 検索結果が2件ありますので、以下のキャプチャの記述の方を表示し、連携される値を確認します。
・以下のキャプチャの場合、閲覧_システム商品コード_バリエーション中最低(ecc_goods_id_min)には「Tshirts_01」が、閲覧_システム商品コード_バリエーション中最高(ecc_goods_id_max)には「Tshirts_05」が連携されます。
3. カートページでの連携項目の登録
・最後に確認したカート内の商品情報が連携され、他ページへの遷移後や再訪問時にも接客条件に利用が可能です。
カスタム属性名 | カスタム属性のキー | データ種別 | 連携される商品情報 | 値の一例 |
---|---|---|---|---|
カート_商品名 (コピーする) |
cart_product_name (コピーする) |
文字列 | 商品名 | Tシャツ,腕時計 (※3) |
カート_商品価格(オプション価格除く・税込) (コピーする) |
cart_price_including_tax (コピーする) |
文字列 | 販売価格(単価・税込) | 1100,5500 (※3) |
カート_商品価格(オプション価格含む・税込) (コピーする) |
cart_product_price_with_options_including_tax (コピーする) |
文字列 | 販売価格(小計・税込) |
1100,11000 |
カート_商品購入数量 (コピーする) |
cart_quantity (コピーする) |
文字列 | 各商品の投入数量 | 1,2 (※3) |
カート_商品購入数量合計 (コピーする) |
cart_total_quantity (コピーする) |
数値 | 全商品の合計投入数量 | 3 |
※3:カートに商品が複数投入されている場合、各商品の情報をカンマ区切りで取得し、1つの文字列として連携されます。
4. 購入完了ページでの連携項目の登録
・前回購入(最後に購入)した商品の情報が連携され、他ページへの遷移後や再訪問時にも接客条件に利用が可能です。
カスタム属性名 | カスタム属性のキー | データ種別 | 連携される商品情報 | 値の一例 |
---|---|---|---|---|
購入_商品名 (コピーする) |
purchase_product_name (コピーする) |
文字列 | 商品名 | Tシャツ,腕時計 (※4) |
購入_システム商品コード (コピーする) |
purchase_system_code (コピーする) |
文字列 | 商品コード | Tshirs_01,Watch_01 (※4) |
購入_商品価格(税抜) (コピーする) |
purchase_price_excluding_tax (コピーする) |
文字列 | 販売価格(単価・税抜) |
1000,5000 |
購入_商品価格(税込) (コピーする) |
purchase_price_including_tax (コピーする) |
文字列 | 販売価格(小計・税込) | 1100,11000 (※4) |
購入_商品購入数量 (コピーする) |
purchase_quantity (コピーする) |
文字列 | 各商品の購入数量 | 1,2 (※4) |
購入_商品購入数量合計 (コピーする) |
purchase_totalquantity (コピーする) |
数値 | 全商品の合計購入数量 | 3 |
購入_利用クーポン名 (コピーする) |
purchase_used_coupon_name (コピーする) |
文字列 | 購入時に使用したクーポン名 | クーポン001 |
※4:商品を複数購入した場合、各商品の情報をカンマ区切りで取得し、1つの文字列として連携されます。
【カスタム属性の登録手順】
上記の1,2,3,4のカスタム属性の登録をします。
- ecコンシェル管理画面左メニューの 属性データ > カスタム属性 を押下します。
- カスタム属性の設定画面 > カスタム属性の追加にて、以下のように入力します。
※上記1,2,3,4の全てのカスタム属性について、以下の手順の実施をお願いいたします。
2-1. カスタム属性名:上記表の「カスタム属性名」からコピーし、入力します。
2-2. キー:上記表の「カスタム属性のキー」からコピーし、入力します。
2-3. データ種別:上記表の「データ種別」と同じものを選択します。
2-4. 「完了する」ボタンを押下して、登録を完了します。
【カスタム属性登録後のイメージ】
商品詳細ページのカスタム属性の登録が完了した際の状態は以下となります。
【キャンペーンの登録】
カスタム属性を利用した接客条件は、キャンペーン編集画面 > だれに > カスタム属性・インポート属性によるセグメント にて設定します。
・キャンペーン設定「だれに」の登録方法はこちらをご参照ください。
・カスタム属性の条件設定方法はこちら(2−3.キャンペーン登録)をご参照下さい。
以下カスタム属性を利用した効果的な接客事例となりますので、是非ご活用下さい。
例1:閲覧商品の関連商品を訴求
閲覧した商品と同じ商品グループの商品や関連商品を訴求することで、購入を促進します。
配信条件の設定例は以下となります。
例2:リピートユーザーに同じカテゴリーの商品を訴求
前回購入商品と同じカテゴリーの限定商品を訴求し、購入を促進します。
配信条件の設定例は以下となります。
例3:非会員ユーザーの会員登録を促進
非会員(ログイン経験なしのユーザー=非会員として判断)に会員限定キャンペーンを訴求し、会員登録を促進します。
配信条件の設定例は以下となります。