ClientContext nei dettagli client-context-in-detail

ClientContext rappresenta una raccolta assemblata dinamicamente di dati utente. 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 sulla pagina.

ClientContext è costituito principalmente dai seguenti aspetti:

Per creare un archivio di sessione autonomo e aggiungerlo a ClientContext oppure creare un archivio di sessione associato a un componente Archivio di sessione autonomo. Adobe Experience Manager (AEM) installa diversi componenti dell’archivio contestuale che puoi utilizzare immediatamente. Puoi utilizzare questi componenti come base per i tuoi componenti.

Per informazioni sull'apertura di Client Context, sulla configurazione delle informazioni visualizzate e sulla simulazione dell'esperienza utente, vedere Client Context.

Archivi sessione session-stores

ClientContext include vari archivi di sessione che contengono dati utente. I dati dell’archivio 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 utente e per ascoltare e reagire agli eventi di archivio. Puoi anche creare archivi di sessione per i dati utente da utilizzare per il targeting del contenuto o per altri scopi.

I dati dell'archivio sessione rimangono nel client. ClientContext non riscrive i dati sul server. Per inviare dati al server, utilizzare un modulo o sviluppare un JavaScript personalizzato.

Ogni archivio sessione è una raccolta 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, dallo sviluppatore o da entrambi. L’esempio di codice JavaScript che segue definisce un oggetto che rappresenta i dati di profilo che l’archivio di sessione potrebbe contenere:

