詳細的使用者端內容 client-context-in-detail

Client Context代表動態組合的使用者資料集合。 您可以使用資料來決定在指定情境（內容目標定位）下要在網頁上顯示的內容。 資料也可用於網站分析，以及頁面上的任何JavaScript。

Client Context主要包含下列幾個方面：

建立獨立工作階段存放區並將其新增至Client Context，或建立繫結至Context Store元件的工作階段存放區。 Adobe Experience Manager (AEM)會安裝數個您可以立即使用的內容存放區元件。 您可以使用這些元件作為元件的基礎。

如需有關開啟Client Context、設定其顯示的資訊以及模擬使用者體驗的資訊，請參閱 使用者端內容.

工作階段存放區 session-stores

Client Context包含包含使用者資料的各種工作階段存放區。 存放區資料來自下列來源：

Client Context架構提供 JavaScript API 可用來與工作階段存放區互動，以讀取和寫入使用者資料，以及接聽和回應存放區事件。 您也可以針對您用於內容目標定位或其他用途的使用者資料，建立工作階段存放區。

工作階段存放區資料會保留在使用者端上。 Client Context不會將資料寫回伺服器。 若要將資料傳送至伺服器，請使用表單或開發自訂JavaScript。

每個工作階段存放區都是屬性值組的集合。 工作階段存放區代表（任何型別的）資料集合，其概念含義可由設計人員、開發人員或兩者決定。 以下範例JavaScript程式碼會定義物件，該物件代表工作階段存放區可能包含的設定檔資料：

{
  age: 20,
  authorizableId: "aparker@geometrixx.info",
  birthday: "27 Feb 1992",
  email: "aparker@geometrixx.info",
  formattedName: "Alison Parker",
  gender: "female",
  path: "/home/users/geometrixx/aparker@geometrixx.info/profile"
}

工作階段存放區可在各瀏覽器工作階段之間持續儲存，或僅能針對建立該存放區的瀏覽器工作階段持續儲存。

內容存放區元件 context-store-components

內容存放區元件是可新增至Client Context的CQ元件。 通常，內容存放區元件會顯示與其相關聯之工作階段存放區的資料。 不過，前後關聯存放區元件顯示的資訊並不限於工作階段存放區資料。

前後關聯存放區元件可包含下列專案：

如需可新增至前後關聯存放區的已安裝前後關聯存放區元件的說明，請參閱 可用的使用者端內容元件.

目標內容傳送 targeted-content-delivery

設定檔資訊也用於傳遞 目標內容.

新增使用者端內容至頁面 adding-client-context-to-a-page

將Client Context元件加入網頁的主體區段，以啟用Client Context。 Client Context元件節點的路徑為 /libs/cq/personalization/components/clientcontext. 若要包含元件，請將下列程式碼新增至頁面元件的JSP檔案中， body 頁面元素：

<cq:include path="clientcontext" resourceType="cq/personalization/components/clientcontext"/>

clientcontext元件會使頁面載入實作Client Context的使用者端資料庫。

使用者端內容UI僅在作者執行個體上可用。

延伸Client Context extending-client-context

若要擴充Client Context，請建立工作階段存放區，並選擇顯示存放區資料：

建立工作階段存放區 creating-a-session-store

針對您必須新增到Client Context以及從中擷取的資料建立工作階段存放區。 一般而言，您會使用以下程式來建立工作階段存放區：

在personalization.stores.kernel使用者端資料庫中包含JavaScript，會在載入Client Context架構時建立存放區。

工作階段存放區型別 types-of-session-stores

工作階段存放區會在瀏覽器工作階段期間建立並可供使用，或保留在瀏覽器存放區或Cookie中。 Client Context JavaScript API定義了代表兩種資料儲存型別的幾個類別：

此API還提供專門用於儲存JSON資料或JSONP資料的這些類別的擴充功能：

建立工作階段存放區物件 creating-the-session-store-object

使用者端程式庫資料夾的JavaScript會建立並初始化工作階段存放區。 必須使用內容存放區管理員登入工作階段存放區。 以下範例會建立並註冊 cq_Analytics.SessionStore 物件。

