Contexto de cliente en detalle

Nota

Context del cliente ha sido sustituido por ContextHub en la IU táctil. Consulte la documentación relacionada para obtener más detalles.

ClientContext representa una colección de datos de usuario que se ensambla dinámicamente. Puede utilizar los datos para determinar el contenido que se mostrará en una página web en una situación determinada (segmentación de contenido). Los datos también están disponibles para el análisis de sitios web y para cualquier JavaScript de la página.

ClientContext consiste principalmente en los siguientes aspectos:

  • El almacén de sesiones, que contiene los datos del usuario.
  • La interfaz de usuario que muestra los datos del usuario y proporciona herramientas para simular la experiencia del usuario.
  • Una API de javascript para interactuar con almacenes de sesiones.

Para crear un almacén de sesiones independiente y agregarlo a ClientContext, o crear un almacén de sesiones vinculado a un componente de Context Store. AEM instala varios componentes de Context Store que puede utilizar de inmediato. Puede utilizar estos componentes como base para sus componentes.

Para obtener información sobre cómo abrir ClientContext, configurar la información que muestra y simular la experiencia del usuario, consulte Client Context.

Almacenes de sesiones

Client Context incluye varios almacenes de sesiones que contienen datos de usuario. Los datos del almacén provienen de las siguientes fuentes:

  • El navegador web del cliente.
  • El servidor (consulte Tienda JSONP para almacenar información de fuentes de terceros)

Client Context incluye una API de javascript que puede utilizar para interactuar con almacenes de sesiones con el fin de leer y escribir datos de usuario, y escuchar y reaccionar ante eventos de almacenamiento. También puede crear almacenes de sesiones para los datos de usuario que utilice para la segmentación de contenido u otros fines.

Los datos del almacén de sesiones permanecen en el cliente. Client Context no devuelve datos al servidor. Para enviar datos al servidor, utilice un formulario o desarrolle JavaScript personalizado.

Cada almacén de sesiones es una colección de pares propiedad-valor. El almacén de sesiones representa una colección de datos (de cualquier tipo), cuyo significado conceptual puede ser decidido por el diseñador y/o el desarrollador. El siguiente ejemplo de código javascript define un objeto que representa los datos de perfil que puede contener el almacén de sesiones:

