このハンズオンでは、Webに配信されるアクションのカスタマイズを試してみましょう。ここでは、JavaScriptによるカスタマイズの応用として、ユーザー情報に応じて初期表示ステートを切り替えてみましょう。

なお、こちらのハンズオンを先にやることをおすすめします。

接客サービスをテスト配信する

まず、題材となるアクションをテスト配信するための接客サービスを作成します。
接客サービスのテスト配信の手順がわからない場合は、こちらの記事を参考にしてください。
特定ユーザーにのみテスト配信することはできますか?
(必ず、テストセグメントに限定して配信するようにしてください。)

なお、アクションは [ユーザーに「見せる」> カード > 最小化-リスト(3項目+ボタン)] というテンプレートを使って作成しましょう。

null

テスト配信の設定を完了し、Webサイト上でテンプレートがそのまま自分に配信できることを確認します。

null

null

表示されない場合は、次の設定を確認します。

  • アクションの配信率が100%になっているか?
  • 同時配信がOKになっているか?
  • 自分がテストセグメントに入っているか?

ユーザー情報変数を追加する

表示制御に使うユーザー情報変数を追加します。
実際には任意の値を使えますが、今回のハンズオンでは説明を簡単にするために、「閲覧ページパスの一つ前の値」を利用します。

KARTE側の設定

  1. アクション編集画面のカスタマイズタブを開きます
  2. 右ペインの変数タブを開き、さらにユーザー情報変数タブを開きます
  3. 下部にある「ユーザー情報変数の追加」をクリックします
  4. 次のように設定します
    • 変数名
      • previous_page_path
    • デフォルト値
      • ON
      • 値は空欄
    • プレビュー値
      • ON
      • 値は空欄(ここを変更すると、プレビュー表示時の仮の値を設定できます)
    • 設定
      • 「最新のセッション 閲覧 閲覧ページパス の 一つ前の値」

null

ユーザー情報に応じて初期表示ステートを切り替える

このアクションは、次の2つのステートを保持しています。

  1. 最小化状態
  2. リスト表示

ここでは、JavaScriptをカスタマイズし、ユーザー情報変数で取得した「閲覧ページパスの一つ前の値」が特定のパスに等しい場合のみ最小化状態をスキップするようにカスタマイズしてみましょう。

KARTE側の設定

  1. テスト配信先のWebサイトで、ターゲットとなるページパスを1つ適当に決めます
  2. アクション編集画面の[カスタマイズタブ > Script]を開きます
  3. widget.show()の記述を、次のように書き換えます
    • ただし、'/ターゲットとなるぺージパス'の部分は先ほど決めたページパスで置き換えてください
    // ユーザー情報変数から「閲覧ページパスの一つ前の値」を取得
    var previous_page_path = #{previous_page_path};
    // ターゲットとなるぺージパス
    var target = '/ターゲットとなるぺージパス';

    // デバッグ用のログ
    console.log('[DEBUG]previous_page_path: ', previous_page_path);
    console.log('[DEBUG]target: ', target);

    // もし直前にターゲットとなるページパスを見ていたら
    if (previous_page_path.indexOf(target) !== -1) {
        // いきなりステート2から表示
        widget.setState(2);
    } else {
        widget.show();
    }
  1. アクションを保存します

null

Webサイトでの表示確認

  1. ページ更新し、「最小化状態」から表示されることを確認します
  2. 今度は先ほど選んだ「ターゲットとなるぺージパス」をブラウザで開いて、その後別のページで接客を表示させます。このとき、いきなり「リスト表示」から初期表示されることを確認します
    • ページ遷移後もテストセグメントに入り続けなければ、接客が表示されません。テストセグメントの条件に注意してください
    • ページ遷移が速すぎると、ユーザー情報の更新が間に合わないことがあります

もしうまく初期表示が切り替わらない場合は、「ターゲットとなるぺージパス」から遷移した後のページで、Chromeのデベロッパーコンソールを表示し、さらにConsoleタブを開きます。

次の画像のように、previous_page_pathtargetの値が表示されるので、それらの値が等しくなっているかどうか確認します。

null

応用例

今回は「閲覧ページパスの一つ前の値」というユーザー情報を使ってポップアップの初期表示を制御してみました。この他にも、ユーザー情報変数とJavaScriptによるカスタマイズをすることで、次のような表示制御を実現することができます。

  • ユーザーの会員ランクに応じて、同じアクションでも表示するステートを変える
  • ポップアップの最後のステートを、次のポップアップ表示時にも維持する

以上で、アクションの簡単なカスタマイズを実現することができました。
KARTEでWebに配信されるほとんどのアクションは、JavaScriptを自由に書き換えて配信することができます。

注意点

  • 「アクションのHTML/CSS/JavaScriptのカスタマイズをしたけど動きません」といった問い合わせは、チャットサポートの範囲外となります
  • ただし、KARTE自体の仕様に関するお問い合わせはお受けできます。不明点があればお気軽にお問い合わせください