//Create the session store
if (!CQ_Analytics.MyStore) {
    CQ_Analytics.MyStore = new CQ_Analytics.SessionStore();
    CQ_Analytics.MyStore.STOREKEY = "MYSTORE";
    CQ_Analytics.MyStore.STORENAME = "mystore";
    CQ_Analytics.MyStore.data={};
}
//register the session store
if (CQ_Analytics.ClientContextMgr){
    CQ_Analytics.ClientContextMgr.register(CQ_Analytics.MyStore)
}

為了儲存JSON資料，以下範例會建立並註冊 CQ_Analytics.JSONStore 物件。

if (!CQ_Analytics.myJSONStore) {
    CQ_Analytics.myJSONStore = CQ_Analytics.JSONStore.registerNewInstance("myjsonstore",{});
}

建立內容存放區元件 creating-a-context-store-component

建立內容存放區元件，以在Client Context中呈現工作階段存放區資料。 建立後，您可以將內容存放區元件拖曳到Client Context上，以從工作階段存放區轉譯資料。 內容存放區元件包含下列專案：

擴充提供的內容存放區元件 extending-the-provided-context-store-components

AEM提供您可以擴充的genericstore和genericstoreproperties內容存放區元件。 存放區資料的結構會決定您要擴展的元件：

在Sidekick中設定外觀 configuring-the-appearance-in-sidekick

編輯Client Context時，內容存放區元件會以Sidekick顯示。 與所有元件一樣， componentGroup 和 jcr:title 使用者端內容元件的屬性會決定元件的群組和名稱。

所有具有 componentGroup 屬性值 Client Context 預設會以Sidekick顯示。 如果您對 componentGroup 屬性，您必須使用設計模式手動將元件新增到Sidekick。

內容存放區元件例項 context-store-component-instances

將前後關聯存放區元件新增至Client Context時，會在下方建立代表元件例項的節點 /etc/clientcontext/default/content/jcr:content/stores. 此節點包含使用元件的編輯對話方塊設定的屬性值。

初始化Client Context時，會處理這些節點。

正在初始化關聯的工作階段存放區 initializing-the-associated-session-store

將init.js.jsp檔案新增至您的元件，以產生JavaScript程式碼，此程式碼會初始化您的內容存放區元件使用的工作階段存放區。 例如，使用初始化指令碼來擷取元件的設定屬性，並使用它們來填入工作階段存放區。

當在製作和發佈執行個體的頁面載入上初始化使用者端內容時，產生的JavaScript會新增到頁面中。 此JSP會在載入及轉譯內容存放區元件執行個體之前執行。

程式碼必須將檔案的mime型別設為 text/javascript，或不執行。

下列程式會建立init.js.jsp指令碼檔案，並新增設定正確mime型別的程式碼。 執行存放區初始化的程式碼會接著執行。

轉譯genericstoreproperties元件的工作階段存放區資料 rendering-session-store-data-for-genericstoreproperties-components

使用一致的格式在Client Context中顯示工作階段存放區資料。

顯示屬性資料 displaying-property-data

個人化Taglib提供 personalization:storePropertyTag 標籤，用來顯示工作階段存放區中屬性的值。 若要使用標籤，請在JSP檔案中加入下列程式碼行：

<%@taglib prefix="personalization" uri="https://www.day.com/taglibs/cq/personalization/1.0" %>

標籤的格式如下：

<personalization:storePropertyTag propertyName="property_name" store="session_store_name"/>

此 propertyName attribute是要顯示的存放區屬性的名稱。 此 store attribute是註冊存放區的名稱。 以下範例標籤顯示 authorizableId 的屬性 profile 商店：

<personalization:storePropertyTag propertyName="authorizableId" store="profile"/>

HTML 結構 html-structure

