2018年1月16日(火)よりサポートサイトはhttps://support2.karte.ioへ移行しました。

ストア:「フリック操作可能な閲覧履歴機能で回遊性をアップ」設定方法

 ストアの「フリック操作可能な閲覧履歴機能で回遊性をアップ」の設定手順を以下に示します。

 

__________2017-08-31_11.54.24.png

概要


サイト上に簡単に閲覧履歴機能を導入することができるスマホ専用のフリック操作が可能なテンプレートとなります。閲覧履歴表示用のテンプレートとスクリプト配信用のテンプレートをセットで利用します。 

 

前提条件


サイト上からopengraphで指定されているog:url、og:title、og:imageを利用するため、それらがサイト上から取得できることが前提です。上記がないサイトでの利用はできないテンプレートです。

  

設定手順


1. ストアより「フリック操作可能な閲覧履歴機能で回遊性をアップ」をインストール(さっそく利用してみる)します。

1.jpg

以下2種類のテンプレートがインストールされます。

 

①閲覧履歴表示用

実際にユーザーへ表示させるテンプレートとなります。②スクリプト配信用で取得した要素(画像や商品名などが)を表示させます。

②スクリプト配信用

サイト上にあるog:url、og:title、og:imageの要素を取得するテンプレートとなります。ユーザーが商品詳細ページを閲覧する度にこのスクリプトが配信され、閲覧した商品の情報(opengrahの要素)をKARTEに送信し、KARTEでは直近閲覧した30件までのデータをユーザーに紐づけて保管します。

 

2. ①閲覧履歴表示用/②スクリプト配信用を各接客サービスに分けます。

接客サービスを「複製」等を行い、接客サービスを2つに分けます。

 

__________2017-08-30_16.04.37.png

 

3. ②スクリプト配信用の接客サービスの設定

②スクリプト配信用の接客サービスを配信した場合、配信されたページの og:url、og:title、og:image を取得し、「直近閲覧アイテム(_recent_items)」イベントが発生します。

 

__________2017-08-31_12_32_22.jpg 

 

以下のように設定の編集を行ってください。

  • 配信対象ユーザー:全てのユーザー(何も設定しない)
  • 配信対象ページ:すべての商品詳細ページ(上記情報がHTML上から取得できるページ)
    • 商品詳細ページ以外に配信した場合、そのページのog情報も取得してしまいますのでご注意ください。
  • 公開頻度:アクセス毎

テンプレートの編集画面では、必要に応じて赤枠で囲んだ「og:title内の、取得除外文字列*」の部分を設定します。指定した文字列を、閲覧履歴のtitleから除外することが可能になります。会社名やサイト名がtitleに含まれている場合はこちらで指定すると、商品名のみが表示されるようになります。

__________2017-08-11_23.11.52.png

※例えば、og:titleが「アンクルストラップサンダル | Shoes karte」とサイト名が含まれている場合、「og:title内の、取得除外文字列」に何も指定しない場合は「アンクルストラップサンダル | Shoes karte」とサイト名も一緒に商品名として表示されてしまいます。「og:title内の、取得除外文字列」に「 | Shoes karte」と指定することで、「アンクルストラップサンダル」と表示されるようになります。

 

4. ①閲覧履歴表示用の接客サービスの設定

②スクリプト配信用で取得した情報を任意の場所に表示します。

  • テンプレートの仕様
    • 最初は、最小化された状態でアイコンが表示されて、アイコンをタップすると閲覧したアイテム一覧が見えるような形になります。
    • フリック操作によりアイテムを複数閲覧することが可能です。
  • テンプレートの配信イメージ
    • 最小化時

     __________2017-08-31_12.47.42.png

 

    • 最大化時

     __________2017-08-31_12.48.49.png

 

  • ①閲覧履歴表示用の接客サービス配信時の留意点
    • カートや決済ページなど、不必要なページ以外は全ページで配信をすることを推奨致します。
    • 基本的には常にサイトに常駐する形で「アクセス毎」で配信することを推奨いたします。
    • アクションの編集画面にてテスト表示にチェックを入れると、プレビュー画面にてイメージをつかんでいただくためにデフォルトで入っているダミー画像が表示されます。こちらにチェックが入ったままですと実配信でもその画像が表示されてしまうためご注意ください。

                        テスト表示のチェックボックス            ダミー画像表示サンプル

      __________2017-09-01_14.53.15.png  __________2017-09-01_15.33.50.png