ContextHub已取代使用者端內容。 請參閱 相關檔案 以取得詳細資訊。
Client Context代表動態組合的使用者資料集合。 您可以使用資料來決定在指定情境(內容目標定位)下要在網頁上顯示的內容。 資料也可用於網站分析,以及頁面上的任何JavaScript。
Client Context主要包含下列幾個方面:
建立獨立工作階段存放區並將其新增至Client Context,或建立繫結至Context Store元件的工作階段存放區。 Adobe Experience Manager (AEM)會安裝數個您可以立即使用的內容存放區元件。 您可以使用這些元件作為元件的基礎。
如需有關開啟Client Context、設定其顯示的資訊以及模擬使用者體驗的資訊,請參閱 使用者端內容.
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"
}
工作階段存放區可在各瀏覽器工作階段之間持續儲存,或僅能針對建立該存放區的瀏覽器工作階段持續儲存。
存放區持續性使用瀏覽器儲存空間或Cookie (以 SessionPersistence
Cookie)。 瀏覽器儲存空間較為常見。
當瀏覽器關閉並重新開啟時,工作階段存放區可以載入來自持續存放區的值。 您必須清除瀏覽器快取,才能移除舊值。
內容存放區元件是可新增至Client Context的CQ元件。 通常,內容存放區元件會顯示與其相關聯之工作階段存放區的資料。 不過,前後關聯存放區元件顯示的資訊並不限於工作階段存放區資料。
前後關聯存放區元件可包含下列專案:
如需可新增至前後關聯存放區的已安裝前後關聯存放區元件的說明,請參閱 可用的使用者端內容元件.
頁面資料不再於使用者端內容中作為預設元件。 如有需要,您可以編輯使用者端內容、新增 一般存放區屬性 元件,然後設定以定義 儲存 作為 pagedata
.
設定檔資訊也用於傳遞 目標內容.
將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,請建立工作階段存放區,並選擇顯示存放區資料:
如果您有(或建立) JSONP
可提供資料的服務,只要使用 JSONP
內容存放區元件,並將其對應至JSONP服務。 這會處理工作階段存放區。
針對您必須新增到Client Context以及從中擷取的資料建立工作階段存放區。 一般而言,您會使用以下程式來建立工作階段存放區:
建立具有「 」的使用者端資料庫資料夾 categories
屬性值 personalization.stores.kernel
. Client Context會自動載入此類別的使用者端資料庫。
設定使用者端程式庫資料夾,使其依存於 personalization.core.kernel
使用者端資料庫資料夾。 此 personalization.core.kernel
client library提供Client Context JavaScript API。
新增建立和初始化工作階段存放區的JavaScript。
在personalization.stores.kernel使用者端資料庫中包含JavaScript,會在載入Client Context架構時建立存放區。
如果您要建立工作階段存放區做為內容存放區元件的一部分,您可以將JavaScript放在元件的init.js.jsp檔案中。 在此情況下,只有在將元件新增到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上,以從工作階段存放區轉譯資料。 內容存放區元件包含下列專案:
AEM提供您可以擴充的genericstore和genericstoreproperties內容存放區元件。 存放區資料的結構會決定您要擴展的元件:
屬性值組:擴充 GenericStoreProperties
元件。 此元件會自動轉譯屬性值組的存放區。 提供了幾個互動點:
prolog.jsp
和 epilog.jsp
:元件互動可讓您在元件轉譯之前或之後新增伺服器端邏輯。複雜資料:擴充 GenericStore
元件。 您的工作階段存放區需要每當必須轉譯元件時都呼叫的「轉譯器」方法。 使用兩個引數呼叫轉譯器函式:
@param {String} store
要呈現的存放區
@param {String} divId
必須轉譯存放區的div識別碼。
所有使用者端內容元件都是一般存放區或一般存放區屬性元件的擴充功能。 中安裝了幾個範例 /libs/cq/personalization/components/contextstores
資料夾。
編輯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指令碼會在作者和發佈執行個體上執行,但前提是已將內容存放區元件新增到Client Context。
下列程式會建立init.js.jsp指令碼檔案,並新增設定正確mime型別的程式碼。 執行存放區初始化的程式碼會接著執行。
以滑鼠右鍵按一下前後關聯存放區元件節點,然後按一下「建立>建立檔案」。
在「名稱」欄位中,輸入 init.js.jsp
然後按一下「確定」。
在頁面頂端,新增下列程式碼,然後按一下「儲存全部」 。
<%@page contentType="text/javascript" %>
使用一致的格式在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"/>
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*
類別會格式化英數字元資料:
若要使用genericstore元件呈現存放區資料,您必須執行下列動作:
個人化Taglib提供 personalization:storePropertyTag
標籤,用來顯示工作階段存放區中屬性的值。 若要使用標籤,請在JSP檔案中加入下列程式碼行:
<%@taglib prefix="personalization" uri="https://www.day.com/taglibs/cq/personalization/1.0" %>
標籤的格式如下:
<personalization:storeRendererTag store="store_name"/>
您的工作階段存放區需要每當必須轉譯元件時都呼叫的「轉譯器」方法。 使用兩個引數呼叫轉譯器函式:
使用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);
}
工作階段存放區必須透過資料載入及初始化,才能使用。 下列因素可能會影響工作階段存放區可用性的時間:
使用 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;
}
}
若要防止屬性 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"
]
};
在此範例中,您可以建立內容存放區元件,該元件會從外部服務擷取資料,並將其儲存在工作階段存放區中:
建立CQ應用程式並新增地理位置元件。
在網頁瀏覽器中開啟CRXDE Lite(https://localhost:4502/crx/de)。
用滑鼠右鍵按一下 /apps
資料夾,然後按一下「建立>建立資料夾」。 指定名稱 myapp
然後按一下「確定」。
同樣地,在下方 myapp
,建立名為的資料夾 contextstores
."
用滑鼠右鍵按一下 /apps/myapp/contextstores
資料夾,然後按一下「建立」>「建立元件」。 指定下列屬性值,然後按下一步:
在「建立元件」對話方塊中,按一下每一頁的「下一步」,直到啟用「確定」按鈕為止,然後按一下「確定」。
按一下「儲存全部」。
內容存放區元件需要編輯對話方塊。 地理位置編輯對話方塊包含靜態訊息,指出沒有可設定的屬性。
在 /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 |
text | 字串 | geoloc元件不需要設定。 |
xtype | 字串 | 靜態 |
按一下「儲存全部」。
將init.js.jsp檔案新增至geoloc元件,並使用它來建立工作階段存放區、擷取位置資料,並將其新增至存放區。
當頁面載入Client Context時,會執行init.js.jsp檔案。 到時候,Client Context 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程式碼新增至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>
按一下「儲存全部」。
將位置存放區元件新增至使用者端內容,以便在頁面載入時進行初始化。
開啟作者執行個體上的Geometrixx Outdoors首頁(https://localhost:4502/content/geometrixx-outdoors/en.html)。
按一下Ctrl-Alt-c (windows)或control-option-c (Mac)開啟「使用者端內容」。
按一下「使用者端內容」頂端的編輯圖示,開啟「使用者端內容設計工具」。
將「位置存放區」元件拖曳至「使用者端內容」。
以編輯模式開啟「Geometrixx Outdoors」首頁,然後開啟「使用者端內容」以檢視「位置存放區」元件的資料。
若要建立第二個使用者端內容,請複製分支:
/etc/clientcontext/default
子資料夾:
/content
包含自訂使用者端內容的內容。
資料夾:
/contextstores
可讓您為內容存放區定義不同的設定。
若要使用自訂的使用者端內容,請編輯屬性
path
使用者端內容元件的設計樣式中(如頁面範本中所包含)。 例如,作為的標準位置:
/libs/cq/personalization/components/clientcontext/design_dialog/items/path