Contesto cliente in dettaglio

Nota

ClientContext è stato sostituito da ContextHub nell'interfaccia utente touch. Per informazioni dettagliate, consulta la relativa documentazione .

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:

  • L'archivio delle sessioni, che contiene i dati utente.
  • Interfaccia utente che visualizza i dati utente e fornisce gli strumenti per simulare l'esperienza utente.
  • Un'API javascript per interagire con gli store di sessioni.

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, vedete ClientContext .

Archivi di sessioni

ClientContext include diversi store di sessioni contenenti dati utente. I dati dello store provengono dalle origini seguenti:

  • Il browser Web del client.
  • Server (vedere JSONP Store per l'archiviazione di informazioni da origini terze parti)

ClientContext framework fornisce un'API javascript 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.

Nota

La persistenza dello store utilizza l'archiviazione del browser o i cookie (il SessionPersistence cookie). 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.

Componenti Context Store

Un componente dell'archivio di contesto è un componente AEM 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:

  • Script JSP che definiscono l'aspetto in ClientContext.
  • Proprietà per elencare il componente nella barra laterale.
  • Modificare le finestre di dialogo per configurare le istanze dei componenti.
  • Javascript che inizializza lo store di sessioni.

Per una descrizione dei componenti Context Store installati che è possibile aggiungere a Context Store, vedete Componenti Client Context disponibili.

Nota

I dati pagina non sono più nel contesto client come componente predefinito. Se necessario, potete aggiungere questo elemento modificando il contesto del client, aggiungendo il componente Proprietà store generiche, quindi configurando questo elemento per definire Store come pagedata.

Distribuzione di contenuti mirati

Le informazioni sul profilo vengono utilizzate anche per distribuire contenuti mirati.

clientcontext_targetedcontentdelivery clientcontext_targetedcontentdeliveryDettaglio

Aggiunta Di Contesto Client A Una Pagina

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’ body elemento 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'API JavaScript ClientContext.
  • ClientContext Framework che supporta gli store di sessioni, la gestione eventi e così via.
  • Segmenti definiti.
  • Gli script init.js generati per ciascun componente dell'archivio di contesto aggiunto a ClientContext.
  • (Solo istanza Author) L'interfaccia utente ClientContext.

L'interfaccia utente ClientContext è disponibile solo nell'istanza di creazione.

Estensione ClientContext

Per estendere ClientContext, create uno store di sessione ed eventualmente visualizzate i dati dello store:

  • Create un archivio di sessione per i dati utente necessari per il targeting dei contenuti e l'analisi Web.
  • Create un componente per l’archivio di contesto per consentire agli amministratori di configurare l’archivio di sessioni associato e di visualizzare i dati dell’archivio di ClientContext a scopo di test.
Nota

Se disponete (o create) di un JSONP servizio in grado di fornire i dati, potete semplicemente utilizzare il componente JSONP dell'archivio di contesto e mapparlo al servizio JSONP. In questo modo verrà gestito lo store della sessione.

Creazione di uno store di sessioni

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:

  1. Create una cartella libreria client con un valore di categories proprietà personalization.stores.kernel. ClientContext carica automaticamente le librerie client di questa categoria.

  2. Configurate la cartella della libreria client in modo che abbia una dipendenza dalla cartella della libreria personalization.core.kernel client. La libreria personalization.core.kernel client fornisce l'API JavaScript ClientContext.

  3. 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.

Nota

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.

Tipi di store di sessioni

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: Questi oggetti risiedono solo nel DOM della pagina. I dati vengono creati e memorizzati durante il ciclo di vita della pagina.
  • CQ_Analytics.PerstistedSessionStore: 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:

Creazione dell'oggetto Store di sessione

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",{});
}

Creazione di un componente Context Store

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:

  • Script JSP per il rendering dei dati.
  • Una finestra di dialogo di modifica.
  • Uno script JSP per l'inizializzazione dello store di sessioni.
  • (Facoltativo) Una cartella libreria client che crea lo store sessione. Non è necessario includere la cartella della libreria client se il componente utilizza uno store di sessione esistente.

Estensione dei componenti Context Store forniti

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 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 di componente che consente di aggiungere logica lato server prima o dopo il rendering del componente.
  • Dati complessi: Estende il GenericStore componente. 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.

Nota

Tutti i componenti ClientContext sono estensioni dei componenti Store generici o Proprietà store generiche. Diversi esempi sono installati nella /libs/cq/personalization/components/contextstores cartella.

Configurazione dell’aspetto nella barra laterale

