アクションテーブルにデータを格納すると、KARTE/KARTE TALKの接客サービスからリアルタイムにデータを参照することができます。
本ページではそのやり方についてサンプルを使って説明します。
サンプルケース
- 商品の購入数ランキングを週次で集計し、そのランキング結果を接客サービスとしてサイト上に表示したい
全体の流れ
商品マスタデータを準備する
まず、商品のマスタ情報を準備します。
今回の例では、以下のフォーマットのCSVファイルを用意します。
フィールド名 | 型 |
---|---|
id | STRING |
name | STRING |
image | STRING |
url | STRING |
- 注意点
- ※ コンバージョンタグで計測している
item_id
とcsvファイルのid
のデータ型が異なる場合については、データ型の指定が必要です。 - 例)コンバージョンタグで送信されている
item_id
が、文字列型(string)で、取り込むcsvファイルのid
が数字のみで構成されている場合など
- ※ コンバージョンタグで計測している
データテーブルを作成する
グローバルメニュー > データハブ > データセット画面右上のテーブルを作成から「テーブルを作成」を選択
以下のように設定します
- テーブル名:任意のテーブル名を入力(今回の例では
product_master
) - 追加先データセット:データセットを選択
- スキーマ(オプション):事前にスキーマを設定したい場合はこちらで設定します。スキーマの自動検出によって意図しない形式でファイルが読み込まれる場合があるので、可能な限り明示的にスキーマ設定することをおすすめしています。
- テーブル名:任意のテーブル名を入力(今回の例では
今回の例では以下のように記載します。
id:STRING,name:STRING,image:STRING,url:STRING
- 参考:データテーブルのスキーマを指定する
分割テーブルにするかどうか(オプション):今回はチェックなし
注意点
テーブル名には半角英数字とアンダースコアのみ利用できます
テーブル名、追加先データセットは後から変更できませんのでご注意ください
データセットにデータをインポートする
- 作成したデータテーブルをクリック
- csvファイルからインポートを選択し、csvファイルをアップロード
- 作成に5分程度かかることがあります
- ファイルサイズの最大容量は5MBです。
ランキングデータ抽出用のクエリを書く
KARTEのタグで取得した購入イベントデータとデータテーブルにインポートした商品のマスタデータを用いて、ランキングデータ集計用のクエリを書いていきます。
- グローバルメニュー > データハブ > クエリ画面から「作成」→「クエリを作成」をクリック
- クエリ名を「商品ランキングデータ抽出」として保存
- クエリ名は任意ですが、ジョブフロー設定時に選択するのでわかりやすい名前にしておくことをおすすめしています。
-- 変数設定
{% set period_of_days = "7" %} -- 抽出期間(日単位)を指定
{% set api_key = "123456789" %} --APIキーを指定
{% set dataset_name = "hogehoge" %} --データセット名を指定
{% set table_name = "product_master" %} --データテーブル名を指定
WITH analysis_data AS (
SELECT
user_id
, JSON_EXTRACT(VALUES, '$.buy.items') AS items
FROM
{{ karte_event("FORMAT_DATE('%Y%m%d', DATE_ADD(CURRENT_DATE, INTERVAL -" + period_of_days + " DAY))", "FORMAT_DATE('%Y%m%d', CURRENT_DATE)") }}
WHERE
event_name = 'buy'
AND JSON_EXTRACT(VALUES, '$.buy.items') IS NOT NULL
)
, convert_to_array AS (
SELECT
user_id
, SPLIT(SUBSTR(items, 2 , LENGTH(items) - 2), '},{') AS items
FROM
analysis_data
)
, unnested AS (
SELECT
user_id
, item
FROM
convert_to_array, UNNEST(items) AS item
)
, restored_to_json AS (
SELECT
user_id
, CONCAT('{', REPLACE(REPLACE(item, '{', ''), '}', ''), '}') AS item
FROM
unnested
)
, dataset AS (
SELECT
JSON_EXTRACT_SCALAR(item, '$.item_id') AS item_id
, JSON_EXTRACT_SCALAR(item, '$.quantity') AS quantity
FROM
restored_to_json
)
, aggregate_data AS (
SELECT
item_id
, SUM(CAST(quantity AS INT64)) AS sum_quantity
, COUNT(*) AS cv_count
FROM
dataset
GROUP BY
item_id
)
, product_master AS (
SELECT
*
FROM `prd-karte-per-client._.`
)
SELECT
a.item_id
, b.name
, b.image
, b.url
, RANK() OVER (ORDER BY a.sum_quantity DESC) AS ranking
, a.sum_quantity AS cv_count
FROM
aggregate_data a
INNER JOIN
product_master b ON a.item_id = b.id
ORDER BY ranking
アクションテーブルを作成する
- グローバルメニュー > アクション > アクションテーブル画面右上の「作成」→「空のテーブルを作成」をクリック
- 以下の設定を行います
- テーブル名:任意の名前を入力
- 今回は
ranking_weekly
としています
- 今回は
- スキーマ設定:上記クエリ結果のスキーマを指定
- 権限:今回は参照のみなので「ウィジェットからの参照」にチェック
- テーブル名:任意の名前を入力
アクションテーブルにクエリ結果を移行する
- グローバルメニュー > データハブ > ジョブフロー画面右上の「作成」をクリック
- ジョブ設定画面から以下を設定し、右上の「保存して完了」をクリック
- ジョブの設定
- ジョブ名:任意の名前を入力
- 今回は「商品ランキングをアクションテーブルへ」
- ジョブタイプ:データテーブルからエクスポート
- エクスポート元:上記で作成したクエリ名を選択
- エクスポート先:先程作成したアクションテーブルを選択
- ジョブ名:任意の名前を入力
- 実行方法を選択
- 今回の例では週次でランキングデータを更新したいので、「繰り返し実行を有効にする」にチェックを入れ、実行頻度を「1週ごと」に設定
- ジョブフローの設定
- ジョブ実行後に対象のジョブをアーカイブしたい場合には「ジョブ実行終了後にアーカイブ」にチェックを入れます
- ジョブフロー名:任意の名前を入力
- ジョブの設定
アクションテーブルクエリを作成する
接客サービスからアクションテーブルのデータを取得するには以下の2種類の方法があります。
- 主キーを指定してレコード取得する
- アクションテーブルクエリを使ってレコード取得する
今回の場合はランキング上位のものを表示したいので、主キーの指定ではなくアクションテーブルクエリから参照する必要があります。
- 参照したいアクションテーブルを選択し、画面右の「作成」をクリック
- 以下の設定を行い、完了をクリック
- クエリ名:任意ですが、今回は
find_all
と設定 - 抽出条件:今回の例ではランキングの上位3件のレコードを抽出したいので、以下の条件で設定します。
- Limit:3
- Sort:
ranking
昇順
- クエリ名:任意ですが、今回は
これでアクションテーブルクエリの作成は完了です。
接客サービスからデータを参照する
- 接客サービス作成画面に遷移して「新規作成」
- 今回は「Image List vertical 0」のテンプレートを利用しています
- ユーザーに見せる -> 画像付きリスト(縦) -> Image List vertical 03
- 今回は「Image List vertical 0」のテンプレートを利用しています
- 接客サービス編集画面 -> カスタマイズ -> Script から以下のスクリプトを記載してアクションテーブルのデータを取得します。
var table = widget.collection('v2/ranking');
table.getByQuery('find_all', {}, function(err, items){
widget.setVal('items', items);
widget.show();
});
詳細は以下のドキュメントをご確認ください
html側からは以下のようにして呼び出します。(対象の部分のみ記載しています。)
<!-- リンクリスト -->
<ul class="card-list _fit-card list-link">
<li krt-for="(index, item) in items">
<a krt-bind:href="item.url">
<div class="rank-num">位</div>
<figure class="link-image radius-circle"
style="width:46px"
>
<img krt-bind:src="item.image" alt="">
</figure>
<div class="link-body">
<h2 class="link-heading"></h2>
</div>
<i class="link-arrow #{iconArrowRight}" aria-hidden="true"></i>
</a>
</li>
</ul>
- こちらも詳細は以下のドキュメントをご確認ください。
このような形で表示することが可能です。
設定は以上で完了になります。
あとは従来の接客サービスと同じフローで配信設定を行ってください。