概要

このページでは、「Customer Datastore」の「ユーザー属性」を使って、Webページに訪れているユーザーに属性情報をセットする方法を説明します。

「Customer Datastore」について、概要を知りたい方は Customer Datastore 構成の全体像 をご確認ください。

ユーザー属性とは

訪問ユーザーの都道府県や閲覧履歴といった、ユーザーに付随する情報を記録・保持することができます。
一度設定したユーザー属性は永続的に保持されるため、ページ遷移後だけでなく離脱・再訪後も参照することができます。

cookie や localStorage との違い

ユーザーの情報をそのユーザーに対して利用するのであればcookieやlocalStorageで実現可能ですが、本API では「Customer Datastore」へ記録するため、行動ログの集計機能 と組み合わせることでユーザー属性別のランキング集計などが可能になります。

ユーザー属性の設定

JavaScript API 仕様

var data = { source: 'organic', login: false }; // 設定したい任意の key/value ペア群
kzs("setUserData", data);

注意事項

設定した内容は Customer Datastore サーバーに送信・格納されます。
ユーザーのメールアドレスや氏名などの個人情報は設定しないでください。

サンプル実装

// ページのグローバルヘッダーにあるログイン有無情報から、ユーザーがログイン済みかどうかを設定
if($('.navi .login-label').length > 0) {
 kzs("setUserData", { isLogin: true });
}

コールバック引数

また、 setUserData API にコールバックを指定すると、レスポンスが返ってきたタイミングでコールバックが実行されます。このときのコールバックの引数または kzs.current.userData は更新後のユーザー属性となっています。確実に属性設定のログ送信が完了した事に実施したい処理がある場合に利用します。

kzs("setUserData", { foo: "テスト" }, function(userData) {
 console.info(userData);　　//= { source: "Facebook", foo: "テスト" }
　　/* ここに任意処理を記述 */
});

ユーザー属性の取得

以下のようにWebページに訪問しているユーザーの属性を取得できます。

JavaScript API 仕様

// 以前に kzs("setUserData", { source: "organic", login: false }); で設定していた場合
kzs.current.userData.login; //= false
kzs.current.userData; //={ source: "organic", login: false }

注意事項

情報を取得不可能なタイミングがあります。
後述する「ユーザー属性・閲覧履歴の取得可能タイミング」の項目をご参照ください。

閲覧履歴の設定と取得

setUserData APIには、array型の情報を履歴用途で保持しておくオプション機能があります。
これを利用する事で、例えば「このユーザーの、商品ページ閲覧の履歴」を取得しておき、任意のページにて「あなたの閲覧履歴」U/Iとして表示させる事が可能です。

履歴の設定

JavaScript API 仕様

// 追加したい履歴 object
var item = { id:1, name:"コーヒー" };

// 履歴情報をユーザー属性として設定
kzs("setUserData", {
  itemViewHistory: [item], // 履歴追加したい object を (array 記法で) 指定
  __itemViewHistory: {
    mode: "prepend", // 最後に追加した情報が先頭に来る (or "append")
    limit: 10, // 履歴の最大保持数 (=最新 10 件だけ保持。指定なしの default は 100)
    unique: true // 履歴に同じデータがあった際に追加させないモード (default は false)
  }
});

サンプル実装

• とある EC サイトにて
• URL ルールが /items/{商品 ID} な商品ページの閲覧履歴を取得する場合
• 商品ページをターゲット URL とした kaizen experience の exp script として設置

// URL が商品ページのものか判断、かつ URL から商品 ID を取得
var m = window.location.pathname.match("^/items/(\\d+)");
if(m == undefined)
  return;

// 履歴に追加する object を作成
var item = {
  id: m[1],
  name: $('h2.item-name') || ""
};

// 履歴追加を実行
kzs("setUserData", {
  itemViewHistory: [item],
  __itemViewHistory: {
    mode: "prepend",
    limit: 10,
    unique: true
  }
});

履歴の取得

JavaScript API 仕様

// 以前に history という key 名で履歴を setUserData していた場合
kzs.current.userData.history; //　履歴 object が複数含まれる array
kzs.current.userData.history[0].name; // 1 番目の履歴 object の name 値を取得　

サンプル実装

// ユーザー履歴情報を取得、中身が無い場合は何もしない
var hist = kzs.current.userData.itemViewHistory || [];
if(hist.length == 0)
  return;
// 履歴をすべて console に表示
$.each(hist, function(i, d) {
  kzs.console.log(i, d);
});
//= 0, { id:2, name:"コーヒー" }
//= 1, { id:3, name:"メロンパン" }
//= 2, { id:1, name:"ペヤング" }

ユーザー属性・閲覧履歴の取得可能タイミング

ユーザー属性の設定は、Kaizen タグ読み込み完了後であればいつでも利用可能ですが、ユーザー属性の取得に関しては以下のような制限があります。

前提: Kaizen JavaScript の処理シーケンス

こちらのシーケンス図 を参照ください。

取得の制限

上記のシーケンス図の各JavaScrript実行箇所において、ユーザー属性・閲覧履歴を取得する API は以下の利用制限がかかります。

• prelude script
  • ユーザー属性 (および閲覧履歴) 情報は取得出来ません。
  • 理由: Kaizen タグの仕様。Kaizen ログサーバーからユーザー属性情報を取得する前のタイミングでの実行となる為、API を実行しても情報は得られません。
• experience script
  • 取得可能です。
• デザイン案の JS コード
  • 取得出来ません。
  • 理由: Kaizen タグの仕様で、デザイン案の JS コードから `kzs` object を参照できないようになっている為。

ユーザー属性情報を活用したデザイン案U/Iを実装する為には、ユーザー属性情報をexperience scriptにて取得して、以下のようなサンプルコードのようにwindow直下のglobal変数を使って情報を渡す必要があります。

// experience script
// デザイン案 JS からも参照可能な window scope の変数に代入
var window._isLogin = kzs.current.userData.isLogin;

// デザイン案 JavaScriptタブ
if(_isLogin) { // window. を省略する事で実質 window._isLogin を参照可
  $('.header').append('<h3 class="notice">ログイン中の皆様に 10% OFF クーポン配信中★</h3>');
}