{
  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 almacén de sesiones puede persistir en todas las sesiones del explorador o solo puede durar en la sesión del explorador en la que se ha creado.

Nota

La persistencia de la tienda utiliza el almacenamiento del explorador o las cookies (la SessionPersistence cookie). El almacenamiento del explorador es más común.

Cuando se cierra y vuelve a abrir el explorador, se puede cargar un almacén de sesiones con los valores de un almacén persistente. A continuación, es necesario borrar la caché del explorador para eliminar los valores antiguos.

Componentes de Context Store

Un componente de almacén de contexto es un componente de AEM que se puede agregar a ClientContext. Normalmente, los componentes del almacén de contexto muestran datos de un almacén de sesiones con el que están asociados. Sin embargo, la información que muestran los componentes del almacén de contexto no se limita a los datos del almacén de sesiones.

Los componentes del almacén de contexto pueden incluir los siguientes elementos:

  • Secuencias de comandos JSP que definen el aspecto en Client Context.
  • Propiedades para mostrar el componente en la barra de tareas.
  • Editar cuadros de diálogo para configurar instancias de componentes.
  • Javascript que inicializa el almacén de sesiones.

Para obtener una descripción de los componentes del almacén de contexto instalados que puede agregar al almacén de contexto, consulte Componentes de contexto de clientedisponibles.

Nota

Los datos de página ya no están en el contexto del cliente como componente predeterminado. Si es necesario, puede agregarlo editando el contexto de cliente, agregando el componente Propiedades de tienda genéricas y, a continuación, configurándolo para definir la Tienda como pagedata.

Envío de contenido objetivo

La información de Perfil también se utiliza para entregar contenido dirigido.

clientcontext_targetedcontentdelivery clientcontext_targetedcontentdelivery detalle

Añadir Contexto De Cliente A Una Página

Incluya el componente ClientContext en la sección body de las páginas web para habilitar ClientContext. La ruta del nodo del componente ClientContext es /libs/cq/personalization/components/clientcontext. Para incluir el componente, agregue el siguiente código al archivo JSP del componente de página, situado justo debajo del body elemento de la página:

<cq:include path="clientcontext" resourceType="cq/personalization/components/clientcontext"/>

El componente clientcontext hace que la página cargue las bibliotecas de cliente que implementan ClientContext.

  • La API de JavaScript de Client Context.
  • Entorno de ClientContext que admite almacenes de sesiones, administración de eventos, etc.
  • Segmentos definidos.
  • Secuencias de comandos init.js que se generan para cada componente del almacén de contexto que se ha agregado a Client Context.
  • (Solo para la instancia de autor) La interfaz de usuario del contexto de cliente.

La interfaz de usuario de ClientContext solo está disponible en la instancia de creación.

Ampliación del contexto del cliente

Para ampliar ClientContext, cree un almacén de sesiones y, opcionalmente, muestre los datos del almacén:

  • Cree un almacén de sesiones para los datos de usuario que necesita para la segmentación de contenido y el análisis de Web.
  • Cree un componente de almacén de contexto para permitir a los administradores configurar el almacén de sesiones asociado y mostrar los datos de almacenamiento en ClientContext para realizar pruebas.
Nota

Si tiene (o crea) un JSONP servicio que pueda proporcionar los datos, puede simplemente utilizar el componente del almacén de JSONP contexto y asignarlo al servicio JSONP. Esto administrará el almacén de sesiones.

Creación de un almacén de sesiones

Cree un almacén de sesiones para los datos que necesita agregar y recuperar desde ClientContext. Generalmente, se utiliza el procedimiento siguiente para crear un almacén de sesiones:

  1. Cree una carpeta de biblioteca de cliente con un valor de categories propiedad de personalization.stores.kernel. ClientContext carga automáticamente las bibliotecas de cliente de esta categoría.

  2. Configure la carpeta de la biblioteca del cliente para que tenga una dependencia de la carpeta de la biblioteca del personalization.core.kernel cliente. La biblioteca del personalization.core.kernel cliente proporciona la API de JavaScript de Client Context.

  3. Añada el javascript que crea e inicializa el almacén de sesiones.

Si se incluye javascript en la biblioteca de cliente personalization.store.kernel, se crea la tienda cuando se carga el marco de trabajo de ClientContext.

Nota

Si va a crear un almacén de sesiones como parte de un componente de almacén de contexto, puede colocar el javascript en el archivo init.js.jsp del componente. En este caso, el almacén de sesiones solo se crea si el componente se agrega a ClientContext.

Tipos de almacenes de sesiones

Los almacenes de sesiones se crean y están disponibles durante una sesión del explorador o se conservan en el almacenamiento del explorador o en las cookies. La API de JavaScript de ClientContext define varias clases que representan ambos tipos de almacenes de datos:

  • CQ_Analytics.SessionStore:: Estos objetos solo residen en el DOM de la página. Los datos se crean y se conservan durante la duración de la página.
  • CQ_Analytics.PerstistedSessionStore:: Estos objetos residen en el DOM de la página y se conservan en el almacenamiento del explorador o en las cookies. Los datos están disponibles en todas las páginas y en todas las sesiones de usuario.

La API también proporciona extensiones de estas clases especializadas para almacenar datos JSON o JSONP:

Creación del objeto Almacén de sesiones

El javascript de la carpeta de la biblioteca del cliente crea e inicializa el almacén de sesiones. A continuación, el almacén de sesiones debe registrarse mediante el Administrador de almacenamiento de contexto. En el ejemplo siguiente se crea y registra un objeto 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)
}

Para almacenar datos JSON, en el siguiente ejemplo se crea y registra un objeto CQ_Analytics.JSONStore .

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

