プロダクト

Webサイトに表示するコンテンツデータをCSVファイルで管理する

こんにちは、プレイドの武藤です。
KARTE Datahub(以下、Datahub)のビジネスサイドとして、プロダクトのグロースや技術サポートを担当しています。

CX Clipの「プロダクト」カテゴリでは、KARTEを使う中で役に立つTipsをブログ形式で解説しています。今回は、2018年12月にリリースされたDatahubを使って、「Webサイトに表示するコンテンツデータをCSVファイルで管理する方法」を紹介します。

想定シーン

例えば、北海道・東北・関東などのエリアごとにURLのパスが切られていて、そのエリアごとにコンテンツを出し分けたいときケースを想定します。従来の方法だと対象エリアの数だけ接客サービスを作成する必要がありました。しかし、Datahubのアクションテーブルという機能を活用すると、接客サービスを一つ作るだけで済むので接客サービスの作成、運用負荷を削減できます。

KARTE Datahubとは?

KARTE Datahubとは、KARTEのオプション機能の1つです。
顧客データや行動データ、オフラインデータなど分断されているデータベースをKARTEに統合して、KARTE上のセグメントやアクションに自由に利用することができます。

詳しくは、以下のサービスサイトをご覧ください。

リストを用意する

まずは以下のようなエリアごとのマッピングリストをCSVファイル形式で用意します。

path image url
/hokkaido https://emxample.com/image.jpg https://emxample.com/hokkaido
/tohoku https://emxample.com/image2.jpg https://emxample.com/tohoku
/kanto https://emxample.com/image3.jpg https://emxample.com/kanto
・・・ ・・・ ・・・
/kyushu https://emxample.com/image.png https://emxample.com/kyushu
列名 内容
path コンテンツを表示するURLのパス
image 表示する画像のURL
url 遷移先のURL

詳細な仕様については、以下のガイドをご覧ください。

  • データテーブルにインポートするファイルを作成する

アクションテーブルにデータを格納する

上記で作成したCSVのリストをアクションテーブルに格納します。格納方法は、以下の2通りあります。

  • スケジュール機能を使った取り込み
  • 管理画面からのCSVアップロード

頻繁に更新をしないのであれば、後者の「管理画面アップロード」で容易に手元のデータをKARTEに連携することができます。細かい操作方法については、以下のガイドをご覧ください。

アクションテーブル画面右上の「作成」→「CSVから作成」を選択します。
以下の設定を行い、「完了」をクリックするとアクションテーブルにデータがアップロードされます。

  • テーブルID:任意のテーブル名を入力してください。(今回の例ではaria_contents_master)
  • CSVファイルを選択:上記で作成したCSVファイルをアップロード
  • 権限:ウィジェットからの参照にチェック

----------2019-03-18-12.03.20-1

接客サービスのカスタマイズを行う

続いて、アクションテーブルに格納したデータを接客サービスから呼び出す設定を行います。接客サービスの任意のテンプレートを選択し、編集画面の「カスタマイズ」から以下のようにJavaScriptを記載します。

var path = location.pathname;

var table = widget.collection('v2/table_name'); // table_nameはアクションテーブル作成時のテーブル名を指定

table.get(path, function(err, item) {
if(!err && item && item.length > 0) {
widget.setVal("item", item);
setTimeout(function() {
widget.show();
}, 0)
}
});

HTML側からは item.image、item.urlで対象のプロパティにアクセスすることがきます。

以上の設定を行うことで、URLのパスに応じて画像、遷移先のURLを動的に変更することができます。後は従来の接客サービスと同様の配信設定を行ってください。

接客サービスからアクションテーブルにアクセスするための細かい設定方法、ならびに接客サービスで利用できるAPIの仕様については以下のガイドをご確認ください。

まとめ

このようにアクションテーブルを活用することで、接客サービスを複数作成することなくコンテンツの出し分けを行うことができます。
また、コンテンツの差し替えが必要になった場合は、CSVファイルを更新してアクションテーブルにアップロードするだけで、即座にサイト上のコンテンツが更新されます。(接客サービスをメンテナンスする必要がありません!)
今回紹介したケース以外でもアクションテーブルの活用事例は沢山ありますので、次回のエントリーでまたご紹介できればと思います。

メールマガジンの購読はこちら

CX Clipの更新情報を、毎週お届けします!

登録する

KARTE についてのお問い合わせ

一人ひとりに合わせた体験づくりをはじめましょう

問い合わせる

SNSで情報を受け取る

KARTEに関する最新情報をお届けします!