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

https://storage.googleapis.com/support_img/uploads/42c4c0bb1e2cddae0403c9ec5ee78bec-600x475.png

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

利用の前提条件

  • Open Graph protocol用に指定されているページ上のog:url,og:title,og:imageを利用します

  • これらをページ上に出力していないサイトでの利用はできません

テンプレートと設定方法

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

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

https://storage.googleapis.com/support_img/uploads/11c32813f90cba4b939143995c03fa82-600x197.png

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

  • 配信対象ユーザー: 全てのユーザー

  • 配信対象ページ: 商品詳細ページ(上記情報がHTML上から取得できるページ)

  • 公開頻度: アクセス毎

テンプレートの仕様

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

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

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

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

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

https://storage.googleapis.com/support_img/uploads/af6c6e8e65c6ab461c75ec0a8ec69deb-600x218.png

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

  • カートや決済ページなど、不必要なページ以外は全ページで配信をすることを推奨致します。

  • 基本的には常にサイトに常駐する形で「アクセス毎」で配信することを推奨いたします。

テンプレートの仕様

  • 最小化された状態でアイコンが表示され、アイコンをタップすると閲覧したアイテム一覧が表示されます

  • お気に入りのアイテム件数が増えてくると、表示領域がスクロール可能になります

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

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

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

テンプレートの配信イメージ

最小化時

https://storage.googleapis.com/support_img/uploads/1d8a12e25e6e708193f96b1560848d35.png

最大化時

https://storage.googleapis.com/support_img/uploads/ee9167d5451ce28cadae72fedca256ea.png

(オプション)閲覧ページ情報をCSSセレクタ指定で取得

こちらの利用は、Open Graph protocolを利用していないサイトを想定したものとなります。上記手順の「①Webサイト上の閲覧ページ情報を取得するスクリプトテンプレート」に代わりとなるオプション機能です。両方利用することは取得データの重複を招くためご利用できません。

テンプレート取得方法

ストアよりインストールすると、「直近の閲覧アイテムやページを一覧表示_スクリプト配信用」の中に、テンプレート「(オプション)CSSセレクタ」が含まれてダウンロードだされます。

スクリプトテンプレート

  • 上記テンプレートを利用することで、CSSセレクタ指定で要素(画像及びタイトル)を取得できます。

設定内容

  • titleとして取得したいCSSセレクタ

    • タイトルとして取得する要素を指定してください

  • 画像として取得したいCSSセレクタ

    • 画像として取得する要素を指定してください

※その他の設定に関しては、「①Webサイト上の閲覧ページ情報を取得するスクリプトテンプレート」に従いご利用ください