Creación de un componente de Context Store

Cree un componente de almacén de contexto para procesar los datos del almacén de sesiones en ClientContext. Una vez creado, puede arrastrar el componente de almacén de contexto a ClientContext para procesar los datos de un almacén de sesiones. Los componentes del almacén de contexto constan de los siguientes elementos:

  • Secuencia de comandos JSP para procesar los datos.
  • Cuadro de diálogo de edición.
  • Un script JSP para inicializar el almacén de sesiones.
  • (Opcional) Una carpeta de biblioteca de cliente que crea el almacén de sesiones. No es necesario incluir la carpeta de la biblioteca del cliente si el componente utiliza un almacén de sesiones existente.

Ampliación de los componentes proporcionados del almacén de contexto

AEM proporciona los componentes de almacén de contexto de genericstore y genericstoreproperties que puede ampliar. La estructura de los datos del almacén determina el componente que se extiende:

  • Par propiedad-valor: Extender el GenericStoreProperties componente. Este componente procesa automáticamente los almacenes de pares propiedad-valor. Se suministran varios puntos de interacción:

    • prolog.jsp y epilog.jsp: interacción de componentes que le permite agregar lógica del lado del servidor antes o después del procesamiento de componentes.
  • Datos complejos: Extender el GenericStore componente. El almacén de sesiones necesitará entonces un método de "procesador" al que se llamará cada vez que se deba procesar el componente. Se llama a la función de procesador con dos parámetros:

    • @param {String} store

      El almacén que se va a procesar

    • @param {String} divId

      Id. del div en el que se debe representar el almacén.

Nota

Todos los componentes de ClientContext son extensiones de los componentes Generic Store o Generic Store Properties. Hay varios ejemplos instalados en la /libs/cq/personalization/components/contextstores carpeta.

Configuración del aspecto en la barra de tareas

Al editar ClientContext, los componentes del almacén de contexto aparecen en la barra de tareas. Al igual que con todos los componentes, las propiedades componentGroup y jcr:title del componente de contexto de cliente determinan el grupo y el nombre del componente.

De forma predeterminada, todos los componentes que tienen un valor componentGroup de propiedad de Client Context aparecen en la barra de tareas. Si utiliza un valor diferente para la componentGroup propiedad, debe agregar manualmente el componente a la barra de tareas mediante el modo Diseño.

Instancias de componentes de Context Store

Cuando se agrega un componente de almacén de contexto a Client Context, a continuación se crea un nodo que representa la instancia de componente /etc/clientcontext/default/content/jcr:content/stores. Este nodo contiene los valores de propiedad que se configuran mediante el cuadro de diálogo de edición del componente.

Cuando se inicializa ClientContext, estos nodos se procesan.

Inicialización del almacén de sesiones asociado

Añada un archivo init.js.jsp a su componente para generar código javascript que inicialice el almacén de sesiones que utiliza el componente del almacén de contexto. Por ejemplo, utilice la secuencia de comandos de inicialización para recuperar las propiedades de configuración del componente y usarlas para rellenar el almacén de sesiones.

El javascript que se genera se agrega a la página cuando Client Context se inicializa al cargarse la página en las instancias de autor y publicación. Este JSP se ejecuta antes de que se cargue y procese la instancia del componente del almacén de contexto.

El código debe establecer el tipo de MIME del archivo en text/javascripto no se ejecuta.

PRECAUCIÓN

La secuencia de comandos init.js.jsp se ejecuta en la instancia de creación y publicación, pero solo si el componente del almacén de contexto se agrega a ClientContext.

El siguiente procedimiento crea el archivo de secuencias de comandos init.js.jsp y agrega el código que establece el tipo de MIME correcto. El código que realiza la inicialización de la tienda sería el siguiente.

  1. Haga clic con el botón secundario en el nodo del componente del almacén de contexto y, a continuación, haga clic en Crear > Crear archivo.

  2. En el campo Nombre, escriba init.js.jsp y haga clic en Aceptar.

  3. En la parte superior de la página, agregue el siguiente código y haga clic en Guardar todo.

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