{
  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 di sessione può essere mantenuto per tutte le sessioni del browser o può durare solo per la sessione del browser in cui viene creato.

Componenti archivio contesto context-store-components

Un componente archivio contesto è un componente CQ che può essere aggiunto a ClientContext. In genere, i componenti dell’archivio di contesto visualizzano i dati di un archivio di sessione 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 contesto possono includere i seguenti elementi:

Per una descrizione dei componenti dell'archivio contesto installati che è possibile aggiungere all'archivio contesto, vedere Componenti contesto client disponibili.

Consegna mirata dei contenuti targeted-content-delivery

Le informazioni sul profilo vengono utilizzate anche per la consegna di contenuto con targeting.

Aggiunta Di ClientContext A Una Pagina adding-client-context-to-a-page

Includi il componente ClientContext nella sezione body delle pagine web per abilitare ClientContext. Il percorso del nodo del componente ClientContext è /libs/cq/personalization/components/clientcontext. Per includere il componente, aggiungi il seguente codice al file JSP del componente page, che si trova appena sotto l'elemento body 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 ClientContext.

L’interfaccia utente ClientContext è disponibile solo nell’istanza di authoring.

Estensione ClientContext extending-client-context

Per estendere ClientContext, crea un archivio sessione e, facoltativamente, visualizza i dati dell’archivio:

Creazione di un archivio sessioni creating-a-session-store

Crea un archivio di sessione per i dati da aggiungere e recuperare da ClientContext. In genere, per creare un archivio di sessione si utilizza la procedura seguente:

L’inclusione di JavaScript nella libreria client personalization.store.kernel determina la creazione dell’archivio al caricamento del framework ClientContext.

Tipi di archivi di sessione types-of-session-stores

Gli archivi di sessione vengono creati e disponibili durante una sessione del browser oppure vengono memorizzati in modo permanente nell’archiviazione del browser o nei cookie. L’API JavaScript ClientContext definisce diverse classi che rappresentano entrambi i tipi di archivi dati:

L’API fornisce anche estensioni di queste classi, specializzate per l’archiviazione di dati JSON o JSONP:

Creazione dell'oggetto archivio sessione creating-the-session-store-object

Il JavaScript della cartella della libreria client crea e inizializza l’archivio della sessione. L’archivio sessione deve essere registrato utilizzando 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 l'archiviazione dei dati JSON, nell'esempio seguente viene creato e registrato un oggetto CQ_Analytics.JSONStore.

if (!CQ_Analytics.myJSONStore) {
    CQ_Analytics.myJSONStore = CQ_Analytics.JSONStore.registerNewInstance("myjsonstore",{});
}

Creazione di un componente archivio contesto creating-a-context-store-component

Crea un componente archivio di contesto per eseguire il rendering dei dati archivio sessione in ClientContext. Una volta creato, puoi trascinare il componente archivio di contesto in ClientContext per eseguire il rendering dei dati da un archivio di sessione. I componenti dell’archivio contesto sono costituiti dai seguenti elementi:

Estensione dei componenti dell’archivio contesto forniti extending-the-provided-context-store-components

AEM fornisce i componenti archivio dati generico e archivio dati contestuali genericstoreproperties che è possibile estendere. La struttura dei dati del tuo archivio determina il componente che estendi:

Configurazione dell'aspetto nel Sidekick configuring-the-appearance-in-sidekick

Quando si modifica ClientContext, i componenti dell’archivio contestuale vengono visualizzati nel Sidekick. Come per tutti i componenti, le proprietà componentGroup e jcr:title del componente contesto client determinano il gruppo e il nome del componente.

Per impostazione predefinita, tutti i componenti con valore di proprietà componentGroup pari a Client Context vengono visualizzati nel Sidekick. Se si utilizza un valore diverso per la proprietà componentGroup, è necessario aggiungere manualmente il componente al Sidekick utilizzando la modalità Progettazione.

Istanze componente archivio contesto context-store-component-instances

Quando si aggiunge un componente archivio di contesto a ClientContext, viene creato un nodo che rappresenta l'istanza del componente sotto /etc/clientcontext/default/content/jcr:content/stores. Questo nodo contiene i valori delle proprietà configurati utilizzando la finestra di dialogo per modifica del componente.

Quando ClientContext viene inizializzato, questi nodi vengono elaborati.

Inizializzazione dell'archivio sessioni associato initializing-the-associated-session-store

Aggiungi un file init.js.jsp al componente per generare il codice JavaScript che inizializza l’archivio sessioni utilizzato dal componente archivio contesto. Ad esempio, utilizza lo script di inizializzazione per recuperare le proprietà di configurazione del componente e utilizzarle per popolare l’archivio della sessione.

Il JavaScript generato viene aggiunto alla pagina quando ClientContext viene inizializzato al caricamento della pagina sia sulle istanze di authoring che di pubblicazione. Questa JSP viene eseguita prima del caricamento e del rendering dell’istanza del componente dell’archivio di contesto.

Il codice deve impostare il tipo MIME del file su text/javascript, altrimenti non viene eseguito.

La procedura seguente crea il file di script init.js.jsp e aggiunge il codice che imposta il tipo mime corretto. Segue il codice che esegue l'inizializzazione dell'archivio.

Rendering dei dati dell'archivio sessione per i componenti genericstoreproperties rendering-session-store-data-for-genericstoreproperties-components

Visualizza i dati dell’archivio sessioni in ClientContext utilizzando un formato coerente.

Visualizzazione dei dati delle proprietà displaying-property-data

La taglib di personalizzazione fornisce il tag personalization:storePropertyTag che visualizza il valore di una proprietà da un archivio sessione. 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"/>

L'attributo propertyName è il nome della proprietà dell'archivio da visualizzare. L'attributo store è il nome dell'archivio registrato. Il seguente tag di esempio visualizza il valore della proprietà authorizableId dell'archivio profile:

<personalization:storePropertyTag propertyName="authorizableId" store="profile"/>

Struttura HTML html-structure

La cartella della libreria client personalization.ui (https://experienceleague.adobe.com/etc/clientlibs/foundation/personalization/ui/theme/default?lang=it) fornisce gli stili CSS utilizzati da ClientContext 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>

Il componente dell'archivio di contesto /libs/cq/personalization/components/contextstores/profiledata utilizza questa struttura per visualizzare i dati dall'archivio di sessione del profilo. La classe cq-cc-thumbnail inserisce l'immagine di anteprima. Le classi cq-cc-store-property-level*x* formattano i dati alfanumerici:

Rendering dei dati dell'archivio sessione per i componenti genericstore rendering-session-store-data-for-genericstore-components

Per eseguire il rendering dei dati di archivio utilizzando un componente genericstore, è necessario effettuare le seguenti operazioni:

Identificazione dell'archivio sessioni genericstore identifying-the-genericstore-session-store

La taglib di personalizzazione fornisce il tag personalization:storePropertyTag che visualizza il valore di una proprietà da un archivio sessione. 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"/>

Implementazione del metodo del renderer dell’archivio sessioni implementing-the-session-store-renderer-method

L’archivio delle sessioni necessita di un metodo "renderer" chiamato ogni volta che è necessario eseguire il rendering del componente. La funzione di rendering viene chiamata con due parametri:

Interazione con gli archivi di sessione interacting-with-session-stores

Utilizza JavaScript per interagire con gli archivi di sessione.

Accesso agli store della sessione accessing-session-stores

Ottieni un oggetto archivio sessione per leggere o scrivere dati nell’archivio. CQ_Analytics.ClientContextMgr fornisce l'accesso agli archivi in base al nome dell'archivio. Una volta ottenuti, utilizzare i metodi di CQ_Analytics.SessionStore o CQ_Analytics.PersistedSessionStore per interagire con i dati dell'archivio.

L'esempio seguente ottiene l'archivio profile e quindi recupera la proprietà formattedName dall'archivio.

function getName(){
   var profilestore = CQ_Analytics.ClientContextMgr.getRegisteredStore("profile");
   if(profilestore){
      return profilestore.getProperty("formattedName", false);
   } else {
      return null;
   }
}

Creazione di un listener per reagire a un aggiornamento dell’archivio sessioni creating-a-listener-to-react-to-a-session-store-update

La sessione memorizza gli eventi di attivazione, pertanto è possibile aggiungere listener e attivare eventi in base a tali eventi.

Gli archivi di sessione sono basati sul modello Observable. Estendono CQ_Analytics.Observable che fornisce il metodo [addListener](/docs/experience-manager-65/content/implementing/developing/personlization/client-context/ccjsapi.md#addlistener-event-fct-scope).

Nell'esempio seguente viene aggiunto un listener all'evento update dell'archivio di sessione 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);
}

Controllo della definizione e inizializzazione di un archivio sessioni checking-that-a-session-store-is-defined-and-initialized

Gli archivi di sessione non sono disponibili finché non vengono caricati e inizializzati con i dati. I seguenti fattori possono influenzare la tempistica di disponibilità dell’archivio sessioni:

Utilizzare i metodi onStoreRegistered e onStoreInitialized dell'oggetto CQ_Analytics.ClientContextUtils per accedere agli archivi di sessione solo quando sono disponibili. Questi metodi consentono di registrare i listener di eventi che reagiscono agli eventi di registrazione e inizializzazione della sessione.

Nell'esempio seguente viene utilizzato l'evento onStoreRegistered dell'archivio di sessione profile. Quando l'archivio viene registrato, viene aggiunto un listener all'evento update dell'archivio sessione. Quando l'archivio viene aggiornato, il contenuto dell'elemento <div class="welcome"> nella pagina viene aggiornato con il nome dell'archivio 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;
    }
}

