ContextHub已取代客户端上下文。 请参阅 相关文档 以了解详细信息。
Client Context表示动态组合的用户数据集合。 您可以使用数据来确定在给定情况(内容定位)下要在网页上显示的内容。 这些数据还可用于网站分析以及页面上的任何JavaScript。
Client Context主要包括以下几个方面:
创建独立会话存储并将其添加到Client Context,或创建与上下文存储组件绑定的会话存储。 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)。 浏览器存储更常见。
当浏览器关闭并重新打开时,可以使用来自持久存储的值加载会话存储。 需要清除浏览器缓存才能删除旧值。
上下文存储组件是可以添加到客户端上下文的CQ组件。 通常,上下文存储组件显示与其关联的会话存储中的数据。 但是,上下文存储组件显示的信息并不限于会话存储数据。
上下文存储组件可以包括以下项目:
有关已安装的上下文存储组件(可添加到上下文存储)的说明,请参阅 可用的客户端上下文组件.
页面数据不再作为默认组件存在于客户端上下文中。 如果需要,您可以通过编辑客户端上下文并添加 常规存储属性 组件,然后配置此项以定义 存储 作为 pagedata
.
用户档案信息还用于投放 目标内容.
将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
客户端库提供客户端上下文JavaScript API。
添加用于创建和初始化会话存储的JavaScript。
将JavaScript包含在personalization.stores.kernel客户端库中,会导致在加载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-Hans#cq-analytics-sessionstore)
:这些对象仅驻留在页面DOM中。 数据在页面的生命周期内创建和保留。 [CQ_Analytics.PerstistedSessionStore](/docs/experience-manager-65/developing/personlization/client-context/ccjsapi.html?lang=zh-Hans#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
组件。 您的会话存储需要每当必须呈现组件时都调用的“renderer”方法。 使用以下两个参数调用渲染器函数:
@param {String} store
要呈现的存储
@param {String} divId
必须将存储呈现到的div的ID。
所有客户端上下文组件都是通用存储或通用存储属性组件的扩展。 中安装了几个示例 /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脚本在创作和发布实例上运行,但前提是已将上下文存储组件添加到客户端上下文。
以下过程创建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-Hans)提供了客户端上下文用于设置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*
类设置字母数字数据的格式:
要使用genericstore组件呈现存储数据,您必须执行以下操作:
个性化taglib提供 personalization:storePropertyTag
标记,用于显示会话存储中的属性值。 要使用标记,请在JSP文件中包含以下代码行:
<%@taglib prefix="personalization" uri="https://www.day.com/taglibs/cq/personalization/1.0" %>
标记具有以下格式:
<personalization:storeRendererTag store="store_name"/>
您的会话存储需要每当必须呈现组件时都调用的“renderer”方法。 使用以下两个参数调用渲染器函数:
使用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 和 onStoreInitialled 方法仅在会话存储可用时才进行访问。 这些方法使您能够注册对会话注册和初始化事件做出反应的事件侦听器。
如果您依赖于其他商店,则必须满足从未注册该商店的情况。
以下示例使用 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
从persistent(即从 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应用程序并添加geoloc组件。
在Web浏览器中打开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组件中,并使用它来创建会话存储、检索位置数据并将其添加到存储中。
init.js.jsp文件在页面加载Client Context时执行。 到那时,将加载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代码:
<%@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)以打开客户端上下文。
单击Client Context顶部的编辑图标以打开Client Context Designer。
将位置存储组件拖动到客户端上下文。
在编辑模式下打开Geometrixx Outdoors主页,然后打开Client Context以查看位置存储组件中的数据。
要创建第二个客户端上下文,请复制分支:
/etc/clientcontext/default
子文件夹:
/content
包含自定义客户端上下文的内容。
文件夹:
/contextstores
允许您为上下文存储定义不同的配置。
要使用自定义的客户端上下文,请编辑属性
path
客户端上下文组件的设计样式中(如页面模板中所示)。 例如,作为标准位置:
/libs/cq/personalization/components/clientcontext/design_dialog/items/path