Client Context en detalle client-context-in-detail

Client Context representa una colección de datos de usuario ensamblada 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.

Client Context consta principalmente de los siguientes aspectos:

Para crear un almacén de sesiones independiente y agregarlo a Client Context, 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 Client Context, cómo configurar la información que muestra y simular la experiencia del usuario, consulte ClientContext.

Almacenamiento de sesiones session-stores

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

El marco de Client Context proporciona un API de javascript que puede utilizar para interactuar con almacenes de sesiones para leer y escribir datos de usuarios, y escuchar y reaccionar ante eventos de almacenamiento. También puede crear almacenes de sesión para datos de usuario que utilice con fines de segmentación de contenido u otros fines.

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

Cada almacén de sesión es una colección de pares de 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 desarrollador. El siguiente ejemplo de código javascript define un objeto que representa los datos de perfil que podría 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 se puede mantener en todas las sesiones del explorador o solo puede durar durante la sesión del explorador en la que se crea.

Componentes de Context Store context-store-components

Un componente de almacén de contexto es un componente AEM que se puede añadir a Client Context. Normalmente, los componentes del almacén de contexto muestran datos de un almacén de sesión 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:

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

Entrega de contenido dirigido targeted-content-delivery

La información de perfil también se utiliza para la entrega contenido segmentado.

Adición De Contexto De Cliente A Una Página adding-client-context-to-a-page

Incluya el componente Client Context en la sección del cuerpo de las páginas web para habilitar Client Context. La ruta del nodo del componente Client Context es /libs/cq/personalization/components/clientcontext. Para incluir el componente, añada 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 Client Context.

La interfaz de usuario de Client Context solo está disponible en la instancia de autor.

Ampliación de Client Context extending-client-context

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

Creación de un almacén de sesiones creating-a-session-store

Cree un almacén de sesiones para los datos que debe añadir y recuperar de Client Context. Por lo general, se utiliza el siguiente procedimiento para crear un almacén de sesiones:

Al incluir el javascript en la biblioteca de cliente personalization.store.kernel , el almacén se crea cuando se carga el marco de cliente.

Tipos de almacenes de sesión types-of-session-stores

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

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

Creación del objeto Almacén de sesiones creating-the-session-store-object

El javascript de la carpeta de biblioteca del cliente crea e inicializa el almacén de sesiones. El almacén de sesiones debe registrarse mediante el Administrador del almacén de contexto. El siguiente ejemplo crea y registra un CQ_Analytics.SessionStore objeto.

//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, el siguiente ejemplo crea y registra un CQ_Analytics.JSONStore objeto.

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

Creación de un componente de almacén de contexto creating-a-context-store-component

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

Ampliación de los componentes del almacén de contexto proporcionados extending-the-provided-context-store-components

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

Configuración del aspecto en la barra de tareas configuring-the-appearance-in-sidekick

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

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

Instancias de componentes de Almacenamiento de contexto context-store-component-instances

Al añadir un componente de almacén de contexto a Client Context, a continuación se crea un nodo que representa la instancia del 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 Client Context se inicializa, estos nodos se procesan.

Inicialización del almacén de sesiones asociado initializing-the-associated-session-store

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 de almacén de contexto. Por ejemplo, utilice la secuencia de comandos de inicialización para recuperar las propiedades de configuración del componente y utilícelas para rellenar el almacén de sesiones.

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

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

El siguiente procedimiento crea el archivo de script init.js.jsp y agrega el código que establece el tipo de mime correcto. El código que realiza la inicialización del almacén sería el siguiente.

Procesamiento de datos del almacén de sesión para componentes genericstoreproperties rendering-session-store-data-for-genericstoreproperties-components

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

Visualización de datos de propiedad displaying-property-data

La biblioteca de etiquetas de personalización proporciona la variable 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 su 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"/>

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

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

Estructura del HTML html-structure

