用戶端內容已由觸控UI中的ContextHub取代。 如需詳細資訊,請參閱相關檔案。
「用戶端內容」代表動態組合的使用者資料集合。 您可以使用資料來判斷在特定情況(內容定位)下要在網頁上顯示的內容。 此資料也可用於網站分析,以及頁面上的任何javascript。
Client Context主要包含下列方面:
若要建立獨立作業存放區並將其新增至「用戶端內容」,或建立系結至「內容存放區」元件的作業存放區。 AEM會安裝數個您可立即使用的Context Store元件。 您可以將這些元件當做元件的基礎。
如需有關開啟「用戶端內容」、設定其顯示的資訊以及模擬使用者體驗的詳細資訊,請參閱「用戶端內容」。
「用戶端內容」包含包含使用者資料的各種作業儲存區。 儲存來自下列來源的資料:
Client Context架構提供javascript API,您可用來與作業存放區互動,以讀取和寫入使用者資料,以及監聽和回應儲存事件。 您也可以針對您用於內容定位或其他目的的使用者資料建立工作階段儲存。
會話儲存資料仍保留在客戶端上。 客戶端上下文不會將資料寫回伺服器。 若要傳送資料至伺服器,請使用表單或開發自訂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"
}
作業存放區可跨瀏覽器作業持續存留,或僅適用於建立作業的瀏覽器作業。
商店永續性使用瀏覽器儲存或Cookie(SessionPersistence
Cookie)。 瀏覽器儲存空間更常見。
當瀏覽器關閉並重新開啟時,作業存放區可載入來自持續存放區的值。 然後需要清除瀏覽器快取,才能移除舊值。
上下文儲存元件是可新增至「用戶端內容」的AEM元件。 通常,上下文儲存元件顯示來自與其關聯的會話儲存的資料。 但是,上下文儲存元件顯示的資訊不限於會話儲存資料。
上下文商店元件可包含下列項目:
有關可添加到上下文儲存庫的已安裝的上下文儲存庫元件的說明,請參閱可用客戶端上下文元件。
「頁面資料」不再以預設元件的形式出現在用戶端內容中。 如有需要,您可以編輯用戶端內容、新增一般商店屬性元件,然後設定此元件,將商店定義為pagedata
。
描述檔資訊也用於傳送目標內容。
將「用戶端內容」元件加入網頁的正文區段,以啟用「用戶端內容」。 「客戶端上下文」元件節點的路徑為/libs/cq/personalization/components/clientcontext
。 要包含該元件,請將以下代碼添加到頁面元件的JSP檔案中,該檔案位於頁面的body
元素的正下方:
<cq:include path="clientcontext" resourceType="cq/personalization/components/clientcontext"/>
clientcontext元件會使頁面載入實作「用戶端內容」的用戶端程式庫。
用戶端內容UI僅適用於作者例項。
若要擴充用戶端內容,請建立作業存放區並選擇性地顯示儲存資料:
如果您有(或建立)可提供資料的JSONP
服務,您只需使用JSONP
內容儲存元件並將它對應至JSONP服務。 這將處理會話儲存。
為需要添加到客戶端上下文並從中檢索的資料建立會話儲存。 通常,您使用以下過程建立會話儲存:
建立具有categories
屬性值personalization.stores.kernel
的客戶端庫資料夾。 Client Context會自動載入此類別的用戶端程式庫。
配置客戶端庫資料夾,使其與personalization.core.kernel
客戶端庫資料夾相依。 personalization.core.kernel
用戶端程式庫提供用戶端內容javascript API。
新增建立和初始化作業存放區的javascript。
將javascript包含在personalization.stores.kernel客戶程式庫中,會在載入Client Context架構時建立商店。
如果您要建立作為內容儲存元件一部分的作業儲存區,則可以選擇將javascript置於元件的init.js.jsp檔案中。 在這種情況下,只有將元件添加到「客戶端上下文」中時,才會建立會話儲存。
作業存放區會在瀏覽器作業期間建立並可用,或保存在瀏覽器儲存區或Cookie中。 Client Context javascript API定義了數個表示兩種資料儲存類型的類別:
CQ_Analytics.SessionStore
:這些物件僅位於頁面DOM中。資料會建立並保存在頁面的存留期間。CQ_Analytics.PerstistedSessionStore
:這些物件位於頁面DOM中,並會持續存在瀏覽器儲存或Cookie中。資料可跨頁和跨使用者作業使用。API也提供這些類別的擴充功能,這些類別專門用來儲存JSON資料或JSONP資料:
用戶端程式庫資料夾的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",{});
}
建立內容儲存元件,以在「用戶端內容」中呈現工作階段儲存資料。 建立後,您可將內容存放區元件拖曳至「用戶端內容」,以從作業存放區轉譯資料。 上下文商店元件包含下列項目:
AEM提供一般商店和一般商店屬性上下文商店元件,您可加以擴充。 儲存資料的結構決定了擴展的元件:
屬性——值對:擴展GenericStoreProperties
元件。 此元件會自動呈現屬性值對的儲存區。 提供數個互動點:
prolog.jsp
和 epilog.jsp
:元件互動功能,可讓您在元件轉換之前或之後新增伺服器端邏輯。複雜資料:擴展GenericStore
元件。 然後,您的作業商店將需要「轉譯器」方法,每次需要轉譯元件時都會呼叫此方法。 轉換程式函式是使用兩個參數來呼叫:
@param {String} store
要演算的商店
@param {String} divId
必須呈現商店的div的ID。
所有客戶端上下文元件都是通用儲存或通用儲存屬性元件的擴展。 在/libs/cq/personalization/components/contextstores
資料夾中安裝了幾個範例。
編輯「用戶端內容」時,內容儲存元件會顯示在Sidekick中。 與所有元件一樣,客戶端上下文元件的componentGroup
和jcr:title
屬性確定元件的組和名稱。
預設情況下,componentGroup
屬性值Client Context
的所有元件都顯示在Sidekick中。 如果您對componentGroup
屬性使用不同的值,則必須使用「設計」模式手動將元件添加到Sidekick。
將上下文儲存元件添加到「客戶端上下文」時,將在/etc/clientcontext/default/content/jcr:content/stores
下建立代表元件實例的節點。 此節點包含使用元件的編輯對話框配置的屬性值。
初始化「客戶端上下文」時,會處理這些節點。
將init.js.jsp檔案新增至元件,以產生Javascript程式碼,以初始化上下文儲存區元件所使用的工作階段儲存區。 例如,使用初始化指令碼檢索元件的配置屬性,並使用這些屬性填充會話儲存。
當在作者和發佈例項的頁面載入時初始化「用戶端內容」時,產生的Javascript會新增至頁面。 此JSP在載入和呈現上下文儲存元件實例之前執行。
代碼必須將檔案的MIME類型設定為text/javascript
,否則不會執行。
init.js.jsp指令碼會在作者和發佈例項上執行,但前提是上下文儲存元件已新增至用戶端內容。
以下過程建立init.js.jsp指令碼檔案並添加設定正確MIME類型的代碼。 執行儲存初始化的代碼將遵循。
按一下右鍵上下文儲存元件節點,然後按一下「建立」(Create)>「建立檔案」(Create File)。
在「Name(名稱)」欄位中,鍵入init.js.jsp
,然後按一下「OK(確定)」。
在頁面頂端,新增下列程式碼,然後按一下「全部儲存」。
<%@page contentType="text/javascript" %>
使用一致的格式,在「用戶端內容」中顯示工作階段儲存資料。
個人化標籤庫提供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
屬性是要顯示之商店屬性的名稱。 store
屬性是註冊商店的名稱。 下列範例標籤顯示profile
商店的authorizableId
屬性值:
<personalization:storePropertyTag propertyName="authorizableId" store="profile"/>
personalization.ui用戶端資料庫檔案夾(/etc/clientlibs/foundation/personalization/ui/themes/default?lang=zh-Hant)提供「用戶端內容」用來設定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
類別會放置縮圖影像。 cq-cc-store-property-level*x*
類別會格式化英數字元資料:
若要使用一般商店元件來轉換商店資料,您必須:
個人化標籤庫提供personalization:storePropertyTag
標籤,顯示作業商店中屬性的值。 若要使用標籤,請在JSP檔案中加入下列程式碼行:
<%@taglib prefix="personalization" uri="https://www.day.com/taglibs/cq/personalization/1.0" %>
標籤具有下列格式:
<personalization:storeRendererTag store="store_name"/>
然後,您的作業商店將需要「轉譯器」方法,每次需要轉譯元件時都會呼叫此方法。 轉換程式函式是使用兩個參數來呼叫:
@param {String} store
要演算的商店
@param {String} divId
必須呈現商店的div的ID。
使用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
方法。
以下示例向profile
會話儲存的update
事件添加偵聽器。
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);
}
會話儲存在載入並用資料初始化之前不可用。 下列因素可能會影響作業存放區可用性的時間:
使用CQ_Analytics.ClientContextUtils
物件的onStoreRegistered
和onStoreInitialized
方法,僅在會話儲存可用時才可存取這些儲存。 這些方法可讓您註冊回應作業註冊和初始化事件的事件接聽程式。
如果您依賴其他商店,則需要迎合從未註冊商店的情況。
以下示例使用profile
會話儲存的onStoreRegistered
事件。 在註冊儲存時,會向會話儲存的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;
}
}
若要防止PersistedSessionStore
的屬性持續存在(亦即從sessionpersistence
Cookie中排除它),請將屬性新增至持續作業商店的非持續屬性清單。
請參閱CQ_Analytics.PersistedSessionStore.setNonPersisted(propertyName)
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");
});
目前頁面必須有對應的行動頁面;這只有在頁面有LiveCopy設定為行動轉出設定(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"
]
};
在此示例中,您建立上下文儲存元件,該元件從外部服務中檢索資料並將其儲存在會話儲存中:
CQ_Analytics.JSONPStore
javascript物件初始化商店。建立CQ應用程式並新增geoloc元件。
在您的網頁瀏覽器中開啟CRXDE Lite(http://localhost:4502/crx/de)。
按一下右鍵/apps
資料夾,然後按一下「建立」>「建立資料夾」。 指定myapp
的名稱,然後按一下「確定」。
同樣地,在myapp
下方,建立名為contextstores
的資料夾。"
按一下右鍵/apps/myapp/contextstores
資料夾,然後按一下「建立」>「建立元件」。 指定下列屬性值,然後按一下「下一步」:
cq/personalization/components/contextstores/genericstoreproperties
在「建立元件」對話方塊中,按一下每頁的「下一步」,直到啟用「確定」按鈕,然後按一下「確定」。
按一下「全部儲存」。
上下文儲存區元件需要編輯對話方塊。 geoloc edit對話框將包含一條靜態消息,指出沒有要配置的屬性。
按一下右鍵/libs/cq/personalization/components/contextstores/genericstoreproperties/dialog
節點,然後按一下「複製」。
按一下右鍵/apps/myapp/contextstores/geoloc
節點,然後按一下「貼上」。
刪除/apps/myapp/contextstores/geoloc/dialog/items/items/tab1/items節點下的所有子節點:
按一下右鍵/apps/myapp/contextstores/geoloc/dialog/items/items/tab1/items
節點,然後按一下「建立」>「建立節點」。 指定下列屬性值,然後按一下「確定」:
將以下屬性添加到節點:
名稱 | 類型 | 值 |
---|---|---|
cls | 字串 | x-form-fieldset-description |
文字 | 字串 | geoloc元件不需要配置。 |
xtype | 字串 | 靜態 |
按一下「全部儲存」。
將init.js.jsp檔案新增至geoloc元件,並使用它來建立作業存放區、擷取位置資料,並將它新增至存放區。
init.js.jsp檔案會在頁面載入用戶端內容時執行。 目前,用戶端內容javascript API已載入,可供您的指令碼使用。
按一下右鍵/apps/myapp/contextstores/geoloc
節點,然後按一下建立->建立檔案。 指定init.js.jsp的名稱,然後按一下「確定」。
將下列程式碼新增至頁面頂端,然後按一下「全部儲存」。
<%@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元件的JSP檔案中,以在Client Context中呈現儲存資料。
在CRXDE Lite中,開啟/apps/myapp/contextstores/geoloc/geoloc.jsp
檔案。
在存根程式碼下方新增下列HTML程式碼:
<%@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>
按一下「全部儲存」。
將Location Store元件新增至Client Context,以便在頁面載入時初始化它。
在作者例項(http://localhost:4502/content/geometrixx-outdoors/en.html)上開啟Geometrixx Outdoors首頁。
按一下Ctrl-Alt-c(windows)或control-option-c(Mac)以開啟「用戶端內容」。
按一下「用戶端內容」頂端的編輯圖示,以開啟「用戶端內容設計器」。
將Location Store元件拖曳至Client Context。
以編輯模式開啟Geometrixx Outdoors首頁,然後開啟Client Context以檢視Location Store元件的資料。
要建立第二個客戶機上下文,您需要複製分支:
/etc/clientcontext/default
子資料夾:
/content
將包含自訂用戶端內容的內容。
資料夾:
/contextstores
允許您為上下文儲存庫定義不同的配置。
若要使用自訂的用戶端內容,請編輯屬性
path
在客戶端上下文元件的設計樣式中,如頁面模板中所示。 例如,作為以下的標準位置:
/libs/cq/personalization/components/clientcontext/design_dialog/items/path