Aura panel

こちらの記事ではfutureshop コマースクリエイターにて会員情報連携の設定方法について解説します。

会員情報連携の概要については以下の記事をご参照ください。
【WhatYa】会員情報連携のトラブルシューティング

...

...

前提条件

...

futureshopの測定タグで会員情報連携を設定する場合

...

summary

注意事項

params

JTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElN0IlMjJsaWdodCUyMiUzQSUyMiUyMzBlMGUwZSUyMiU3RCUyQyUyMmZvbnRXZWlnaHQlMjIlM0ElMjJub3JtYWwlMjIlMkMlMjJ0ZXh0QWxpZ24lMjIlM0ElMjJsZWZ0JTIyJTdEJTdEJTJDJTIyaGVhZGVyJTIyJTNBJTdCJTIyaWNvbiUyMiUzQSU3QiUyMm5hbWUlMjIlM0ElMjJmYUV4Y2xhbWF0aW9uQ2lyY2xlJTIyJTJDJTIyY29sb3IlMjIlM0ElMjIlMjNGRkMwMjElMjIlMkMlMjJzaXplJTIyJTNBMjYlN0QlN0QlMkMlMjJoZWFkbGluZSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJ0ZXh0JTIyJTNBJTIyJUU2JUIzJUE4JUU2JTg0JThGJUU0JUJBJThCJUU5JUEwJTg1JTIyJTJDJTIyY29sb3IlMjIlM0ElMjIlMjMyZDJkMmQlMjIlMkMlMjJmb250U2l6ZSUyMiUzQTE4JTJDJTIyZm9udFdlaWdodCUyMiUzQSUyMmJvbGQlMjIlMkMlMjJ0ZXh0QWxpZ24lMjIlM0ElMjJsZWZ0JTIyJTdEJTdEJTJDJTIyYmFzZSUyMiUzQSU3QiUyMmJveFNoYWRvdyUyMiUzQSU3QiUyMnNoYWRvd3MlMjIlM0ElNUIlN0IlMjJjb2xvciUyMiUzQSUyMnJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC4wOCklMjIlMkMlMjJ4JTIyJTNBMCUyQyUyMnklMjIlM0ExJTJDJTIyYmx1ciUyMiUzQTElMkMlMjJzcHJlYWQlMjIlM0EwJTdEJTJDJTdCJTIyY29sb3IlMjIlM0ElMjJyZ2JhKDAlMkMlMjAwJTJDJTIwMCUyQyUyMDAuMTYpJTIyJTJDJTIyeCUyMiUzQTAlMkMlMjJ5JTIyJTNBMSUyQyUyMmJsdXIlMjIlM0EzJTJDJTIyc3ByZWFkJTIyJTNBMSU3RCU1RCU3RCUyQyUyMmJvcmRlclJhZGl1cyUyMiUzQSU3QiUyMnJhZGl1cyUyMiUzQTQlN0QlMkMlMjJiYWNrZ3JvdW5kQ29sb3IlMjIlM0ElN0IlMjJjb2xvciUyMiUzQSUyMiUyM2ZmZmZmZiUyMiU3RCUyQyUyMmJvcmRlciUyMiUzQSU3QiUyMmNvbG9yJTIyJTNBJTIyJTIzRkZDMDIxJTIyJTJDJTIyd2lkdGglMjIlM0ExMCUyQyUyMnRvcCUyMiUzQWZhbHNlJTJDJTIycmlnaHQlMjIlM0FmYWxzZSUyQyUyMmJvdHRvbSUyMiUzQWZhbHNlJTJDJTIybGVmdCUyMiUzQXRydWUlMkMlMjJzdHlsZSUyMiUzQSUyMnNvbGlkJTIyJTdEJTdEJTdE

留意事項

会員IDの置換文字のみ利用可能なため、以下の点をご理解の上ご利用をご検討いただけますと幸いです。

1. data-cs-secretにユーザーさまごとにハッシュ化された値などを入れるなどは弊社でのサポートはできかねますので、ベンダーさまにご依頼ください。

2. フューチャーショップさまの仕様上、以下の置換文字が利用できないためユーザーさまを特定する情報が「会員ID（{@ member.id @}）」のみとなります。

   ※利用できない情報　例
   　・ユーザーさまのお名前（{@ member.last_name @}{@ member.first_name @}）

...

<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つ作る

→テーマ→レイアウト→埋め込みたいレイアウトを選択→レイアウトパーツを追加する

Image Removed

Image Removed

    <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>

Image Removed

    <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>

Image Removed

レイアウトパーツ①

...

先に作っておいた会員連携ありのフリーパーツを追加する

...

レイアウトパーツ②

...

先に作っておいた会員連携なしのフリーパーツを追加する

...

レイアウトパーツ追加①②の手順を入れたいページに行う