personalization.ui使用者端程式庫資料夾(https://experienceleague.adobe.com/etc/clientlibs/foundation/personalization/ui/themes/default?lang=zh-Hant)提供Client Context用來設定HTML程式碼格式的CSS樣式。 下列程式碼說明用於顯示存放區資料的建議結構：

<div class="cq-cc-store">
   <div class="cq-cc-thumbnail">
      <div class="cq-cc-store-property">
           <!-- personalization:storePropertyTag for the store thumbnail image goes here -->
      </div>
   </div>
   <div class="cq-cc-content">
       <div class="cq-cc-store-property cq-cc-store-property-level0">
           <!-- personalization:storePropertyTag for a store property goes here -->
       </div>
       <div class="cq-cc-store-property cq-cc-store-property-level1">
           <!-- personalization:storePropertyTag for a store property goes here -->
       </div>
       <div class="cq-cc-store-property cq-cc-store-property-level2">
           <!-- personalization:storePropertyTag for a store property goes here -->
       </div>
       <div class="cq-cc-store-property cq-cc-store-property-level3">
           <!-- personalization:storePropertyTag for a store property goes here -->
       </div>
   </div>
   <div class="cq-cc-clear"></div>
</div>

此 /libs/cq/personalization/components/contextstores/profiledata 內容存放區元件使用此結構來顯示設定檔工作階段存放區的資料。 此 cq-cc-thumbnail class放置縮圖影像。 此 cq-cc-store-property-level*x* 類別會格式化英數字元資料：

呈現一般存放區元件的工作階段存放區資料 rendering-session-store-data-for-genericstore-components

若要使用genericstore元件呈現存放區資料，您必須執行下列動作：

識別一般存放區工作階段存放區 identifying-the-genericstore-session-store

個人化Taglib提供 personalization:storePropertyTag 標籤，用來顯示工作階段存放區中屬性的值。 若要使用標籤，請在JSP檔案中加入下列程式碼行：

<%@taglib prefix="personalization" uri="https://www.day.com/taglibs/cq/personalization/1.0" %>

標籤的格式如下：

<personalization:storeRendererTag store="store_name"/>

實作工作階段存放區轉譯器方法 implementing-the-session-store-renderer-method

您的工作階段存放區需要每當必須轉譯元件時都呼叫的「轉譯器」方法。 使用兩個引數呼叫轉譯器函式：

與工作階段存放區互動 interacting-with-session-stores

使用JavaScript與工作階段存放區互動。

存取工作階段存放區 accessing-session-stores

取得工作階段存放區物件，以讀取或寫入資料至存放區。 CQ_Analytics.ClientContextMgr 根據商店名稱提供對商店的存取權。 取得後，請使用 cq_Analytics.SessionStore 或 CQ_Analytics.PersistedSessionStore 以與存放區資料互動。

下列範例會取得 profile 儲存，然後擷取 formattedName 屬性。

function getName(){
   var profilestore = CQ_Analytics.ClientContextMgr.getRegisteredStore("profile");
   if(profilestore){
      return profilestore.getProperty("formattedName", false);
   } else {
      return null;
   }
}

建立監聽器以回應工作階段存放區更新 creating-a-listener-to-react-to-a-session-store-update

工作階段會儲存引發事件，因此可以根據這些事件新增接聽程式和觸發事件。

工作階段存放區建立在 Observable 模式。 它們會擴展 CQ_Analytics.Observable 可提供 [addListener](/docs/experience-manager-65/content/implementing/developing/personlization/client-context/ccjsapi.md#addlistener-event-fct-scope) 方法。

下列範例會將監聽器新增至 update 的事件 profile 工作階段存放區。

var profileStore = ClientContextMgr.getRegisteredStore("profile");
if( profileStore ) {
  //callback execution context
  var executionContext = this;

  //add "update" event listener to store
  profileStore.addListener("update",function(store, property) {
    //do something on store update

  },executionContext);
}

正在檢查工作階段存放區是否已定義及初始化 checking-that-a-session-store-is-defined-and-initialized

工作階段存放區必須透過資料載入及初始化，才能使用。 下列因素可能會影響工作階段存放區可用性的時間：

使用 CQ_Analytics.ClientContextUtils 物件的 onStoreRegistered 和 onStoreInitialized 只有在工作階段存放區可用的情況下才存取這些方法。 這些方法可讓您註冊事件接聽程式，這些接聽程式會對工作階段註冊和初始化事件做出反應。

以下範例使用 onStoreRegistered 的事件 profile 工作階段存放區。 註冊存放區時，監聽器會新增至 update 工作階段存放區的事件。 更新存放區時， <div class="welcome"> 頁面上的元素會以來自以下專案的名稱更新： profile 商店。

//listen for the store registration
CQ_Analytics.ClientContextUtils.onStoreRegistered("profile", listen);

//listen for the store's update event
function listen(){
 var profilestore = CQ_Analytics.ClientContextMgr.getRegisteredStore("profile");
    profilestore.addListener("update",insertName);
}

//insert the welcome message
function insertName(){
 $("div.welcome").text("Welcome "+getName());
}

//obtain the name from the profile store
function getName(){
 var profilestore = CQ_Analytics.ClientContextMgr.getRegisteredStore("profile");
 if(profilestore){
  return profilestore.getProperty("formattedName", false);
    } else {
        return null;
    }
}

從sessionpersistence Cookie排除屬性 excluding-a-property-from-the-sessionpersistence-cookie

若要防止屬性 PersistedSessionStore 不持續存在(即將其從 sessionpersistence cookie)，將屬性新增到持續工作階段存放區的非持續屬性清單中。

另請參閱 [CQ_Analytics.PersistedSessionStore.setNonPersisted(propertyName)](/docs/experience-manager-65/content/implementing/developing/personlization/client-context/ccjsapi.md#setnonpersisted-name)

CQ_Analytics.ClientContextUtils.onStoreRegistered("surferinfo", function(store) {
  //this will exclude the browser, OS and resolution properties of the surferinfo session store from the
  store.setNonPersisted("browser");
  store.setNonPersisted("OS");
  store.setNonPersisted("resolution");
});

設定裝置滑桿 configuring-the-device-slider

條件 conditions

目前頁面必須具有對應的行動頁面；只有在頁面有設定行動轉出設定( rolloutconfig.path.toLowerCase 包含 mobile)。

設定 configuration

從案頭頁面切換至同等行動裝置頁面時：

例如：

window.CQMobileSlider["geometrixx-outdoors"] = {
  //CSS used by desktop that need to be removed when mobile
  DESKTOP_CSS: [
    "/etc/designs/${app}/clientlibs_desktop_v1.css"
  ],

  //CSS used by mobile that need to be removed when desktop
  MOBILE_CSS: [
    "/etc/designs/${app}/clientlibs_mobile_v1.css"
  ],

  //id of the content that needs to be removed when mobile
  DESKTOP_MAIN_ID: "main",

  //id of the content that needs to be removed when desktop
  MOBILE_MAIN_ID: "main",

  //body classes used by desktop that need to be removed when mobile
  DESKTOP_BODY_CLASS: [
    "page"
  ],

  //body classes used by mobile that need to be removed when desktop
  MOBILE_BODY_CLASS: [
    "page-mobile"
  ]
};

範例：建立自訂內容存放區元件 example-creating-a-custom-context-store-component

在此範例中，您可以建立內容存放區元件，該元件會從外部服務擷取資料，並將其儲存在工作階段存放區中：

新增地理位置元件 add-the-geoloc-component

建立CQ應用程式並新增地理位置元件。

建立地理位置編輯對話方塊 create-the-geoloc-edit-dialog

內容存放區元件需要編輯對話方塊。 地理位置編輯對話方塊包含靜態訊息，指出沒有可設定的屬性。

建立初始化指令碼 create-the-initialization-script

將init.js.jsp檔案新增至geoloc元件，並使用它來建立工作階段存放區、擷取位置資料，並將其新增至存放區。

當頁面載入Client Context時，會執行init.js.jsp檔案。 到時候，Client Context JavaScript API已載入並可供您的指令碼使用。

轉譯Geoloc工作階段存放區資料 render-the-geoloc-session-store-data

將程式碼新增至geoloc元件的JSP檔案，以在Client Context中呈現存放區資料。

將元件新增至Client Context add-the-component-to-client-context

將位置存放區元件新增至使用者端內容，以便在頁面載入時進行初始化。

請參閱使用者端內容中的位置資訊 see-the-location-information-in-client-context

以編輯模式開啟「Geometrixx Outdoors」首頁，然後開啟「使用者端內容」以檢視「位置存放區」元件的資料。

建立自訂使用者端內容 creating-a-customized-client-context

若要建立第二個使用者端內容，請複製分支：

/etc/clientcontext/default

若要使用自訂的使用者端內容，請編輯屬性
path
使用者端內容元件的設計樣式中（如頁面範本中所包含）。 例如，作為的標準位置：
/libs/cq/personalization/components/clientcontext/design_dialog/items/path