Contexto do cliente em detalhes client-context-in-detail

O Client Context representa uma coleção de dados do usuário montada dinamicamente. Você pode usar os dados para determinar o conteúdo a ser exibido em uma página da Web em uma determinada situação (direcionamento de conteúdo). Os dados também estão disponíveis para análise de site e para qualquer JavaScript na página.

O Contexto do cliente consiste principalmente nos seguintes aspectos:

Para criar um armazenamento de sessão independente e adicioná-lo ao Contexto do cliente, ou criar um armazenamento de sessão vinculado a um componente do Armazenamento de contexto. O Adobe Experience Manager (AEM) instala vários componentes do Context Store que você pode usar imediatamente. Você pode usar esses componentes como base para seus componentes.

Para obter informações sobre como abrir o Client Context, configurar as informações exibidas e simular a experiência do usuário, consulte Client Context.

Lojas de sessão session-stores

O Client Context inclui vários armazenamentos de sessão que contêm dados do usuário. Os dados da loja vêm das seguintes fontes:

A estrutura do Client Context fornece uma API JavaScript que você pode usar para interagir com armazenamentos de sessão para ler e gravar dados do usuário, e ouvir e reagir para armazenar eventos. Você também pode criar armazenamentos de sessão para dados de usuário que você usa para direcionamento de conteúdo ou outros fins.

Os dados do repositório de sessão permanecem no cliente. O Client Context não grava dados no servidor. Para enviar dados ao servidor, use um formulário ou desenvolva um JavaScript personalizado.

Cada armazenamento de sessão é uma coleção de pares de valor de propriedade. O armazenamento de sessão representa uma coleção de dados (de qualquer tipo), cujo significado conceitual pode ser decidido pelo designer ou desenvolvedor, ou ambos. O exemplo de código JavaScript a seguir define um objeto que representa os dados do perfil que o armazenamento de sessão pode conter:

{
  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"
}

Um armazenamento de sessão pode ser mantido entre sessões do navegador ou pode durar somente para a sessão do navegador em que foi criado.

Componentes do armazenamento de contexto context-store-components

Um componente do armazenamento de contexto é um componente do CQ que pode ser adicionado ao Client Context. Normalmente, os componentes do armazenamento de contexto exibem dados de um armazenamento de sessão ao qual estão associados. No entanto, as informações que os componentes do armazenamento de contexto exibem não estão limitadas aos dados do armazenamento de sessão.

Os componentes do armazenamento de contexto podem incluir os seguintes itens:

Para obter uma descrição dos Componentes do Context Store instalados que você pode adicionar ao Context Store, consulte Componentes disponíveis do Client Context.

Entrega de conteúdo direcionada targeted-content-delivery

As informações de perfil também são usadas para entrega conteúdo direcionado.

Adicionar O Contexto Do Cliente A Uma Página adding-client-context-to-a-page

Inclua o componente Contexto do cliente na seção de corpo das páginas da Web para ativar o Contexto do cliente. O caminho do nó do componente Contexto do cliente é /libs/cq/personalization/components/clientcontext. Para incluir o componente, adicione o seguinte código ao arquivo JSP do componente Página, localizado logo abaixo de body elemento da sua página:

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

O componente clientcontext faz com que a página carregue as bibliotecas de clientes que implementam o Client Context.

A interface do usuário do Client Context está disponível somente na instância do autor.

Extensão do Client Context extending-client-context

Para estender o Client Context, crie um armazenamento de sessão e, como opção, exiba os dados de armazenamento:

Criar um armazenamento de sessão creating-a-session-store

Crie um armazenamento de sessão para os dados que você deve adicionar e recuperar do Client Context. Geralmente, você usa o seguinte procedimento para criar um armazenamento de sessão:

Incluir o JavaScript na biblioteca do cliente personalization.stores.kernel faz com que o armazenamento seja criado quando a estrutura Client Context for carregada.

Tipos de lojas de sessão types-of-session-stores

Os armazenamentos de sessão são criados e disponibilizados durante uma sessão do navegador ou são mantidos no armazenamento do navegador ou em cookies. A API JavaScript do Client Context define várias classes que representam ambos os tipos de armazenamentos de dados:

A API também fornece extensões dessas classes especializadas para armazenar dados JSON ou dados JSONP:

Criando o objeto de armazenamento da sessão creating-the-session-store-object

O JavaScript da pasta da biblioteca do cliente cria e inicializa o armazenamento de sessão. O armazenamento de sessão deve ser registrado usando o Gerenciador de Armazenamento de Contexto. O exemplo a seguir cria e registra um 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 armazenar dados JSON, o exemplo a seguir cria e registra um CQ_Analytics.JSONStore objeto.

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

Criação de um componente de armazenamento de contexto creating-a-context-store-component