Durante la modifica di ClientContext, i componenti dell'archivio di contesto vengono visualizzati nella barra laterale. Come per tutti i componenti, il gruppo e il nome del componente contesto componentGroup e jcr:title le proprietà del componente ClientContext determinano il nome del componente.

Per impostazione predefinita, tutti i componenti con un valore componentGroup proprietà pari a Client Context vengono visualizzati nella barra laterale. Se utilizzate un valore diverso per la componentGroup proprietà, dovete aggiungere manualmente il componente alla barra laterale utilizzando la modalità Progettazione.

Istanze componente archivio contesto

Quando aggiungete un componente dell'archivio di contesto a ClientContext, viene creato di seguito un nodo che rappresenta l'istanza del componente /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.

Inizializzazione dello store di sessioni associato

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.

ATTENZIONE

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.

  1. Fare clic con il pulsante destro del mouse sul nodo del componente dell'archivio di contesto e scegliere Crea > Crea file.

  2. Nel campo Nome, digitare init.js.jsp e fare clic su OK.

  3. Nella parte superiore della pagina, aggiungete il codice seguente e fate clic su Salva tutto.

    <%@page contentType="text/javascript" %>
    

Rendering dei dati dell'archivio di sessioni per i componenti genericstoreproperties

Visualizzare i dati dell'archivio di sessioni in ClientContext utilizzando un formato coerente.

Visualizzazione dei dati delle proprietà

La libreria di personalizzazione fornisce il personalization:storePropertyTag tag 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' propertyName attributo è il nome della proprietà store da visualizzare. L' store attributo è il nome dello store registrato. Il seguente tag di esempio visualizza il valore della authorizableId proprietà dell' profile archivio:

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

Struttura HTML

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 cq-cc-thumbnail classe inserisce l'immagine della miniatura. Le cq-cc-store-property-level*x* classi formattano i dati alfanumerici:

  • level0, level1 e level2 sono distribuiti in verticale e utilizzano un font bianco.
  • level3 ed eventuali livelli aggiuntivi vengono distribuiti in orizzontale e utilizzano un font bianco con uno sfondo più scuro.

chlimage_1-222

Rendering dei dati di archivio delle sessioni per i componenti di genericstore

Per eseguire il rendering dei dati di un archivio utilizzando un componente di un archivio generico, è necessario:

  • Aggiungete il tag personalization:storeRendererTag allo script JSP del componente per identificare il nome dell'archivio delle sessioni.
  • Implementare un metodo di rendering nella classe dell'archivio sessioni.

Identificazione dello store di sessioni di genericstore

La libreria di personalizzazione fornisce il personalization:storePropertyTag tag 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"/>

Implementazione del metodo del renderer dello store di sessioni

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.

Interazione con gli store di sessioni

Utilizzate javascript per interagire con gli store di sessioni.

Accesso agli store di sessioni

Ottenete un oggetto store sessione per leggere o scrivere dati nello store. CQ_Analytics.ClientContextMgr consente l'accesso agli store in base al nome dello store. Una volta ottenuto, utilizzare i metodi dell' CQ-Analytics.SessionStore o CQ-Analytics.PersistedSessionStore per interagire con i dati dell'archivio.

L'esempio seguente ottiene lo profile store e recupera la formattedName proprietà dallo store.

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 dello store di sessioni

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 Observable pattern. Si estendono CQ_Analytics.Observable che forniscono il addListener metodo.

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

Verifica della definizione e dell'inizializzazione di uno store di sessioni

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:

  • Caricamento pagina
  • Caricamento JavaScript
  • Tempo di esecuzione JavaScript
  • Tempi di risposta per le richieste XHR
  • Modifiche dinamiche allo store di sessioni

Utilizzare i CQ_Analytics.ClientContextUtils metodi onStoreRegistered e i metodi dell'oggetto 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.

ATTENZIONE

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’ onStoreRegistered evento dello store di profile sessioni. Quando lo store viene registrato, un listener viene aggiunto all’ update evento dello store di sessione. Quando lo store viene aggiornato, il contenuto dell’ <div class="welcome"> elemento nella pagina viene aggiornato con il nome dallo profile store.

//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 una PersistedSessionStore venga mantenuta (ovvero escluderla dal sessionpersistence cookie), aggiungete la proprietà all’elenco delle proprietà non persistenti dell’archivio delle sessioni persistenti.

Consulta CQ_Analytics.PersistedSessionStore.setNonPersisted(propertyName)

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

Condizioni

