【ストア（アクション）】「直近の閲覧アイテムやページをリストで一覧表示」設定方法

Yo Hose Fujita

2023/09/15

ストアの「直近の閲覧アイテムやページをリストで一覧表示」の設定手順を以下に示します。

null

サイト上に簡単に閲覧履歴機能を導入することができます。
スクリプト配信用のテンプレートと閲覧履歴表示用のテンプレートをセットでご利用いただく方法を以下にご案内致します。

利用の前提条件

Open Graph protocol用に指定されているページ上のog:url,og:title,og:imageを利用します
これらをページ上に出力していないサイトでの利用はできません

テンプレートと設定方法

注意: 2つのテンプレートをそれぞれ設定し、配信する必要があります。

①Webサイト上の閲覧ページ情報を取得するスクリプトテンプレート

null

このテンプレートを使い、接客サービスを作成し、公開します。

配信対象ユーザー: 全てのユーザー
配信対象ページ: 商品詳細ページ（上記情報がHTML上から取得できるページ）
公開頻度: アクセス毎

テンプレートの仕様

スクリプトが配信されたページのog:url、og:title、og:imageを取得し、以下のような形式の_recent_itemsイベントをKARTEに送信します。

   {
      _recent_items: {
        title: String
        image: String
        url: Srtring
      }
    }

ユーザーが商品詳細ページを閲覧する都度、スクリプトがサイトへ配信され、ユーザーが閲覧した商品の情報をKARTEに送信し、KARTEではその直近30件までのデータをユーザーに紐づけて保管します。

アイテムページ以外に配信した場合、そのページのog情報も取得してしまいますのでご注意ください。

②過去に閲覧したアイテムの直近30件を表示するテンプレート

null

このテンプレートを使い、接客サービスを作成し、公開します。

カートや決済ページなど、不必要なページ以外は全ページで配信をすることを推奨致します。
基本的には常にサイトに常駐する形で「アクセス毎」で配信することを推奨いたします。

テンプレートの仕様

最小化された状態でアイコンが表示され、アイコンをタップすると閲覧したアイテム一覧が表示されます
お気に入りのアイテム件数が増えてくると、表示領域がスクロール可能になります

テンプレートの表示カスタマイズ

※ アクションのカスタマイズに関してはサポート対象外となります。以下の設定は自社の責任でご利用ください。

Scriptのカスタマイズをすることによって、下記のように、表示するタイトルを文字数で丸めて表示することも可能です。

【カスタマイズ画面-Script】

    const MAX_TITLE_LENGTH = 10;
    for (i = 0; i < metas.length; i++) {
        if (metas[i].attributes["property"]) {
            if (metas[i].attributes["property"].value == "og:url") {
                url = metas[i].content;
            }
            if (metas[i].attributes["property"].value == "og:title") {
                title = metas[i].content;
                if (title.length > MAX_TITLE_LENGTH){
                  title = title.substr(0, MAX_TITLE_LENGTH) + '...';
                }
            }
            if (metas[i].attributes["property"].value == "og:image") {
                image = metas[i].content;
            }
        }
    }