Representación de datos del almacén de sesiones para componentes genericstoreproperties

Muestre los datos del almacén de sesiones en ClientContext con un formato coherente.

Visualización de datos de propiedad

La biblioteca de etiquetas de personalización proporciona la personalization:storePropertyTag etiqueta que muestra el valor de una propiedad de un almacén de sesiones. Para utilizar la etiqueta, incluya la siguiente línea de código en el archivo JSP:

<%@taglib prefix="personalization" uri="https://www.day.com/taglibs/cq/personalization/1.0" %>

La etiqueta tiene el siguiente formato:

<personalization:storePropertyTag propertyName="property_name" store="session_store_name"/>

El propertyName atributo es el nombre de la propiedad store que se va a mostrar. El store atributo es el nombre del almacén registrado. La etiqueta de ejemplo siguiente muestra el valor de la authorizableId propiedad de la profile tienda:

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

Estructura HTML

La carpeta de la biblioteca del cliente personalization.ui (/etc/clientlibs/foundation/personalization/ui/tem%C3%A1ticas/default?lang=es) proporciona los estilos CSS que ClientContext utiliza para dar formato al código HTML. El siguiente código ilustra la estructura sugerida para mostrar los datos del almacén:

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

El componente del almacén de contexto utiliza esta estructura para mostrar datos del almacén de sesiones de perfil. /libs/cq/personalization/components/contextstores/profiledata La cq-cc-thumbnail clase coloca la imagen en miniatura. Las cq-cc-store-property-level*x* clases dan formato a los datos alfanuméricos:

  • level0, level1 y level2 se distribuyen verticalmente y utilizan una fuente blanca.
  • level3, y cualquier nivel adicional, se distribuyen horizontalmente y utilizan una fuente blanca con un fondo más oscuro.

chlimage_1-222

Representación de datos del almacén de sesiones para componentes del almacén de genéricos

Para procesar los datos del almacén mediante un componente de almacén genérico, debe:

  • Añada la etiqueta personalization:storeRendererTag al script JSP del componente para identificar el nombre del almacén de sesiones.
  • Implemente un método de procesamiento en la clase de almacén de sesiones.

Identificación del almacén de sesiones de genericstore

La biblioteca de etiquetas de personalización proporciona la personalization:storePropertyTag etiqueta que muestra el valor de una propiedad de un almacén de sesiones. Para utilizar la etiqueta, incluya la siguiente línea de código en el archivo JSP:

<%@taglib prefix="personalization" uri="https://www.day.com/taglibs/cq/personalization/1.0" %>

La etiqueta tiene el siguiente formato:

<personalization:storeRendererTag store="store_name"/>

Implementación del método de procesamiento del almacén de sesiones

El almacén de sesiones necesitará entonces un método de "procesador" al que se llamará cada vez que se deba procesar el componente. Se llama a la función de procesador con dos parámetros:

  • @param {String} store

    El almacén que se va a procesar

  • @param {String} divId

    Id. del div en el que se debe representar el almacén.

Interacción con almacenes de sesiones

Utilice javascript para interactuar con los almacenes de sesiones.

Acceso a las tiendas de sesiones

Obtenga un objeto de almacén de sesiones para leer o escribir datos en el almacén. CQ_Analytics.ClientContextMgr proporciona acceso a las tiendas en función del nombre de la tienda. Una vez obtenidos, utilice los métodos del almacén CQ-Analytics.SessionStore o CQ-Analytics.PersistedSessionStore para interactuar con los datos almacenados.

En el ejemplo siguiente se obtiene la profile tienda y, a continuación, se recupera la formattedName propiedad de la tienda.

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

Creación de un detector para reaccionar ante una actualización de almacén de sesiones

La sesión almacena eventos de activación, de modo que es posible agregar oyentes y activar eventos en función de estos eventos.

