前提条件と留意事項

フリーパーツの設定

futureshop管理画面のメニュー：コマースクリエイター＞パーツ＞パーツを追加するをクリックします。

会員情報連携 の利用に必要なタグ…注文完了ページ以外
注文完了後のCV金額送信に必要なタグ…注文完了ページのみ

フリーパーツを選択

必要事項を記載して保存します。

ログインユーザー用のタグと、未ログインユーザー用のタグ2種類作成する必要があります。

以下は例となりますので、ご参考の上、フリーパーツを作成お願いいたします。

ログインユーザー用タグ

パーツ名…【ログイン】WhatYa会員連携あり

置き換え文字…{% parts[whatya_member] %}

内容…

<!--
　WhatYaクライアントAPIを活用する場合は以下のスクリプトを有効化してください

    <script>
    window.onWhatYaReady = (whatya) => {
        const onOperatorConnected = () => {
        whatya.postMessage("{% page.url %}"+"からご相談です。");
        }
        // オペレータ接続時のイベントリスナーを登録
        whatya.addEventListener('operator-connected', onOperatorConnected);
    }
    </script>

-->
    
<script src="https://whatya.solairo-api.com/XXXX/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>

※XXXX部分はご自身のクライアントコードに書き換えをお願いします。

未ログインユーザー用タグ

パーツ名…【未ログイン】WhatYa会員連携なし

置き換え文字…{% parts[whatya_not_member] %}

内容…

<!--
　WhatYaクライアントAPIを活用する場合は以下のスクリプトを有効化してください

    <script>
    window.onWhatYaReady = (whatya) => {
        const onOperatorConnected = () => {
        whatya.postMessage("{% page.url %}"+"からご相談です。");
        }
        // オペレータ接続時のイベントリスナーを登録
        whatya.addEventListener('operator-connected', onOperatorConnected);
    }
    </script>

-->
    
<script src="https://whatya.solairo-api.com/XXXX/chat.js"></script>

※XXXX部分はご自身のクライアントコードに書き換えをお願いします。

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のサポートは出来ませんのでご了承下さい。

<script>
window.onWhatYaReady = (whatya) => {
  whatya.purchase({ price: {% analytics.purchase_price_with_options_including_tax %}, user_id: '{@ member.id @}' });
}
</script>

設定は以上となります。

WhatYaヘルプナレッジ

【futureshop コマースクリエイター】会員情報連携の設定方法