Crie um componente de armazenamento de contexto para renderizar os dados do armazenamento de sessão no Contexto do Cliente. Depois de criado, você pode arrastar o componente de armazenamento de contexto para o Contexto do cliente para renderizar dados de um armazenamento de sessão. Os componentes do armazenamento de contexto consistem nos seguintes itens:

Extensão dos componentes fornecidos do armazenamento de contexto extending-the-provided-context-store-components

O AEM fornece os componentes de armazenamento genérico e de armazenamento de contexto genérico das propriedades que você pode estender. A estrutura dos dados de armazenamento determina o componente que você estende:

Configuração da aparência no Sidekick configuring-the-appearance-in-sidekick

Ao editar o Contexto do cliente, os componentes do armazenamento de contexto aparecem no Sidekick. Como em todos os componentes, a variável componentGroup e jcr:title as propriedades do componente de contexto do cliente determinam o grupo e o nome do componente.

Todos os componentes que têm um componentGroup valor da propriedade de Client Context são exibidos em Sidekick por padrão. Se você usar um valor diferente para a variável componentGroup propriedade, é necessário adicionar manualmente o componente ao Sidekick usando o modo Design.

Instâncias do componente de armazenamento de contexto context-store-component-instances

Quando você adiciona um componente de armazenamento de contexto ao Contexto do cliente, um nó que representa a instância do componente é criado abaixo /etc/clientcontext/default/content/jcr:content/stores. Este nó contém os valores de propriedade que são configurados usando a caixa de diálogo de edição do componente.

Quando o Client Context é inicializado, esses nós são processados.

Inicializando o Repositório de Sessão Associado initializing-the-associated-session-store

Adicione um arquivo init.js.jsp ao componente para gerar o código JavaScript que inicializa o armazenamento de sessão que seu componente de armazenamento de contexto usa. Por exemplo, use o script de inicialização para recuperar as propriedades de configuração do componente e usá-las para preencher o armazenamento da sessão.

O JavaScript gerado é adicionado à página quando o Contexto do cliente é inicializado no carregamento da página nas instâncias do autor e de publicação. Esta JSP é executada antes que a instância do componente do armazenamento de contexto seja carregada e renderizada.

O código deve definir o tipo MIME do arquivo como text/javascriptou não será executado.

O procedimento a seguir cria o arquivo de script init.js.jsp e adiciona o código que define o tipo mime correto. O código que executa a inicialização de armazenamento seguiria.

Renderização de Dados de Repositório de Sessão para componentes genericstoreproperties rendering-session-store-data-for-genericstoreproperties-components

Exibir dados de armazenamento de sessão no Contexto do Cliente usando um formato consistente.

Exibição de dados de propriedade displaying-property-data

A biblioteca de tags de personalização fornece a personalization:storePropertyTag tag que exibe o valor de uma propriedade a partir de um armazenamento de sessão. Para usar a tag, inclua a seguinte linha de código no arquivo JSP:

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

A tag tem o seguinte formato:

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

A variável propertyName attribute é o nome da propriedade de armazenamento a ser exibida. A variável store attribute é o nome do armazenamento registrado. O exemplo de tag a seguir exibe o valor do authorizableId propriedade do profile armazenar:

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

Estrutura HTML html-structure

