| 注意 |
|---|
推奨されない連携方法 futureshopの機能を活用して、会員・非会員様へタグを出し分ける方法を推奨しておりますので、そちらの記事をご確認ください。 |
| 目次 | ||||
|---|---|---|---|---|
|
こちらの記事ではfutureshop コマースクリエイターにて会員情報連携の設定方法について解説します。
会員情報連携の概要については以下の記事をご参照ください。
【WhatYa】会員情報連携のトラブルシューティング
前提条件と留意事項
...
...
前提条件
...
futureshopの測定タグで会員情報連携を設定する場合
...
留意事項
会員IDの置換文字のみ利用可能なため、以下の点をご理解の上ご利用をご検討いただけますと幸いです。
data-cs-secretにユーザーさまごとにハッシュ化された値などを入れるなどは弊社でのサポートはできかねますので、ベンダーさまにご依頼ください。
フューチャーショップさまの仕様上、以下の置換文字が利用できないためユーザーさまを特定する情報が「会員ID（{@ member.id @}）」のみとなります。
※利用できない情報 例
・ユーザーさまのお名前（{@ member.last_name @}{@ member.first_name @}）
| パネル | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
測定タグのへのタグの設定 |
futureshop管理画面のメニュー：プロモーション管理 > 測定タグ一覧で、以下を設定いただきます。
...
| パネル | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
注文完了ページ以外 |
注文完了ページ以外の全てのページに、埋め込みタグを設定します。
...
上記の注文完了ページ以外に、以下の設定を行ってください。
...
出力設定
<body>タグ内（<body>タグの後）に出力するを選択
出力内容
以下タグ、埋め込みタグのサンプルです。
※以下の埋め込みタグはあくまでもサンプルとなりますので、変数やScriptのサポートは出来ませんのでご了承下さい。
※6行目のXXXXの箇所はサンプルの値となりますので、御社のクライアントコートを入れてください。
...
| パネル | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
注文完了ページ |
注文完了ページに、以下の設定を行ってください。
...
出力設定
<body>タグ内（<body>タグの後）に出力するを選択
出力内容
以下埋め込みタグのサンプルです。
※以下の埋め込みタグはあくまでもサンプルとなりますので、変数やScriptのサポートは出来ませんのでご了承下さい。
※6行目のXXXXの箇所はサンプルの値となりますので、御社のクライアントコードを入れてください。
| コード ブロック | ||
|---|---|---|
| ||
<script>
document.addEventListener("DOMContentLoaded", function() {
try {
const memberid = "{@ member.id @}".trim();
const scriptTag = document.createElement('script');
scriptTag.src = "https://whatya.solairo-api.com/XXXX/chat.js";
if (memberid && memberid !== "null") {
scriptTag.setAttribute('data-cs-id', '{@ member.id @}');
scriptTag.setAttribute('data-cs-secret', '{@ member.id @}');
}
document.body.appendChild(scriptTag);
} catch (error) {
console.error("エラーが発生しました:", error.message);
}
});
</script>
<script>
window.onWhatYaReady = (whatya) => {
whatya.purchase({ price: {% analytics.purchase_price_with_options_including_tax %}, user_id: '{@ member.id @}' });
}
</script> |
...
設定は以上となります。
設定方法
フリーパーツ2つ作る
→テーマ→レイアウト→埋め込みたいレイアウトを選択→レイアウトパーツを追加する
| コード ブロック |
|---|
<script>
window.onWhatYaReady = (whatya) => {
const onOperatorConnected = () => {
whatya.postMessage("{% page.url %}"+"からご相談です。");
}
// オペレータ接続時のイベントリスナーを登録
whatya.addEventListener('operator-connected', onOperatorConnected);
}
</script>
<script src="https://whatya.solairo-api.com/sola10/chat.js"
data-cs-id="{@ member.id @}"
data-cs-secret="{@ member.id @}"
data-cs-user_name="{@ member.last_name @}{@ member.first_name @}"
data-cs-nickname="{@ member.nickname @}">
</script> |
| コード ブロック |
|---|
<script>
window.onWhatYaReady = (whatya) => {
const onOperatorConnected = () => {
whatya.postMessage("{% page.url %}"+"からご相談です。");
}
// オペレータ接続時のイベントリスナーを登録
whatya.addEventListener('operator-connected', onOperatorConnected);
}
</script>
<script src="https://whatya.solairo-api.com/sola10/chat.js"></script> |
レイアウトパーツ①
...
先に作っておいた会員連携ありのフリーパーツを追加する
...
レイアウトパーツ②
...
先に作っておいた会員連携なしのフリーパーツを追加する
...
レイアウトパーツ追加①②の手順を入れたいページに行う