Los almacenes de sesiones se crean según el Observable patrón. Se extienden CQ_Analytics.Observable que proporciona el addListener método.

En el ejemplo siguiente se agrega un detector al update evento del almacén de profile sesiones.

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);
}

Comprobación de que un almacén de sesiones está definido e inicializado

Los almacenes de sesiones no estarán disponibles hasta que se carguen e inicialicen con datos. Los siguientes factores pueden afectar a la temporización de la disponibilidad del almacén de sesiones:

  • Carga de página
  • Carga de JavaScript
  • Tiempo de ejecución de JavaScript
  • Tiempos de respuesta para solicitudes XHR
  • Cambios dinámicos en el almacén de sesiones

Utilice los CQ_Analytics.ClientContextUtils métodos onStoreRegistered y onStoreInitialized del objeto para acceder a los almacenes de sesiones solo cuando estén disponibles. Estos métodos le permiten registrar oyentes de evento que reaccionan a los eventos de registro e inicialización de la sesión.

PRECAUCIÓN

Si dependes de otra tienda, debes atender el caso de cuando la tienda nunca se registre.

El ejemplo siguiente utiliza el onStoreRegistered evento del almacén de profile sesiones. Cuando se registra el almacén, se agrega un detector al update evento del almacén de sesiones. Cuando se actualiza la tienda, el contenido del <div class="welcome"> elemento de la página se actualiza con el nombre de la profile tienda.

//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;
    }
}

Para evitar que una propiedad de un PersistedSessionStore se mantenga (es decir, excluirla de la sessionpersistence cookie), agregue la propiedad a la lista de propiedad no persistente del almacén de sesiones persistente.

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

Configuración del deslizador del dispositivo

Condiciones

La página actual debe tener una página móvil correspondiente; esto se determina solamente si la página tiene un LiveCopy configurado con una configuración de implementación móvil ( rolloutconfig.path.toLowerCase contiene mobile).

Configuración

Al cambiar de la página de escritorio a su equivalente móvil:

  • Se carga el DOM de la página móvil.

  • El principal div (obligatorio) que contiene el contenido, se extrae e e inserta en la página de escritorio actual.

  • Las clases CSS y body que deben cargarse deben configurarse manualmente.

Por ejemplo:

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

Ejemplo: Creación de un componente de almacén de contexto personalizado

En este ejemplo, se crea un componente de almacén de contexto que recupera datos de un servicio externo y lo almacena en el almacén de sesiones:

  • Extiende el componente genericstoreproperties.
  • Inicializa una tienda mediante un objeto CQ_Analytics.JSONPStore javascript.
  • Llama a un servicio JSONP para recuperar datos y agregarlos a la tienda.
  • Procesa los datos en ClientContext.

Añadir el componente geográfico