Esclusione di una proprietà dal cookie sessionpersistence excluding-a-property-from-the-sessionpersistence-cookie

Per evitare che una proprietà di PersistedSessionStore venga resa persistente (ovvero, esclusa dal cookie sessionpersistence), aggiungerla all'elenco delle proprietà non persistenti dell'archivio di sessione persistente.

Vedi [CQ_Analytics.PersistedSessionStore.setNonPersisted(propertyName)](/docs/experience-manager-65/content/implementing/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");
});

Configurazione del dispositivo di scorrimento configuring-the-device-slider

Condizioni conditions

La pagina corrente deve avere una pagina corrispondente per dispositivi mobili; questo viene determinato solo se la pagina ha una Live Copy configurata con una configurazione di rollout per dispositivi mobili ( rolloutconfig.path.toLowerCase contiene mobile).

Configurazione configuration

Quando si passa dalla pagina desktop all'equivalente mobile:

Ad 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"
  ]
};

Esempio: creazione di un componente archivio contestuale personalizzato example-creating-a-custom-context-store-component

In questo esempio, puoi creare un componente archivio di contesto che recupera i dati da un servizio esterno e li memorizza nell’archivio di sessione:

Aggiungere il componente geologico add-the-geoloc-component

Crea un’applicazione CQ e aggiungi il componente geoloc.

Creare la finestra di dialogo Modifica geologica create-the-geoloc-edit-dialog

Il componente Archivio di contesto richiede una finestra di dialogo per modifica. La finestra di dialogo per modifica geografica contiene un messaggio statico che indica che non vi sono proprietà da configurare.

Creare lo script di inizializzazione create-the-initialization-script

Aggiungi un file init.js.jsp al componente geoloc e utilizzalo per creare l’archivio della sessione, recuperare i dati della posizione e aggiungerlo all’archivio.

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.

Eseguire il rendering dei dati dell’archivio sessione geoloc render-the-geoloc-session-store-data

Aggiungi il codice al file JSP del componente geoloc per eseguire il rendering dei dati dell’archivio in ClientContext.

Aggiungere il componente a ClientContext add-the-component-to-client-context

Aggiungi il componente Archivio posizione a ClientContext in modo che venga inizializzato al caricamento della pagina.

Visualizzare le informazioni sulla posizione in ClientContext see-the-location-information-in-client-context

Apri la home page dei Geometrixx Outdoors in modalità di modifica, quindi apri ClientContext per visualizzare i dati dal componente Archivio posizione.

Creazione di un contesto client personalizzato creating-a-customized-client-context

Per creare un secondo contesto client, duplica il ramo:

/etc/clientcontext/default

Per utilizzare il 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