La pagina corrente deve avere una pagina mobile corrispondente; questo è determinato solo se la pagina dispone di una LiveCopy configurata con una configurazione di rollout mobile ( rolloutconfig.path.toLowerCase mobilecontiene).

Configurazione

Quando si passa dalla pagina desktop a quella mobile equivalente:

  • Viene caricato il DOM della pagina mobile.

  • La pagina principale div (richiesta) che contiene il contenuto, viene estratta e iniettata nella pagina desktop corrente.

  • Le classi CSS e body da caricare devono essere configurate manualmente.

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 per l'archivio di contesto personalizzato

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:

  • Estende il componente genericstoreproperties.
  • Inizializza uno store utilizzando un oggetto CQ_Analytics.JSONPStore javascript.
  • Chiama un servizio JSONP per recuperare i dati e aggiungerli allo store.
  • Consente di renderizzare i dati in ClientContext.

Aggiungere il componente geoloc

Create un’applicazione CQ e aggiungete il componente geoloc.

  1. Aprite il CRXDE Lite nel browser Web (http://localhost:4502/crx/de).

  2. Fate clic con il pulsante destro del mouse sulla /apps cartella e scegliete Crea > Crea cartella. Specificate un nome di myapp e fate clic su OK.

  3. Analogamente, di seguito myappcreate una cartella denominata contextstores. "

  4. Fare clic con il pulsante destro del mouse sulla /apps/myapp/contextstores cartella e scegliere Crea > Crea componente. Specificate i seguenti valori di proprietà e fate clic su Avanti:

    • Etichetta: geoloc
    • Titolo: Store posizione
    • Super Type: cq/personalization/components/contextstores/genericstoreproperties
    • Gruppo: ClientContext
  5. 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.

  6. Fate clic su Salva tutto.

Crea finestra di dialogo Modifica geoloc

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.

  1. Fare clic con il pulsante destro del mouse sul /libs/cq/personalization/components/contextstores/genericstoreproperties/dialog nodo e scegliere Copia.

  2. Fare clic con il pulsante destro del mouse sul /apps/myapp/contextstores/geoloc nodo e scegliere Incolla.

  3. Elimina tutti i nodi secondari sotto il nodo /apps/myapp/contextstores/geoloc/dialog/items/items/tab1/items:

    • store
    • proprietà
    • thumbnail
  4. Fare clic con il pulsante destro del mouse sul /apps/myapp/contextstores/geoloc/dialog/items/items/tab1/items nodo e scegliere Crea > Crea nodo. Specificate i seguenti valori di proprietà e fate clic su OK:

    • Nome: static
    • Tipo: cq:Widget
  5. 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
  6. Fate clic su Salva tutto.

    chlimage_1-223

Creare lo script di inizializzazione

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.

  1. Fare clic con il pulsante destro del mouse sul /apps/myapp/contextstores/geoloc nodo e scegliere Crea -> Crea file. Specificate il Nome di init.js.jsp e fate clic su OK.

  2. 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 ************"); %>
    

Rendering dei dati dell'archivio delle sessioni geoloc

Aggiungete il codice al file JSP del componente geoloc per eseguire il rendering dei dati dello store in ClientContext.

chlimage_1-224

  1. In CRXDE Lite , aprire il /apps/myapp/contextstores/geoloc/geoloc.jsp file.

  2. 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>
    
  3. Fate clic su Salva tutto.

Aggiunta del componente al contesto client

Aggiungete il componente Location Store al ClientContext in modo che venga inizializzato al caricamento della pagina.

  1. Aprite la home page dei Geometrixx Outdoors nell’istanza di creazione (http://localhost:4502/content/geometrixx-outdoors/en.html).

  2. Fate clic su Ctrl+Alt+C (Windows) o Ctrl+Opzione+C (Mac) per aprire Client Context.

  3. Fate clic sull'icona di modifica nella parte superiore di ClientContext per aprire ClientContext Designer.

  4. Trascinate il componente Location Store in ClientContext.

Consultate Informazioni sulla posizione in ClientContext

Aprite la home page dei Geometrixx Outdoors in modalità di modifica, quindi aprite ClientContext per visualizzare i dati dal componente Location Store.

  1. Aprite la pagina inglese del sito Geometrixx Outdoors. (http://localhost:4502/content/geometrixx-outdoors/en.html)
  2. Per aprire ClientContext, premete Ctrl+Alt+C (Windows) o Ctrl+Opzione+C (Mac).

Creazione di un contesto client personalizzato

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

In questa pagina