詳細的使用者端內容

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

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

• 包含使用者資料的工作階段存放區。
• 顯示使用者資料並提供模擬使用者體驗工具的UI。
• A JavaScript API 用於與工作階段存放區互動。

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

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

工作階段存放區

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

• 使用者端網頁瀏覽器。
• 伺服器(請參閱 JSONP存放區 儲存來自協力廠商的資訊)

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

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

內容存放區元件

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

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

• 在Client Context中定義外觀的JSP指令碼。
• 以Sidekick列出元件的屬性。
• 用於設定元件例證的「編輯」對話方塊。
• 初始化工作階段存放區的JavaScript。

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

目標內容傳送

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

新增使用者端內容至頁面

將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的使用者端資料庫。

• Client Context JavaScript API。
• 支援工作階段儲存、事件管理等的Client Context架構。
• 已定義的區段。
• 針對已新增至Client Context的每個內容存放區元件產生的init.js指令碼。
• （僅限作者執行個體） Client Context UI。

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

延伸Client Context

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

• 針對您進行內容鎖定和網頁分析所需的使用者資料建立工作階段存放區。
• 建立內容存放區元件，讓管理員能夠設定關聯的工作階段存放區，並在Client Context中顯示存放區資料以進行測試。

建立工作階段存放區

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

1. 建立具有「 」的使用者端資料庫資料夾 categories 屬性值 personalization.stores.kernel. Client Context會自動載入此類別的使用者端資料庫。

2. 設定使用者端程式庫資料夾，使其依存於 personalization.core.kernel 使用者端資料庫資料夾。 此 personalization.core.kernel client library提供Client Context JavaScript API。

3. 新增建立和初始化工作階段存放區的JavaScript。

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

工作階段存放區型別

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

• [CQ_Analytics.SessionStore](/docs/experience-manager-65/developing/personlization/client-context/ccjsapi.html?lang=zh-Hant#cq-analytics-sessionstore)：這些物件僅存在於頁面DOM中。 資料會在頁面存留期中建立並持續存在。
• [CQ_Analytics.PerstistedSessionStore](/docs/experience-manager-65/developing/personlization/client-context/ccjsapi.html?lang=zh-Hant#cq-analytics-persistedsessionstore)：這些物件位於頁面DOM中，並持續存在於瀏覽器儲存空間或Cookie中。 資料可用於各個頁面和各個使用者工作階段。

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

• 僅工作階段物件： CQ_Analytics.JSONStore 和 CQ_Analytics.JSONPStore.

• 持續物件： CQ_Analytics.PersistedJSONStore 和 CQ_Analytics.PersistedJSONPStore.

建立工作階段存放區物件

使用者端程式庫資料夾的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",{});
}

建立內容存放區元件

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

• 呈現資料的JSP指令碼。
• 編輯對話方塊。
• 用於初始化工作階段存放區的JSP指令碼。
• （選用）建立工作階段存放區的使用者端資料庫資料夾。 如果元件使用現有工作階段存放區，則不需要包含使用者端程式庫資料夾。

擴充提供的內容存放區元件

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

• 屬性值組：擴充 GenericStoreProperties 元件。 此元件會自動轉譯屬性值組的存放區。 提供了幾個互動點：

  • prolog.jsp 和 epilog.jsp：元件互動可讓您在元件轉譯之前或之後新增伺服器端邏輯。

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

  • @param {String} store
    要呈現的存放區

  • @param {String} divId
    必須轉譯存放區的div識別碼。

在Sidekick中設定外觀

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

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

內容存放區元件例項

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

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

正在初始化關聯的工作階段存放區

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

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

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

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

1. 以滑鼠右鍵按一下前後關聯存放區元件節點，然後按一下「建立>建立檔案」。

2. 在「名稱」欄位中，輸入 init.js.jsp 然後按一下「確定」。

3. 在頁面頂端，新增下列程式碼，然後按一下「儲存全部」 。

   <%@page contentType="text/javascript" %>
   

轉譯genericstoreproperties元件的工作階段存放區資料

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

顯示屬性資料

個人化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結構

personalization.ui使用者端程式庫資料夾(/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* 類別會格式化英數字元資料：

• level0、level1和level2會垂直分佈，並使用白色字型。
• level3和任何其他層級會水準分佈，並使用具有較暗背景的白色字型。

呈現一般存放區元件的工作階段存放區資料

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

• 將personalization：storeRendererTag標籤新增至元件JSP指令碼，以識別工作階段存放區的名稱。
• 在工作階段存放區類別上實作轉譯器方法。

識別一般存放區工作階段存放區

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

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

標籤的格式如下：

<personalization:storeRendererTag store="store_name"/>

實作工作階段存放區轉譯器方法

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

• @param {String} 存放要呈現的存放區
• @param {String} 必須轉譯存放區之div的divId。

與工作階段存放區互動

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

存取工作階段存放區

取得工作階段存放區物件，以讀取或寫入資料至存放區。 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;
   }
}

建立監聽器以回應工作階段存放區更新

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

工作階段存放區建立在 Observable 模式。 它們會擴展 CQ_Analytics.Observable 可提供 [addListener](/docs/experience-manager-65/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);
}

正在檢查工作階段存放區是否已定義及初始化

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

• 頁面載入中
• JavaScript載入
• JavaScript執行時間
• XHR要求的回應時間
• 工作階段存放區的動態變更

使用 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排除屬性

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

請參閱 [CQ_Analytics.PersistedSessionStore.setNonPersisted(propertyName)](/docs/experience-manager-65/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");
});

設定裝置滑桿

條件

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

設定

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

• 已載入行動頁面的DOM。

