Il contesto client è stato sostituito da ContextHub. Vedi la documentazione correlata per i dettagli.
ClientContext rappresenta una raccolta di dati utente assemblata in modo dinamico. Puoi 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.
Il contesto client è costituito principalmente dai seguenti aspetti:
Per creare un archivio di sessioni autonomo e aggiungerlo al contesto client o creare un archivio di sessioni associato a un componente dell’archivio contesti. AEM installa diversi componenti dell’archivio contesti che puoi utilizzare immediatamente. Puoi utilizzare questi componenti come base per i componenti.
Per informazioni sull’apertura del contesto client, sulla configurazione delle informazioni visualizzate e sulla simulazione dell’esperienza utente, consulta Contesto client.
ClientContext include vari archivi di sessione contenenti dati utente. I dati archiviati provengono dalle seguenti origini:
Il framework ClientContext fornisce un API javascript che è possibile utilizzare per interagire con gli archivi di sessione per leggere e scrivere i dati degli utenti, nonché per ascoltare e reagire agli eventi archiviati. Puoi anche creare archivi di sessioni per i dati utente utilizzati per il targeting dei contenuti o per altri scopi.
I dati dell’archivio sessioni rimangono sul client. Il contesto client non riscrive i dati sul server. Per inviare dati al server, utilizzare un modulo o sviluppare JavaScript personalizzato.
Ogni archivio di sessione è un insieme di coppie proprietà-valore. L'archivio delle sessioni rappresenta una raccolta di dati (di qualsiasi tipo) il cui significato concettuale può essere deciso dal progettista e/o sviluppatore. Il seguente codice javascript di esempio definisce un oggetto che rappresenta i dati di profilo che potrebbero contenere gli archivi di sessione:
{
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 in tutte le sessioni del browser, oppure può durare solo per la sessione del browser in cui viene creato.
La persistenza dell’archivio utilizza l’archiviazione del browser o i cookie (il SessionPersistence
cookie). La memorizzazione del browser è più comune.
Quando il browser viene chiuso e riaperto, è possibile caricare un archivio di sessione con i valori di un archivio persistente. La cancellazione della cache del browser è quindi necessaria per rimuovere i vecchi valori.
Un componente dell’archivio contesti è un componente CQ che può essere aggiunto al contesto client. In genere, i componenti dell’archivio di contesto visualizzano i dati provenienti da un archivio 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 contesti possono includere i seguenti elementi:
Per una descrizione dei componenti del Context Store installati che è possibile aggiungere al Context Store, vedi Componenti Client Context disponibili.
I dati di pagina non sono più nel contesto client come componente predefinito. Se necessario, puoi aggiungere questa opzione modificando il contesto client, aggiungendo il Proprietà store generico , quindi configuralo per definire il Store come pagedata
.
Le informazioni sul profilo vengono utilizzate anche per la consegna contenuto di destinazione.
Includi il componente ClientContext nella sezione body delle pagine web per abilitare ClientContext. Il percorso del nodo del componente contesto client è /libs/cq/personalization/components/clientcontext
. Per includere il componente, aggiungi il seguente codice al file JSP del componente di pagina, che si trova appena sotto il body
elemento della pagina:
<cq:include path="clientcontext" resourceType="cq/personalization/components/clientcontext"/>
Il componente clientcontext fa sì che la pagina carichi le librerie client che implementano Client Context.
L’interfaccia utente ClientContext è disponibile solo sull’istanza di authoring.
Per estendere Client Context, crea un archivio di sessione e, facoltativamente, visualizza i dati dell'archivio:
Se hai (o crei) un JSONP
servizio che può fornire i dati, è sufficiente utilizzare il JSONP
componente archivio di contesto e mapparlo al servizio JSONP. In questo modo verrà gestito l'archivio delle sessioni.
Crea un archivio di sessione per i dati da aggiungere e recuperare dal contesto client. In genere, si utilizza la procedura seguente per creare un archivio sessioni:
Crea una cartella della libreria client con un categories
valore di proprietà di personalization.stores.kernel
. Client Context carica automaticamente le librerie client di questa categoria.
Configura la cartella della libreria client in modo che abbia una dipendenza da personalization.core.kernel
cartella della libreria client. La personalization.core.kernel
la libreria client fornisce l'API javascript Client Context.
Aggiungi il javascript che crea e inizializza l'archivio sessioni.
L'inclusione del javascript nella libreria client personalization.stores.kernel causa la creazione dell'archivio quando viene caricato il framework del contesto client.
Se crei un archivio sessioni come parte di un componente per l’archivio contesti, puoi in alternativa inserire il codice javascript nel file init.js.jsp del componente. In questo caso, l’archivio sessioni viene creato solo se il componente viene aggiunto al contesto client.
Gli archivi di sessione vengono creati e disponibili durante una sessione del browser oppure vengono mantenuti nell'archiviazione del browser o nei cookie. L'API JavaScript del contesto client 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 mantenuti per tutta la durata 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 sia nell’archiviazione del browser che nei cookie. I dati sono disponibili su più pagine e tra sessioni utente.L’API fornisce anche le estensioni di queste classi specializzate per la memorizzazione di dati JSON o 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 l'archivio sessioni. L'archivio delle sessioni deve quindi essere registrato utilizzando Context Store Manager. Nell'esempio seguente viene creato e registrato un CQ_Analytics.SessionStore oggetto.
//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 memorizzare i dati JSON, l’esempio seguente crea e registra un CQ_Analytics.JSONStore oggetto.
if (!CQ_Analytics.myJSONStore) {
CQ_Analytics.myJSONStore = CQ_Analytics.JSONStore.registerNewInstance("myjsonstore",{});
}
Crea un componente per l’archivio di contesto per eseguire il rendering dei dati dell’archivio di sessione nel contesto client. Una volta creato, puoi trascinare il componente dell’archivio contesti sul contesto client per eseguire il rendering dei dati da un archivio sessioni. I componenti dell’archivio contesti sono costituiti dai seguenti elementi:
AEM fornisce i componenti dell'archivio dati generici e quelli dell'archivio dati contestuali genericstoreproperties che è possibile estendere. La struttura dei dati dell’archivio determina il componente che si estende:
Coppie proprietà-valore: Estendi la GenericStoreProperties
componente. Questo componente esegue automaticamente il rendering degli archivi di coppie proprietà-valore. Sono forniti diversi punti di interazione:
prolog.jsp
e epilog.jsp
: interazione del componente che consente di aggiungere logica lato server prima o dopo il rendering del componente.Dati complessi: Estendi la GenericStore
componente. L’archivio sessioni dovrà quindi utilizzare un metodo "renderer" che verrà chiamato ogni volta che il componente deve essere rappresentato. La funzione di rendering viene chiamata con due parametri:
@param {String} store
Archivio di cui eseguire il rendering
@param {String} divId
Id del div in cui deve essere eseguito il rendering dello store.
Tutti i componenti Client Context sono estensioni dei componenti Generic Store o Generic Store Properties. Sono installati diversi esempi in /libs/cq/personalization/components/contextstores
cartella.
Durante la modifica del contesto client, i componenti dell’archivio del contesto vengono visualizzati nella barra laterale. Come per tutti i componenti, il componentGroup
e jcr:title
le proprietà del componente ClientContext determinano il gruppo e il nome del componente.
Tutti i componenti che hanno un componentGroup
valore di proprietà di Client Context
per impostazione predefinita, sono disponibili nella barra laterale. Se utilizzi un valore diverso per la variabile componentGroup
, è necessario aggiungere manualmente il componente alla barra laterale utilizzando la modalità Progettazione .
Quando aggiungi un componente dell’archivio di contesto al contesto client, di seguito viene creato un nodo che rappresenta l’istanza del componente /etc/clientcontext/default/content/jcr:content/stores
. Questo nodo contiene i valori delle proprietà configurati utilizzando la finestra di dialogo di modifica del componente.
Quando Client Context viene inizializzato, questi nodi vengono elaborati.
Aggiungi un file init.js.jsp al tuo componente per generare codice javascript che inizializza l’archivio sessioni utilizzato dal componente dell’archivio contesti. Ad esempio, utilizza lo script di inizializzazione per recuperare le proprietà di configurazione per il componente e utilizzale per popolare l’archivio sessioni.
Il javascript generato viene aggiunto alla pagina quando Client Context viene inizializzato al caricamento della pagina sia sulle istanze di authoring che di pubblicazione. Questo JSP viene eseguito prima che l’istanza del componente dell’archivio di contesto venga caricata e sottoposta a rendering.
Il codice deve impostare il tipo mime del file su text/javascript
o non viene eseguito.
Lo script init.js.jsp viene eseguito sull’istanza di authoring e pubblicazione, ma solo se il componente dell’archivio contesti viene aggiunto al contesto client.
La procedura seguente crea il file di script init.js.jsp e aggiunge il codice che imposta il tipo di mime corretto. Segue il codice che esegue l'inizializzazione dell'archivio.
Fai clic con il pulsante destro del mouse sul nodo del componente archivio contesti e fai clic su Crea > Crea file .
Nel campo Nome digitare init.js.jsp
quindi fare clic su OK.
Nella parte superiore della pagina, aggiungi il seguente codice e fai clic su Salva tutto.
<%@page contentType="text/javascript" %>
Visualizza i dati dell'archivio sessioni in ClientContext utilizzando un formato coerente.
La libreria di personalizzazione fornisce personalization:storePropertyTag
che visualizza il valore di una proprietà da un archivio 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 seguente formato:
<personalization:storePropertyTag propertyName="property_name" store="session_store_name"/>
La propertyName
attribute è il nome della proprietà store da visualizzare. La store
attributo è il nome dell'archivio registrato. Il seguente tag di esempio visualizza il valore del authorizableId
proprietà profile
negozio:
<personalization:storePropertyTag propertyName="authorizableId" store="profile"/>
La cartella della libreria client personalization.ui (/etc/clientlibs/foundation/personalization/ui/theme/default?lang=it) fornisce gli stili CSS utilizzati da Client Context per formattare il codice HTML. Il codice seguente illustra la struttura consigliata da utilizzare per la visualizzazione dei dati dell'archivio:
<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>
La /libs/cq/personalization/components/contextstores/profiledata
il componente archivio contesto utilizza questa struttura per visualizzare i dati dall’archivio delle sessioni del profilo. La cq-cc-thumbnail
La classe inserisce l'immagine miniatura. La cq-cc-store-property-level*x*
le classi formattano i dati alfanumerici:
Per eseguire il rendering dei dati dell’archivio utilizzando un componente genericstore, è necessario:
La libreria di personalizzazione fornisce personalization:storePropertyTag
che visualizza il valore di una proprietà da un archivio 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 seguente formato:
<personalization:storeRendererTag store="store_name"/>
L’archivio sessioni dovrà quindi utilizzare un metodo "renderer" che verrà chiamato ogni volta che il componente deve essere rappresentato. La funzione di rendering viene chiamata con due parametri:
Utilizza javascript per interagire con gli archivi di sessione.
Ottenere un oggetto archivio sessioni per leggere o scrivere dati nell'archivio. CQ_Analytics.ClientContextMgr fornisce l'accesso agli archivi in base al nome dello store. Una volta ottenuto, utilizza i metodi CQ_Analytics.SessionStore o CQ_Analytics.PersistedSessionStore per interagire con i dati archiviati.
L'esempio seguente ottiene il profile
e quindi recupera il formattedName
dall'archivio.
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, quindi è possibile aggiungere listener e attivare gli eventi in base a questi eventi.
Gli archivi di sessione sono costruiti in Observable
modello. Si estendono CQ_Analytics.Observable
che fornisce [addListener](/docs/experience-manager-65/developing/personlization/client-context/ccjsapi.md#addlistener-event-fct-scope)
metodo .
Nell'esempio seguente viene aggiunto un listener al update
evento profile
archivio sessioni.
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 archivi 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 sessioni:
Utilizza la CQ_Analytics.ClientContextUtils dell'oggetto onStoreRegistered e onStoreInitialized metodi per accedere agli archivi delle sessioni solo quando sono disponibili. Questi metodi consentono di registrare listener di eventi che reagiscono agli eventi di registrazione e inizializzazione della sessione.
Se si dipende da un altro negozio, è necessario provvedere per il caso di quando il negozio non è mai registrato.
Nell’esempio seguente viene utilizzato il onStoreRegistered
evento profile
archivio sessioni. Quando l’archivio è registrato, viene aggiunto un listener al update
evento dell’archivio sessioni. Quando lo store viene aggiornato, il contenuto della <div class="welcome">
viene aggiornato con il nome del profile
archiviare.
//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 impedire la proprietà di una PersistedSessionStore
dal persistere (ovvero escluderlo dal sessionpersistence
cookie), aggiungi la proprietà all'elenco delle proprietà non persistenti dell'archivio sessioni persistente.
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 la pagina dispone di una Live Copy configurata con una configurazione di rollout mobile ( rolloutconfig.path.toLowerCase
contiene mobile
).
Quando si passa dalla pagina desktop al suo equivalente mobile:
Il DOM della pagina mobile viene caricato.
Il principale div
(obbligatorio) che contiene il contenuto, viene estratto e inserito nella pagina desktop corrente.
Le classi CSS e corpo 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, si crea un componente dell’archivio di contesto che recupera i dati da un servizio esterno e li memorizza nell’archivio delle sessioni:
Crea un'applicazione CQ e aggiungi il componente geoloc.
Apri CRXDE Lite nel browser Web (https://localhost:4502/crx/de).
Fai clic con il pulsante destro del mouse sul pulsante /apps
e fai clic su Crea > Crea cartella. Specifica un nome di myapp
quindi fare clic su OK.
Analogamente, sotto myapp
, crea una cartella denominata contextstores
. "
Fai clic con il pulsante destro del mouse sul pulsante /apps/myapp/contextstores
e fai clic su Crea > Crea componente. Specifica i seguenti valori di proprietà e fai 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.
Fai clic su Salva tutto.
Il componente per l’archiviazione del contesto richiede una finestra di dialogo di modifica. La finestra di dialogo di modifica del geoloc conterrà un messaggio statico che indica che non sono presenti proprietà da configurare.
Fai clic con il pulsante destro del mouse sul pulsante /libs/cq/personalization/components/contextstores/genericstoreproperties/dialog
e fare clic su Copia.
Fai clic con il pulsante destro del mouse sul pulsante /apps/myapp/contextstores/geoloc
e fare clic su incolla.
Elimina tutti i nodi figlio sotto il nodo /apps/myapp/contextstores/geoloc/dialog/items/items/tab1/items :
Fai clic con il pulsante destro del mouse sul pulsante /apps/myapp/contextstores/geoloc/dialog/items/items/tab1/items
e fai clic su Crea > Crea nodo. Specificare i seguenti valori di proprietà e fare clic su OK:
Aggiungi le seguenti proprietà al nodo :
Nome | Tipo | Valore |
---|---|---|
cls | Stringa | x-form-field-description |
text | Stringa | Il componente geoloc non richiede alcuna configurazione. |
xtype | Stringa | statici |
Fai clic su Salva tutto.
Aggiungi un file init.js.jsp al componente geoloc e usalo per creare l'archivio sessioni, recuperare i dati sulla posizione e aggiungerlo all'archivio.
Il file init.js.jsp viene eseguito quando il contesto client viene caricato dalla pagina. A questo punto, l’API JavaScript Client Context viene caricata e disponibile per il tuo script.
Fai clic con il pulsante destro del mouse sul nodo /apps/myapp/contextstores/geoloc e fai clic su Crea > Crea file. Specificare un Nome di init.js.jsp e fare clic su OK.
Aggiungi il codice seguente nella parte superiore della pagina, quindi fai 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 ************"); %>
Aggiungi il codice al file JSP del componente geoloc per eseguire il rendering dei dati dell’archivio nel contesto client.
In CRXDE Lite, apri le /apps/myapp/contextstores/geoloc/geoloc.jsp
file.
Aggiungi 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>
Fai clic su Salva tutto.
Aggiungi il componente Location Store al contesto client in modo che venga inizializzato al caricamento della pagina.
Apri la home page dei Geometrixx Outdoors nell’istanza di authoring (https://localhost:4502/content/geometrixx-outdoors/en.html).
Fai clic su Ctrl+Alt+C (Windows) o Ctrl+Opzione+C (Mac) per aprire Client Context.
Fai clic sull’icona di modifica nella parte superiore del contesto client per aprire Client Context Designer.
Trascina il componente Store posizione nel contesto client.
Apri la home page dei Geometrixx Outdoors in modalità di modifica, quindi apri Client Context per visualizzare i dati dal componente Location Store.
Per creare un secondo contesto client, devi 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 archivi di contesto.
Per utilizzare il proprio contesto client personalizzato, modifica 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