La carpeta de biblioteca de cliente de personalization.ui (https://experienceleague.adobe.com/etc/clientlibs/foundation/personalization/ui/themes/default?lang=es) proporciona los estilos CSS que utiliza Client Context para dar formato al código de HTML. El siguiente código ilustra la estructura sugerida para usarla 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>

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

Procesamiento de datos del almacén de sesión para componentes de almacén de productos genéricos rendering-session-store-data-for-genericstore-components

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

Identificación del almacén de sesiones de genericstore identifying-the-genericstore-session-store

La biblioteca de etiquetas de personalización proporciona la variable 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 su 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 renderizador del almacén de sesiones implementing-the-session-store-renderer-method

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

Interacción con las tiendas de sesión interacting-with-session-stores

Utilice javascript para interactuar con almacenes de sesiones.

Acceso a las tiendas de sesión accessing-session-stores

Obtenga un objeto de almacén de sesión 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 obtenido, utilice los métodos del CQ-Analytics.SessionStore o CQ-Analytics.PersistedSessionStore para interactuar con los datos del almacén.

El ejemplo siguiente obtiene la variable profile almacene y luego recupere la variable formattedName 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 oyente para reaccionar a una actualización de almacén de sesiones creating-a-listener-to-react-to-a-session-store-update

La sesión almacena eventos de activación, por lo que es posible añadir oyentes y eventos de déclencheur basados en estos eventos.

Las tiendas de sesión se crean en la variable Observable patrón. Se extienden CQ_Analytics.Observable que proporciona la variable addListener método.

En el siguiente ejemplo se agrega un oyente al update del profile almacén de 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 checking-that-a-session-store-is-defined-and-initialized

Los almacenes de sesión no están disponibles hasta que se cargan e inicializan con datos. Los siguientes factores pueden afectar al momento de disponibilidad del almacén de sesiones:

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

El ejemplo siguiente utiliza la variable onStoreRegistered del profile almacén de sesiones. Cuando se registra la tienda, se agrega un oyente al update del almacén de sesiones. Cuando se actualiza la tienda, el contenido de la variable <div class="welcome"> en la página se actualiza con el nombre del 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;
    }
}

Exclusión de una propiedad de la cookie de persistencia de sesión excluding-a-property-from-the-sessionpersistence-cookie

Para evitar una propiedad de un PersistedSessionStore de persistir (es decir, excluirlo del sessionpersistence ), añada la propiedad a la lista de propiedades no persistentes del almacén de sesión 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 configuring-the-device-slider

Condiciones conditions

La página actual debe tener una página móvil correspondiente; esto solo se determina si la página tiene una LiveCopy configurada con una configuración de lanzamiento móvil ( rolloutconfig.path.toLowerCase contains mobile).

Configuración configuration

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

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 example-creating-a-custom-context-store-component

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:

Añadir el componente geográfico add-the-geoloc-component

Cree una aplicación CQ y añada el componente geolocalizado.

Crear el cuadro de diálogo Editar geográfico create-the-geoloc-edit-dialog

El componente de 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 para configurar.

Creación del script de inicialización create-the-initialization-script

Agregue un archivo init.js.jsp al componente geográfico y utilícelo para crear el almacén de sesiones, recuperar los datos de ubicación y añadirlos a la tienda.

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

Procesar los datos geolocalizados del almacén de sesiones render-the-geoloc-session-store-data

Agregue el código al archivo JSP del componente geográfico para procesar los datos de almacenamiento en Client Context.

Añadir el componente a Client Context add-the-component-to-client-context

Agregue el componente Almacén de ubicación a Client Context para que se inicialice cuando se cargue la página.

Consulte la información de ubicación en Client Context see-the-location-information-in-client-context

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

Creación de un contexto de cliente personalizado creating-a-customized-client-context

Para crear un segundo contexto de cliente, debe duplicar la rama:

/etc/clientcontext/default

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