• 主要 div （必要）會擷取並插入目前的案頭頁面。

• 載入的CSS和內文類別必須手動設定。

例如：

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

範例：建立自訂內容存放區元件

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

• 擴充genericstoreproperties元件。
• 使用CQ_Analytics.JSONPStore JavaScript物件初始化存放區。
• 呼叫JSONP服務以擷取資料並將其新增至存放區。
• 在Client Context中呈現資料。

新增地理位置元件

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

1. 在網頁瀏覽器中開啟CRXDE Lite(https://localhost:4502/crx/de)。

2. 用滑鼠右鍵按一下 /apps 資料夾，然後按一下「建立>建立資料夾」。 指定名稱 myapp 然後按一下「確定」。

3. 同樣地，在下方 myapp，建立名為的資料夾 contextstores."

4. 用滑鼠右鍵按一下 /apps/myapp/contextstores 資料夾，然後按一下「建立」>「建立元件」。 指定下列屬性值，然後按下一步：

   • 標籤： geoloc
   • 標題：位置存放區
   • 超級型別：cq/personalization/components/contextstores/genericstoreproperties
   • 群組：使用者端內容

5. 在「建立元件」對話方塊中，按一下每一頁的「下一步」，直到啟用「確定」按鈕為止，然後按一下「確定」。

6. 按一下「儲存全部」。

建立地理位置編輯對話方塊

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

1. 在 /libs/cq/personalization/components/contextstores/genericstoreproperties/dialog 節點上按一下右鍵，然後按一下「複製」。

2. 用滑鼠右鍵按一下 /apps/myapp/contextstores/geoloc 節點，然後按一下「貼上」。

3. 刪除/apps/myapp/contextstores/geoloc/dialog/items/items/tab1/items節點下的所有子節點：

   • 儲存
   • 屬性
   • 縮圖

4. 用滑鼠右鍵按一下 /apps/myapp/contextstores/geoloc/dialog/items/items/tab1/items 節點，然後按一下「建立>建立節點」。 指定下列屬性值，然後按一下「確定」：

   • 名稱：靜態
   • 型別： cq：Widget

5. 將下列屬性新增至節點：

   名稱	類型	值
   cls	字串	x-form-fieldset-description
   text	字串	geoloc元件不需要設定。
   xtype	字串	靜態

6. 按一下「儲存全部」。

   

建立初始化指令碼

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

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

1. 以滑鼠右鍵按一下/apps/myapp/contextstores/geoloc節點，然後按一下「建立>建立檔案」。 指定init.js.jsp的名稱，然後按一下「確定」。

2. 將下列程式碼新增至頁面頂端，然後按一下「儲存全部」。

   <%@page contentType="text/javascript;charset=utf-8" %><%
   %><%@include file="/libs/foundation/global.jsp"%><%
   log.info("***** initializing geolocstore ****");
   String store = "locstore";
   String jsonpurl = "https://api.wipmania.com/jsonp?callback=${callback}";
   
   %>
   var locstore = CQ_Analytics.StoreRegistry.getStore("<%= store %>");
   if(!locstore){
    locstore = CQ_Analytics.JSONPStore.registerNewInstance("<%= store %>", "<%= jsonpurl %>",{});
   }
   <% log.info(" ***** done initializing geoloc ************"); %>
   

轉譯Geoloc工作階段存放區資料

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

1. 在CRXDE Lite中，開啟 /apps/myapp/contextstores/geoloc/geoloc.jsp 檔案。

2. 將下列HTML程式碼新增至stub程式碼下方：

   <%@taglib prefix="personalization" uri="https://www.day.com/taglibs/cq/personalization/1.0" %>
   <div class="cq-cc-store">
      <div class="cq-cc-content">
          <div class="cq-cc-store-property cq-cc-store-property-level0">
              Continent: <personalization:storePropertyTag propertyName="address/continent" store="locstore"/>
          </div>
          <div class="cq-cc-store-property cq-cc-store-property-level1">
              Country: <personalization:storePropertyTag propertyName="address/country" store="locstore"/>
          </div>
          <div class="cq-cc-store-property cq-cc-store-property-level2">
              City: <personalization:storePropertyTag propertyName="address/city" store="locstore"/>
          </div>
          <div class="cq-cc-store-property cq-cc-store-property-level3">
              Latitude: <personalization:storePropertyTag propertyName="latitude" store="locstore"/>
          </div>
          <div class="cq-cc-store-property cq-cc-store-property-level4">
              Longitude: <personalization:storePropertyTag propertyName="longitude" store="locstore"/>
          </div>
      </div>
       <div class="cq-cc-clear"></div>
   </div>
   

3. 按一下「儲存全部」。

將元件新增至Client Context

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

1. 開啟作者執行個體上的Geometrixx Outdoors首頁(https://localhost:4502/content/geometrixx-outdoors/en.html)。

2. 按一下Ctrl-Alt-c (windows)或control-option-c (Mac)開啟「使用者端內容」。

3. 按一下「使用者端內容」頂端的編輯圖示，開啟「使用者端內容設計工具」。

   

4. 將「位置存放區」元件拖曳至「使用者端內容」。

請參閱使用者端內容中的位置資訊

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

1. 開啟Geometrixx Outdoors網站的英文頁面。 (https://localhost:4502/content/geometrixx-outdoors/en.html)
2. 若要開啟「使用者端內容」，請按Ctrl-Alt-c (windows)或control-option-c (Mac)。

建立自訂使用者端內容

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

/etc/clientcontext/default

• 子資料夾：
  /content
  包含自訂使用者端內容的內容。

• 資料夾：
  /contextstores
  可讓您為內容存放區定義不同的設定。

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