こちらの記事ではfutureshop コマースクリエイターにて会員情報連携の設定方法について解説します。
会員情報連携の概要については以下の記事をご参照ください。
【WhatYa】会員情報連携のトラブルシューティング
前提条件
futureshopのレイアウトパーツの表示条件にて会員情報連携を設定しています。
留意事項
futureshopの表示条件の機能を活用してログインユーザー未ログインユーザーのWhatYaタグの出し分けを行っています。以下の点をご理解の上ご利用をご検討いただけますと幸いです。
ショップテーマのレイアウト部分を触ることになりますので、作業にご不安の企業様はベンダーさまにご依頼ください。
一括での導入ができない（手作業で必要ページにタグを入れる）部分になりますので、
・トップページ
・商品一覧（商品グループ・バンドル商品・クーポン対象商品）
・商品検索結果一覧
・商品詳細
・ショッピングカートページ
・会員登録完了
・メールマガジン申込完了
・注文完了ページ
上記リストでチェックを行いながら実施をお願いします。
フリーパーツの設定
futureshop管理画面のメニュー：コマースクリエイター＞パーツ＞パーツを追加するをクリックします。
会員情報連携 の利用に必要なタグ…注文完了ページ以外
注文完了後のCV金額送信に必要なタグ…注文完了ページのみ
フリーパーツを選択
必要事項を記載して保存します。
ログインユーザー用のタグと、未ログインユーザー用のタグ2種類作成する必要があります。
以下は例となりますので、ご参考の上、フリーパーツを作成お願いいたします。
ログインユーザー用タグ
パーツ名…【ログイン】WhatYa会員連携あり
置き換え文字…{% parts[whatya_member] %}
内容…
<div class="member-info" data-member-id="{@ member.id @}" data-member-lastname="{@ member.last_name @}" data-member-firstname="{@ member.first_name @}" data-member-nickname="{@ member.nickname @}"></div>
未ログインユーザー用タグ
パーツ名…【未ログイン】WhatYa会員連携なし
置き換え文字…{% parts[whatya_not_member] %}
内容…
<div class="member-info"></div>
WhatYaを埋め込みたいページに、レイアウトパーツを設定します。
代表的な以下のページにこれから示す設定手順を行ってください。
トップページ
商品一覧（商品グループ・バンドル商品・クーポン対象商品）
商品検索結果一覧
商品詳細
ショッピングカートページ
会員登録完了
メールマガジン申込完了
注文完了ページ ※コンバージョンタグ設置の詳細は下部に別途記載しています。
WhatYaのタグを埋め込みたい、利用中のレイアウトの鉛筆マークをクリック
「レイアウトパーツを追加する」をクリック
レイアウトパーツ（会員連携あり）を設定します。
パーツ名…whatya_会員連携あり
HTML要素…div
id…空欄
class…fs-clientInfo
※詳しくはこちら（class名について）の記事および、こちら（レイアウトパーツの表示条件について）の記事をご確認ください。
続いて、レイアウトパーツ（会員連携なし）を設定します。
パーツ名…whatya_会員連携なし
HTML要素…なし
id…空欄
class…空欄
続いて、レイアウトパーツを開き、その内に1️⃣で作成したフリーパーツを設定します。
【ログイン】WhatYa会員連携ありのフリーパーツをドラッグ・アンド・ドロップでレイアウトパーツ内に設置して保存します。
WhatYa会員連携なしのレイアウトパーツ内にも同様に、【未ログイン】WhatYa会員連携なしのフリーパーツを設置します。
最後に、表示条件を設定するを設定します。
WhatYa会員連携ありの場合、以下の設定でOKを押します。
WhatYa会員連携なしの場合、以下の設定でOKを押します。
保存ボタンを押します。
同様の設定を表示するページ全てに設置をお願いいたします。
測定タグ＞測定タグを追加するをクリックします。
出力設定
<body>タグ内（</body>タグの内）に出力するを選択
出力内容
以下埋め込みタグのサンプルです。
※以下の埋め込みタグはあくまでもサンプルとなりますので、変数やScriptのサポートは出来ませんのでご了承下さい。
※全ページに表示したい場合は、共通出力へ、特定のページに表示したい場合は、指定の項目へ以下のスクリプトを入力してください。
※https://whatya.solairo-api.com/XXXX/chat.jsのXXXX部分は御社の環境へ書き換えをお願いいたします。
<script>
document.addEventListener("DOMContentLoaded", function () {
let scriptLoaded = false;
let retryCount = 0; // 再試行の回数
const maxRetries = 10; // 最大再試行回数
const retryInterval = 500; // 再試行間隔（ミリ秒）
// スクリプトを読み込む関数
function loadChatScript(attributes = {}) {
if (scriptLoaded) {
console.log("スクリプトはすでに読み込まれています");
return;
}
const script = document.createElement("script");
script.src = "https://whatya.solairo-api.com/XXXX/chat.js";
// 属性を動的に追加
for (const [key, value] of Object.entries(attributes)) {
script.setAttribute(key, value);
}
script.onload = function () {
console.log("スクリプトが正常に読み込まれました");
};
script.onerror = function () {
console.error("スクリプトの読み込みに失敗しました: " + script.src);
};
document.body.appendChild(script);
scriptLoaded = true;
console.log("スクリプトタグが追加されました:", script.outerHTML);
}
// 会員情報をチェックし、スクリプトをロードする
function checkAndLoadScript() {
const memberInfo = document.querySelector(".member-info");
if (!memberInfo) {
console.error(".member-info が見つかりません");
return;
}
const memberId = memberInfo.getAttribute("data-member-id");
const lastName = memberInfo.getAttribute("data-member-lastname");
const firstName = memberInfo.getAttribute("data-member-firstname");
const nickname = memberInfo.getAttribute("data-member-nickname");
// テンプレート文字列が残っている場合は未置き換えと判定
if (
[memberId, lastName, firstName, nickname].some(value =>
value && value.includes("{@")
)
) {
console.log("置き換えが未完了です。再試行を行います...");
if (retryCount < maxRetries) {
retryCount++;
setTimeout(checkAndLoadScript, retryInterval);
} else {
console.warn("置き換えが完了しないため、未ログイン状態として扱います");
loadChatScript(); // 未ログイン時のスクリプトを読み込み
}
return;
}
// `guest`, `null`（文字列）、または `null` の場合は未ログインと判定
if (memberId === "guest" || memberId === "null" || memberId === null) {
console.log("未ログインユーザーと判定。デフォルトスクリプトを読み込みます");
loadChatScript();
return;
}
// ログイン済みの場合のスクリプトを読み込み
console.log("ログイン済みと判定。スクリプトを読み込みます");
loadChatScript({
"data-cs-id": memberId,
"data-cs-secret": `${lastName} ${firstName}`,
"data-cs-user_name": `${lastName} ${firstName}`,
"data-cs-nickname": nickname,
});
}
// MutationObserverで置き換えを監視
const observer = new MutationObserver(() => {
console.log("DOM変更を検出しました");
checkAndLoadScript();
observer.disconnect(); // 1回のみ実行
});
observer.observe(document.body, {
childList: true,
subtree: true,
});
// 初期チェック
checkAndLoadScript();
});
</script>
※"{@ member.last_name @}" "{@ member.first_name @}"が変更されるとチャット時の過去のログが参照できなくなります。
プロモーション管理＞測定タグ一覧＞測定タグを追加する
測定タグ注文完了ページに、以下の設定を行ってください。
出力設定
<body>タグ内（<body>タグの後）に出力するを選択
出力内容
以下埋め込みタグのサンプルです。
※以下の埋め込みタグはあくまでもサンプルとなりますので、変数やScriptのサポートは出来ませんのでご了承下さい。
設定は以上となります。