ClientContext è stato sostituito da ContextHub. Per ulteriori informazioni, consultare la documentazione correlata.
ClientContext rappresenta una raccolta di dati utente assemblata in modo dinamico. Potete utilizzare i dati per determinare il contenuto da visualizzare su una pagina Web in una determinata situazione (targeting del contenuto). I dati sono disponibili anche per l'analisi dei siti Web e per qualsiasi javascript nella pagina.
ClientContext è costituito principalmente dai seguenti aspetti:
Per creare un archivio di sessioni standalone e aggiungerlo a ClientContext oppure creare uno store di sessioni associato a un componente Context Store. AEM installa diversi componenti Context Store che puoi utilizzare immediatamente. Potete utilizzare questi componenti come base per i componenti.
Per informazioni sull'apertura di ClientContext, sulla configurazione delle informazioni visualizzate e sulla simulazione dell'esperienza utente, vedere ClientContext.
ClientContext include diversi store di sessioni contenenti dati utente. I dati dello store provengono dalle origini seguenti:
Il framework ClientContext fornisce un javascript API che potete utilizzare per interagire con gli store di sessioni per leggere e scrivere i dati utente, nonché per ascoltare e reagire agli eventi di store. Potete anche creare store di sessioni per i dati utente da utilizzare per il targeting dei contenuti o per altri scopi.
I dati dell'archivio delle sessioni rimangono sul client. ClientContext non riscrive i dati al server. Per inviare dati al server, utilizzare un modulo o sviluppare JavaScript personalizzato.
Ogni archivio di sessioni è un insieme di coppie proprietà-valore. Lo store di sessioni rappresenta una raccolta di dati (di qualsiasi tipo) il cui significato concettuale può essere deciso dal progettista e/o sviluppatore. Nell'esempio seguente, il codice javascript definisce un oggetto che rappresenta i dati di profilo che potrebbero contenere gli archivi di sessioni:
{
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"
}
Un archivio delle sessioni può essere mantenuto nelle sessioni del browser, oppure può durare solo per la sessione del browser in cui viene creato.
La persistenza dello store utilizza l'archiviazione del browser o i cookie (il cookie SessionPersistence
). La memorizzazione del browser è più comune.
Quando il browser viene chiuso e riaperto, uno store di sessioni può essere caricato con i valori di uno store persistente. La cancellazione della cache del browser è quindi necessaria per rimuovere i vecchi valori.
Un componente per l’archivio di contesto è un componente CQ che può essere aggiunto a ClientContext. In genere, i componenti dell'archivio di contesto visualizzano i dati provenienti da uno store di sessioni a cui sono associati. Tuttavia, le informazioni visualizzate dai componenti dell'archivio di contesto non sono limitate ai dati dell'archivio di sessione.
I componenti dell'archivio di contesto possono includere i seguenti elementi:
Per una descrizione dei componenti Context Store installati che è possibile aggiungere a Context Store, vedere Client Context Components disponibili.
I dati pagina non sono più nel contesto client come componente predefinito. Se necessario, è possibile aggiungere questo componente modificando il contesto client, aggiungendo il componente Proprietà store generiche, quindi configurandolo per definire Store come pagedata
.
Le informazioni sul profilo vengono utilizzate anche per distribuire contenuti mirati.
Includete il componente ClientContext nella sezione body delle pagine Web per attivare ClientContext. Il percorso del nodo del componente ClientContext è /libs/cq/personalization/components/clientcontext
. Per includere il componente, aggiungete il seguente codice al file JSP del componente di pagina, situato appena sotto l'elemento body
della pagina:
<cq:include path="clientcontext" resourceType="cq/personalization/components/clientcontext"/>
Il componente clientcontext fa in modo che la pagina carichi le librerie client che implementano ClientContext.
L'interfaccia utente ClientContext è disponibile solo nell'istanza di creazione.
Per estendere ClientContext, create uno store di sessione ed eventualmente visualizzate i dati dello store:
Se disponete (o create) di un servizio JSONP
in grado di fornire i dati, potete semplicemente utilizzare il componente dell'archivio di contesto JSONP
e mapparlo al servizio JSONP. In questo modo verrà gestito lo store della sessione.
Crea uno store di sessione per i dati da aggiungere e recuperare da ClientContext. In genere, per creare uno store di sessioni si utilizza la procedura seguente:
Creare una cartella libreria client con un valore di proprietà categories
di personalization.stores.kernel
. ClientContext carica automaticamente le librerie client di questa categoria.
Configurate la cartella della libreria client in modo che abbia una dipendenza dalla cartella della libreria client personalization.core.kernel
. La libreria client personalization.core.kernel
fornisce l'API JavaScript ClientContext.
Aggiungete il javascript che crea e inizializza lo store di sessioni.
L'inclusione di javascript nella libreria client personalization.stores.kernel determina la creazione dello store quando viene caricato ClientContext Framework.
Se create uno store di sessione come parte di un componente per l’archivio di contesto, potete in alternativa inserire lo javascript nel file init.js.jsp del componente. In questo caso, lo store di sessione viene creato solo se il componente viene aggiunto a ClientContext.
Gli store di sessione vengono creati e disponibili durante una sessione del browser, oppure vengono memorizzati nell'archivio del browser o nei cookie. L'API JavaScript ClientContext definisce diverse classi che rappresentano entrambi i tipi di archivio dati:
[CQ_Analytics.SessionStore](/docs/experience-manager-65/developing/personlization/client-context/ccjsapi.html?lang=it#cq-analytics-sessionstore)
: Questi oggetti risiedono solo nel DOM della pagina. I dati vengono creati e memorizzati durante il ciclo di vita della pagina. [CQ_Analytics.PerstistedSessionStore](/docs/experience-manager-65/developing/personlization/client-context/ccjsapi.html?lang=it#cq-analytics-persistedsessionstore)
: Questi oggetti risiedono nel DOM della pagina e sono persistenti nell’archiviazione del browser o nei cookie. I dati sono disponibili su più pagine e tra sessioni utente.L'API fornisce inoltre estensioni di queste classi specializzate nella memorizzazione di dati JSON o di dati JSONP:
Oggetti solo sessione: CQ_Analytics.JSONStore e CQ_Analytics.JSONPStore.
Oggetti persistenti: CQ_Analytics.PersistedJSONStore e CQ_Analytics.PersistedJSONPStore.
Il javascript della cartella della libreria client crea e inizializza lo store di sessioni. Lo store sessione deve quindi essere registrato tramite Context Store Manager. Nell'esempio seguente viene creato e registrato un oggetto 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)
}
Per la memorizzazione dei dati JSON, l'esempio seguente crea e registra un oggetto CQ_Analytics.JSONStore.
if (!CQ_Analytics.myJSONStore) {
CQ_Analytics.myJSONStore = CQ_Analytics.JSONStore.registerNewInstance("myjsonstore",{});
}
Create un componente dell'archivio di contesto per eseguire il rendering dei dati dell'archivio di sessione in ClientContext. Una volta creato, potete trascinare il componente dell'archivio di contesto in ClientContext per eseguire il rendering dei dati da uno store di sessione. I componenti dell’archivio di contesto sono costituiti dai seguenti elementi:
AEM fornisce i componenti di archivio contestuale di genericstore e di genericstoreproperties che è possibile estendere. La struttura dei dati dello store determina il componente che si estende:
Coppie proprietà-valore: Estende il componente GenericStoreProperties
. Questo componente esegue automaticamente il rendering degli archivi di coppie proprietà-valore. Sono forniti diversi punti di interazione:
prolog.jsp
e epilog.jsp
: interazione di componente che consente di aggiungere logica lato server prima o dopo il rendering del componente.Dati complessi: Estende il componente GenericStore
. Sarà quindi necessario un metodo "renderer" per lo store di sessioni, che verrà chiamato ogni volta che è necessario eseguire il rendering del componente. La funzione di rendering viene chiamata con due parametri:
@param {String} store
Lo store da eseguire
@param {String} divId
Id del div in cui deve essere eseguito il rendering dello store.
Tutti i componenti ClientContext sono estensioni dei componenti Store generici o Proprietà store generiche. Diversi esempi sono installati nella cartella /libs/cq/personalization/components/contextstores
.
Durante la modifica di ClientContext, i componenti dell'archivio di contesto vengono visualizzati nella barra laterale. Come per tutti i componenti, le proprietà componentGroup
e jcr:title
del componente ClientContext determinano il gruppo e il nome del componente.
Tutti i componenti con un valore di proprietà componentGroup
di Client Context
vengono visualizzati nella barra laterale per impostazione predefinita. Se si utilizza un valore diverso per la proprietà componentGroup
, è necessario aggiungere manualmente il componente alla barra laterale utilizzando la modalità Progettazione.
Quando aggiungete un componente dell'archivio di contesto a ClientContext, un nodo che rappresenta l'istanza del componente viene creato sotto /etc/clientcontext/default/content/jcr:content/stores
. Questo nodo contiene i valori delle proprietà configurati tramite la finestra di dialogo di modifica del componente.
Quando ClientContext viene inizializzato, questi nodi vengono elaborati.
Aggiungete un file init.js.jsp al componente per generare codice JavaScript che inizializza l’archivio di sessioni utilizzato dal componente dell’archivio di contesto. Ad esempio, utilizzare lo script di inizializzazione per recuperare le proprietà di configurazione per il componente e utilizzarle per compilare l'archivio delle sessioni.
Il codice JavaScript generato viene aggiunto alla pagina quando ClientContext viene inizializzato al caricamento della pagina sia nelle istanze di creazione che di pubblicazione. Questo JSP viene eseguito prima che l’istanza del componente dell’archivio di contesto venga caricata ed eseguita.
Il codice deve impostare il tipo mime del file su text/javascript
, altrimenti non viene eseguito.
Lo script init.js.jsp viene eseguito sull'istanza di creazione e pubblicazione, ma solo se il componente dell'archivio di contesto viene aggiunto a ClientContext.
La procedura seguente crea il file di script init.js.jsp e aggiunge il codice che imposta il tipo mime corretto. Seguirà il codice che esegue l'inizializzazione dello store.
Fare clic con il pulsante destro del mouse sul nodo del componente dell'archivio di contesto e scegliere Crea > Crea file.
Nel campo Nome, digitare init.js.jsp
, quindi fare clic su OK.
Nella parte superiore della pagina, aggiungete il codice seguente e fate clic su Salva tutto.
<%@page contentType="text/javascript" %>
Visualizzare i dati dell'archivio di sessioni in ClientContext utilizzando un formato coerente.
La libreria di personalizzazione fornisce il tag personalization:storePropertyTag
che visualizza il valore di una proprietà da uno store di sessioni. Per utilizzare il tag , includi la seguente riga di codice nel file JSP:
<%@taglib prefix="personalization" uri="https://www.day.com/taglibs/cq/personalization/1.0" %>
Il tag ha il formato seguente:
<personalization:storePropertyTag propertyName="property_name" store="session_store_name"/>
L'attributo propertyName
è il nome della proprietà store da visualizzare. L'attributo store
è il nome dello store registrato. Il seguente tag di esempio visualizza il valore della proprietà authorizableId
dell'archivio profile
:
<personalization:storePropertyTag propertyName="authorizableId" store="profile"/>
La cartella della libreria client personalization.ui (/etc/clientlibs/foundation/personalization/ui/topics/default?lang=it) fornisce gli stili CSS utilizzati da ClientContext per formattare il codice HTML. Il codice seguente illustra la struttura suggerita da utilizzare per visualizzare i dati dello store:
<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>
Il componente /libs/cq/personalization/components/contextstores/profiledata
dell'archivio di contesto utilizza questa struttura per visualizzare i dati dall'archivio delle sessioni di profilo. La classe cq-cc-thumbnail
inserisce l'immagine della miniatura. Le classi cq-cc-store-property-level*x*
formattano i dati alfanumerici:
Per eseguire il rendering dei dati di un archivio utilizzando un componente di un archivio generico, è necessario:
La libreria di personalizzazione fornisce il tag personalization:storePropertyTag
che visualizza il valore di una proprietà da uno store di sessioni. Per utilizzare il tag , includi la seguente riga di codice nel file JSP:
<%@taglib prefix="personalization" uri="https://www.day.com/taglibs/cq/personalization/1.0" %>
Il tag ha il formato seguente:
<personalization:storeRendererTag store="store_name"/>
Sarà quindi necessario un metodo "renderer" per lo store di sessioni, che verrà chiamato ogni volta che è necessario eseguire il rendering del componente. La funzione di rendering viene chiamata con due parametri:
Utilizzate javascript per interagire con gli store di sessioni.
Ottenete un oggetto store sessione per leggere o scrivere dati nello store. CQ_Analytics. ClientContextMgrfornisce l'accesso agli store in base al nome dello store. Una volta ottenuto, utilizzate i metodi di CQ_Analytics.SessionStore o CQ_Analytics.PersistedSessionStore per interagire con i dati dello store.
Nell'esempio seguente viene ottenuto lo store profile
, quindi viene recuperata la proprietà formattedName
dallo store.
function getName(){
var profilestore = CQ_Analytics.ClientContextMgr.getRegisteredStore("profile");
if(profilestore){
return profilestore.getProperty("formattedName", false);
} else {
return null;
}
}
La sessione memorizza gli eventi di attivazione, pertanto è possibile aggiungere listener ed attivare gli eventi in base a tali eventi.
Gli archivi di sessione sono basati sul pattern Observable
. Estendono CQ_Analytics.Observable
che fornisce il metodo [addListener](/docs/experience-manager-65/developing/personlization/client-context/ccjsapi.md#addlistener-event-fct-scope)
.
Nell'esempio seguente viene aggiunto un listener all'evento update
dell'archivio di sessioni 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);
}
Gli store di sessione non sono disponibili finché non vengono caricati e inizializzati con i dati. I seguenti fattori possono influenzare il tempo di disponibilità dell'archivio di sessione:
Utilizzare i metodi CQ_Analytics.ClientContextUtils dell'oggetto onStoreRegistered e onStoreInitialized per accedere agli store di sessioni solo quando sono disponibili. Questi metodi consentono di registrare i listener di eventi che reagiscono agli eventi di registrazione e inizializzazione delle sessioni.
Se si dipende da un altro negozio, è necessario provvedere per il caso in cui il negozio non è mai registrato.
Nell’esempio seguente viene utilizzato l’evento onStoreRegistered
dell’archivio di sessioni profile
. Quando lo store viene registrato, un listener viene aggiunto all’evento update
dello store di sessione. Quando lo store viene aggiornato, il contenuto dell’elemento <div class="welcome">
nella pagina viene aggiornato con il nome dallo store 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;
}
}
Per evitare che una proprietà di un oggetto PersistedSessionStore
venga mantenuta (ovvero escluderla dal cookie sessionpersistence
), aggiungete la proprietà all'elenco delle proprietà non persistenti dell'archivio delle sessioni persistenti.
Consulta [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");
});
La pagina corrente deve avere una pagina mobile corrispondente; questo è determinato solo se per la pagina è configurato LiveCopy con una configurazione di rollout mobile ( rolloutconfig.path.toLowerCase
contiene mobile
).
Quando si passa dalla pagina desktop a quella mobile equivalente:
Viene caricato il DOM della pagina mobile.
La div
principale (richiesta) che contiene il contenuto, viene estratta e iniettata nella pagina desktop corrente.
Le classi CSS e body da caricare devono essere configurate manualmente.
Esempio:
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"
]
};
In questo esempio, potete creare un componente per l’archivio di contesto che recupera i dati da un servizio esterno e li memorizza nell’archivio di sessioni:
Create un’applicazione CQ e aggiungete il componente geoloc.
Aprite il CRXDE Lite nel browser Web (https://localhost:4502/crx/de).
Fare clic con il pulsante destro del mouse sulla cartella /apps
e scegliere Crea > Crea cartella. Specificate un nome di myapp
, quindi fate clic su OK.
Analogamente, sotto myapp
, create una cartella denominata contextstores
. "
Fare clic con il pulsante destro del mouse sulla cartella /apps/myapp/contextstores
e scegliere Crea > Crea componente. Specificate i seguenti valori di proprietà e fate clic su Avanti:
Nella finestra di dialogo Crea componente, fare clic su Avanti su ciascuna pagina fino a quando il pulsante OK non è abilitato, quindi fare clic su OK.
Fate clic su Salva tutto.
Il componente per l’archivio di contesto richiede una finestra di dialogo di modifica. La finestra di dialogo di modifica geoloc conterrà un messaggio statico che indica che non sono presenti proprietà da configurare.
Fare clic con il pulsante destro del mouse sul nodo /libs/cq/personalization/components/contextstores/genericstoreproperties/dialog
e scegliere Copia.
Fare clic con il pulsante destro del mouse sul nodo /apps/myapp/contextstores/geoloc
e fare clic su Incolla.
Elimina tutti i nodi secondari sotto il nodo /apps/myapp/contextstores/geoloc/dialog/items/items/tab1/items:
Fare clic con il pulsante destro del mouse sul nodo /apps/myapp/contextstores/geoloc/dialog/items/items/tab1/items
e scegliere Crea > Crea nodo. Specificate i seguenti valori di proprietà e fate clic su OK:
Aggiungi le seguenti proprietà al nodo:
Nome | Tipo | Valore |
---|---|---|
cls | Stringa | x-form-field-description |
testo | Stringa | Il componente geoloc non richiede alcuna configurazione. |
xtype | Stringa | statici |
Fate clic su Salva tutto.
Aggiungete un file init.js.jsp al componente geoloc e utilizzatelo per creare lo store della sessione, recuperare i dati sulla posizione e aggiungerlo allo store.
Il file init.js.jsp viene eseguito quando ClientContext viene caricato dalla pagina. A questo punto, l'API JavaScript ClientContext viene caricata e disponibile per lo script.
Fate clic con il pulsante destro del mouse sul nodo /apps/myapp/contextstores/geoloc e scegliete Crea > Crea file. Specificate il Nome di init.js.jsp e fate clic su OK.
Aggiungete il codice seguente nella parte superiore della pagina, quindi fate clic su Salva tutto.
<%@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 ************"); %>
Aggiungete il codice al file JSP del componente geoloc per eseguire il rendering dei dati dello store in ClientContext.
In CRXDE Lite , aprire il file /apps/myapp/contextstores/geoloc/geoloc.jsp
.
Aggiungete il seguente codice HTML sotto il codice 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>
Fate clic su Salva tutto.
Aggiungete il componente Location Store al ClientContext in modo che venga inizializzato al caricamento della pagina.
Aprite la home page dei Geometrixx Outdoors nell'istanza di creazione (https://localhost:4502/content/geometrixx-outdoors/en.html).
Fate clic su Ctrl+Alt+C (Windows) o Ctrl+Opzione+C (Mac) per aprire Client Context.
Fate clic sull'icona di modifica nella parte superiore di ClientContext per aprire ClientContext Designer.
Trascinate il componente Location Store in ClientContext.
Aprite la home page dei Geometrixx Outdoors in modalità di modifica, quindi aprite ClientContext per visualizzare i dati dal componente Location Store.
Per creare un secondo contesto client è necessario duplicare il ramo:
/etc/clientcontext/default
La sottocartella:
/content
conterrà il contenuto del contesto client personalizzato.
La cartella:
/contextstores
consente di definire configurazioni diverse per gli store contestuali.
Per utilizzare il contesto personalizzato del cliente, modificare la proprietà
path
nello stile di progettazione del componente contesto client, come incluso nel modello di pagina. Ad esempio, come posizione standard di:
/libs/cq/personalization/components/clientcontext/design_dialog/items/path