Cree una aplicación de CQ y agregue el componente de geolocalización.

  1. Abra CRXDE Lite en el navegador web (http://localhost:4502/crx/de).

  2. Haga clic con el botón secundario en la /apps carpeta y haga clic en Crear > Crear carpeta. Especifique un nombre de myapp y haga clic en Aceptar.

  3. De manera similar, a continuación myapp, cree una carpeta con el nombre contextstores. "

  4. Haga clic con el botón secundario en la /apps/myapp/contextstores carpeta y, a continuación, haga clic en Crear > Crear componente. Especifique los siguientes valores de propiedad y haga clic en Siguiente:

    • Etiqueta: geoloc
    • Título: Almacén de ubicaciones
    • Super Type: cq/personalization/components/contextstores/genericstoreproperties
    • Grupo: ClientContext
  5. En el cuadro de diálogo Crear componente, haga clic en Siguiente en cada página hasta que se active el botón Aceptar y, a continuación, haga clic en Aceptar.

  6. Haga clic en Guardar todo.

Crear el cuadro de diálogo Editar geográfico

El componente del almacén de contexto requiere un cuadro de diálogo de edición. El cuadro de diálogo de edición de geolocalización contendrá un mensaje estático que indica que no hay propiedades que configurar.

  1. Haga clic con el botón secundario en el nodo y /libs/cq/personalization/components/contextstores/genericstoreproperties/dialog haga clic en Copiar.

  2. Haga clic con el botón secundario en el /apps/myapp/contextstores/geoloc nodo y, a continuación, haga clic en Pegar.

  3. Elimine todos los nodos secundarios situados debajo del nodo /apps/myapp/contextstore/geoloc/dialog/items/items/tab1/items:

    • store
    • propiedades
    • thumbnail
  4. Haga clic con el botón secundario en el /apps/myapp/contextstores/geoloc/dialog/items/items/tab1/items nodo y haga clic en Crear > Crear nodo. Especifique los siguientes valores de propiedad y haga clic en Aceptar:

    • Nombre: static
    • Tipo: cq:Widget
  5. Añada las siguientes propiedades en el nodo:

    Nombre Tipo Value
    cls Cadena x-form-field-set-description
    text Cadena El componente de geolocalización no requiere configuración.
    xtype Cadena static
  6. Haga clic en Guardar todo.

    chlimage_1-223

Creación de la secuencia de comandos de inicialización

Añada un archivo init.js.jsp al componente geolocalizado y úselo para crear el almacén de sesiones, recuperar los datos de ubicación y agregarlo a la tienda.

El archivo init.js.jsp se ejecuta cuando la página carga Client Context. En este momento, la API de javascript de ClientContext está cargada y disponible para su script.

  1. Haga clic con el botón secundario en el /apps/myapp/contextstores/geoloc nodo y haga clic en Crear -> Crear archivo. Especifique un nombre para init.js.jsp y haga clic en Aceptar.

  2. Añada el siguiente código a la parte superior de la página y haga clic en Guardar todo.

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

Representar los datos del almacén de sesiones de geolocalización

Añada el código en el archivo JSP del componente geolocalizado para procesar los datos del almacén en Client Context.

chlimage_1-224

  1. En CRXDE Lite, abra el /apps/myapp/contextstores/geoloc/geoloc.jsp archivo.

  2. Añada el siguiente código HTML debajo del código auxiliar:

    <%@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. Haga clic en Guardar todo.

Añadir el componente a ClientContext

Añada el componente Almacén de ubicaciones a ClientContext para que se inicialice al cargarse la página.

  1. Abra la página de inicio Geometrixx Outdoors en la instancia de creación (http://localhost:4502/content/geometrixx-outdoors/en.html).

  2. Haga clic en Ctrl-Alt-c (ventanas) o control-opción-c (Mac) para abrir Client Context.

  3. Haga clic en el icono Editar en la parte superior de Client Context para abrir ClientContext Designer.

  4. Arrastre el componente Almacén de ubicaciones a ClientContext.

Consulte la información de ubicación en el contexto del cliente

Abra la página de inicio Geometrixx Outdoors en modo de edición y, a continuación, abra Client Context para ver los datos del componente Almacén de ubicaciones.

  1. Abra la página en inglés del sitio de Geometrixx Outdoors. (http://localhost:4502/content/geometrixx-outdoors/en.html)
  2. Para abrir Client Context, pulse Ctrl-Alt-c (windows) o control-opción-c (Mac).

Creación de un contexto de cliente personalizado

Para crear un segundo contexto de cliente, debe realizar el duplicado de la rama:

/etc/clientcontext/default

  • La subcarpeta:

    /content

    contendrá el contenido del contexto de cliente personalizado.

  • La carpeta:

    /contextstores

    permite definir diferentes configuraciones para los almacenes de contexto.

Para utilizar el contexto de cliente personalizado, edite la propiedad
path
en el estilo de diseño del componente de contexto de cliente, tal como se incluye en la plantilla de página. Por ejemplo, como ubicación estándar de:
/libs/cq/personalization/components/clientcontext/design_dialog/items/path

En esta página