A pasta da biblioteca do cliente personalization.ui (https://experienceleague.adobe.com/etc/clientlibs/foundation/personalization/ui/themes/default?lang=pt-BR) fornece os estilos CSS que o Contexto do Cliente usa para formatar o código HTML. O código a seguir ilustra a estrutura sugerida para usar na exibição de dados de armazenamento:

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

A variável /libs/cq/personalization/components/contextstores/profiledata o componente de armazenamento de contexto usa essa estrutura para exibir dados do armazenamento de sessão de perfil. A variável cq-cc-thumbnail A classe coloca a imagem em miniatura. A variável cq-cc-store-property-level*x* as classes formatam os dados alfanuméricos:

Renderização de Dados de Repositório de Sessão para Componentes de repositório genérico rendering-session-store-data-for-genericstore-components

Para renderizar dados de armazenamento usando um componente de armazenamento genérico, faça o seguinte:

Identificação do armazenamento de sessão genericstore identifying-the-genericstore-session-store

A biblioteca de tags de personalização fornece a personalization:storePropertyTag tag que exibe o valor de uma propriedade a partir de um armazenamento de sessão. Para usar a tag, inclua a seguinte linha de código no arquivo JSP:

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

A tag tem o seguinte formato:

<personalization:storeRendererTag store="store_name"/>

Implementar o método renderizador de armazenamento de sessão implementing-the-session-store-renderer-method

Seu armazenamento de sessão precisa de um método "renderizador" que é chamado sempre que o componente deve ser renderizado. A função do renderizador é chamada com dois parâmetros:

Interagir com armazenamentos de sessão interacting-with-session-stores

Use o JavaScript para interagir com armazenamentos de sessão.

Acessar lojas de sessão accessing-session-stores

Obtenha um objeto de armazenamento de sessão para ler ou gravar dados no armazenamento. CQ_Analytics.ClientContextMgr fornece acesso a lojas com base no nome da loja. Uma vez obtidos, utilizar os métodos do CQ_Analytics.SessionStore ou CQ_Analytics.PersistedSessionStore para interagir com os dados da loja.

O exemplo a seguir obtém o profile armazenar e recuperar o formattedName propriedade da loja.

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

Criando um Listener para reagir a uma Atualização do Repositório da Sessão creating-a-listener-to-react-to-a-session-store-update

A sessão armazena eventos de acionamento, de modo que é possível adicionar ouvintes e acionar eventos com base nesses eventos.

Os armazenamentos de sessão são criados no Observable padrão. Eles estendem CQ_Analytics.Observable que fornece a [addListener](/docs/experience-manager-65/content/implementing/developing/personlization/client-context/ccjsapi.md#addlistener-event-fct-scope) método.

O exemplo a seguir adiciona um ouvinte à variável update evento do profile armazenamento de sessão.

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

Verificando se um Repositório de Sessão está definido e inicializado checking-that-a-session-store-is-defined-and-initialized

Os armazenamentos de sessão não estarão disponíveis até que sejam carregados e inicializados com dados. Os seguintes fatores podem afetar o tempo de disponibilidade do armazenamento da sessão:

Use o CQ_Analytics.ClientContextUtils do objeto onStoreRegistered e onStoreInitialized métodos para acessar armazenamentos de sessão somente quando estiverem disponíveis. Esses métodos permitem registrar ouvintes de eventos que reagem a eventos de registro e inicialização de sessão.

O exemplo a seguir usa o onStoreRegistered evento do profile armazenamento de sessão. Quando o armazenamento é registrado, um listener é adicionado ao update evento do armazenamento de sessão. Quando a loja é atualizada, o conteúdo de <div class="welcome"> elemento na página é atualizado com o nome do campo profile armazenamento.

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

Excluir uma propriedade do cookie sessionpersistence excluding-a-property-from-the-sessionpersistence-cookie

Para impedir que uma propriedade de um PersistedSessionStore de ser mantido (ou seja, exclua-o da lista sessionpersistence cookie), adicione a propriedade à lista de propriedades não persistentes do armazenamento de sessão persistente.

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

Configuração do controle deslizante do dispositivo configuring-the-device-slider

Condições conditions

A página atual deve ter uma página móvel correspondente; isso é determinado somente se a página tiver uma Live Copy definida com uma configuração de implantação móvel ( rolloutconfig.path.toLowerCase contém mobile).

Configuração configuration

Ao alternar da página da área de trabalho para seu equivalente móvel:

Por exemplo:

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

Exemplo: criação de um componente de armazenamento de contexto personalizado example-creating-a-custom-context-store-component

Neste exemplo, você cria um componente de armazenamento de contexto que recupera dados de um serviço externo e os armazena no armazenamento de sessão:

Adicionar o componente geográfico add-the-geoloc-component

Crie um aplicativo CQ e adicione o componente geográfico.

Criar a caixa de diálogo de edição geográfica create-the-geoloc-edit-dialog

O componente de armazenamento de contexto requer uma caixa de diálogo de edição. A caixa de diálogo de edição geográfica contém uma mensagem estática que indica que não há propriedades a serem configuradas.

Criar o script de inicialização create-the-initialization-script

Adicione um arquivo init.js.jsp ao componente geográfico e use-o para criar o armazenamento de sessão, recuperar os dados de local e adicioná-lo ao armazenamento.

O arquivo init.js.jsp é executado quando o Client Context é carregado pela página. Nesse momento, a API JavaScript do Client Context é carregada e fica disponível para o script.

Renderizar os Dados de Repositório da Sessão Geográfica render-the-geoloc-session-store-data

Adicione o código ao arquivo JSP do componente geográfico para renderizar os dados de armazenamento no Contexto do cliente.

Adicionar o componente ao Client Context add-the-component-to-client-context

Adicione o componente de Armazenamento de localização ao Contexto do cliente para que ele seja inicializado quando a página for carregada.

Consulte as Informações de localização no Client Context see-the-location-information-in-client-context

Abra a página inicial do Geometrixx Outdoors no modo de edição e abra o Contexto do cliente para ver os dados do componente Loja de localização.

Criação de um Contexto de cliente personalizado creating-a-customized-client-context

Para criar um segundo contexto de cliente, duplique a ramificação:

/etc/clientcontext/default

Para usar o contexto de cliente personalizado, edite a propriedade
path
no estilo de design do componente de contexto do cliente, conforme incluído no modelo de página. Por exemplo, como o local padrão de:
/libs/cq/personalization/components/clientcontext/design_dialog/items/path