Clientcontext in detail client-context-in-detail

De context van de Cliënt vertegenwoordigt een dynamisch geassembleerde inzameling van gebruikersgegevens. Met de gegevens kunt u bepalen welke inhoud in een bepaalde situatie op een webpagina moet worden weergegeven (inhoud is gericht). De gegevens zijn ook beschikbaar voor analyses op websites en voor alle javascript-functies op de pagina.

Clientcontext bestaat hoofdzakelijk uit de volgende aspecten:

Om een standalone zittingsopslag tot stand te brengen en het toe te voegen aan de Context van de Cliënt, of een zittingsopslag te creëren die aan een component van de Opslag van de Context gebonden is. AEM installeert diverse Context Store-componenten die u direct kunt gebruiken. U kunt deze componenten als basis voor uw componenten gebruiken.

Voor informatie over het openen van de Context van de Cliënt, het vormen van de informatie die het toont, en het simuleren van de gebruikerservaring, zie Clientcontext.

Sessiewinkels session-stores

De context van de Cliënt omvat diverse zittingsopslag die gebruikersgegevens bevatten. De gegevens van de opslag komen uit de volgende bronnen:

Het clientcontextframework biedt een javascript-API die u kunt gebruiken om met zittingsopslag in wisselwerking te staan om gebruikersgegevens te lezen en te schrijven, en te luisteren en te reageren om gebeurtenissen op te slaan. U kunt ook sessiewinkels maken voor gebruikersgegevens die u gebruikt voor inhoud die zich richt op of voor andere doeleinden.

Sessieopslaggegevens blijven op de client staan. De context van de Cliënt schrijft geen gegevens terug naar de server. Als u gegevens naar de server wilt verzenden, gebruikt u een formulier of ontwikkelt u aangepaste javascript.

Elke zittingsopslag is een inzameling van bezit-waarde paren. De zittingsopslag vertegenwoordigt een inzameling van gegevens (van om het even welke soort), waarvan de conceptuele betekenis door de ontwerper en/of de ontwikkelaar kan worden beslist. In het volgende voorbeeld wordt een object gedefinieerd dat de profielgegevens vertegenwoordigt die in de sessieopslag kunnen worden opgeslagen:

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

Een zittingsopslag kan over browser zittingen worden voortgeduurd, of kan slechts voor de browser zitting duren waarin het wordt gecreeerd.

Context Store-componenten context-store-components

Een component van de contextopslag is een AEM component die aan de Context van de Cliënt kan worden toegevoegd. Typisch, tonen de componenten van de contextopslag gegevens van een zittingsopslag waaraan zij worden geassocieerd. Nochtans, is de informatie die de componentenvertoning van de contextopslag niet beperkt tot zittingsopslaggegevens.

Contextarchiefcomponenten kunnen de volgende items bevatten:

Voor een beschrijving van de geïnstalleerde componenten van de Opslag van de Context die u aan de Opslag van de Context kunt toevoegen, zie Beschikbare clientcontextcomponenten.

Doelgerichte levering van inhoud targeted-content-delivery

Profielgegevens worden ook gebruikt voor levering doelinhoud.

Clientcontext aan een pagina toevoegen adding-client-context-to-a-page

Neem de component Client Context op in de hoofdsectie van uw webpagina's om Client Context in te schakelen. Het pad van het knooppunt Client Context component is /libs/cq/personalization/components/clientcontext. Als u de component wilt opnemen, voegt u de volgende code toe aan het JSP-bestand van uw paginacomponent, dat zich net onder de component body element van uw pagina:

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

De component ClientContext veroorzaakt de pagina om de cliëntbibliotheken te laden die de Context van de Cliënt uitvoeren.

De gebruikersinterface van de clientcontext is alleen beschikbaar voor de instantie van de auteur.

Clientcontext uitbreiden extending-client-context

Om de Context van de Cliënt uit te breiden, creeer een zittingsopslag en naar keuze toon de opslaggegevens:

Een Sessiewinkel maken creating-a-session-store

Creeer een zittingsopslag voor de gegevens die u aan moet toevoegen en van de Context van de Cliënt terugwinnen. Over het algemeen, gebruikt u de volgende procedure om een zittingsopslag tot stand te brengen:

Het opnemen van javascript in de de cliëntbibliotheek personalization.stores.kernel veroorzaakt de opslag dat wordt gecreeerd wanneer het kader van de Context van de Cliënt wordt geladen.

Typen sessiewinkels types-of-session-stores

Sessiewinkels worden gemaakt en beschikbaar tijdens een browsersessie, of blijven aanwezig in browseropslag of cookies. De JavaScript-API voor clientcontext definieert verschillende klassen die beide typen gegevensopslag vertegenwoordigen:

API verstrekt ook uitbreidingen van deze klassen die voor het opslaan van JSON- gegevens of JSONP- gegevens worden gespecialiseerd:

Sessiewinkelobject maken creating-the-session-store-object

Het javascript van uw omslag van de cliëntbibliotheek leidt tot en initialiseert de zittingsopslag. De zittingsopslag moet dan worden geregistreerd gebruikend de Manager van de Opslag van de Context. In het volgende voorbeeld wordt een CQ_Analytics.SessionStore object.

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

Voor het opslaan van JSON-gegevens wordt in het volgende voorbeeld een CQ_Analytics.JSONStore object.

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

Een Context Store-component maken creating-a-context-store-component

Creeer een component van de contextopslag om zittingsopslaggegevens in de Context van de Cliënt terug te geven. Zodra gecreeerd, kunt u uw component van de contextopslag op de Context van de Cliënt slepen om gegevens van een zittingsopslag terug te geven. Contextarchiefcomponenten bestaan uit de volgende items:

De geleverde Context Store-componenten uitbreiden extending-the-provided-context-store-components

AEM verstrekt de genericstore en de genericstoreproperties contextstore componenten die u kunt uitbreiden. De structuur van uw opslaggegevens bepaalt de component die u uitbreidt:

De weergave in Sidetrap configureren configuring-the-appearance-in-sidekick

Wanneer het uitgeven van de Context van de Cliënt, verschijnen de componenten van de contextopslag in Sidetrap. Zoals bij alle componenten, componentGroup en jcr:title eigenschappen van de component van de cliëntcontext bepalen de groep en de naam van de component.

Alle componenten met een componentGroup eigenschapswaarde van Client Context standaard in Sidetrap worden weergegeven. Als u een andere waarde gebruikt voor de componentGroup eigenschap, moet u de component handmatig aan Sidetrap toevoegen met de ontwerpmodus.

Context Store-componentinstanties context-store-component-instances

Wanneer u een component van de contextopslag aan de Context van de Cliënt toevoegt, wordt een knoop die de componenteninstantie vertegenwoordigt hieronder gecreeerd /etc/clientcontext/default/content/jcr:content/stores. Dit knooppunt bevat de eigenschapwaarden die zijn geconfigureerd via het dialoogvenster voor bewerken van de component.

Wanneer de Context van de Cliënt wordt geïnitialiseerd, worden deze knopen verwerkt.

De bijbehorende Sessiewinkel initialiseren initializing-the-associated-session-store

Voeg een init.js.jsp- dossier aan uw component toe om code te produceren javascript die de zittingsopslag initialiseert die uw component van de contextopslag gebruikt. Gebruik bijvoorbeeld het initialisatiescript om configuratie-eigenschappen voor de component op te halen en deze te gebruiken om de sessieopslag te vullen.

Het gegenereerde JavaScript wordt aan de pagina toegevoegd wanneer de clientcontext wordt geïnitialiseerd bij het laden van de pagina op zowel de auteur- als de publicatieinstantie. Dit JSP wordt uitgevoerd alvorens de instantie van de component van de contextstore wordt geladen en teruggegeven.

De code moet het mime-type van het bestand instellen op text/javascript, of wordt niet uitgevoerd.

De volgende procedure leidt tot het init.js.jsp manuscriptdossier en voegt de code toe die het correcte mime type plaatst. De code die de opslaginitialisatie uitvoert zou volgen.

Sessieopslaggegevens voor generieke opslageigenschappen renderen rendering-session-store-data-for-genericstoreproperties-components

Gegevens van sessieopslagbestanden weergeven in Client Context met een consistente indeling.

Eigenschapsgegevens weergeven displaying-property-data

De personalisatietag verstrekt personalization:storePropertyTag -tag die de waarde van een eigenschap uit een sessiewinkel weergeeft. Als u de tag wilt gebruiken, neemt u de volgende coderegel op in uw JSP-bestand:

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

De tag heeft de volgende indeling:

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

De propertyName Dit kenmerk is de naam van de eigenschap store die moet worden weergegeven. De store Dit kenmerk is de naam van de geregistreerde winkel. In de volgende voorbeeldtag wordt de waarde van de tag authorizableId eigendom van de profile opslag:

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

HTML-structuur html-structure

De map personalization.ui met clientbibliotheken (https://experienceleague.adobe.com/etc/clientlibs/foundation/personalization/ui/themes/default?lang=nl) biedt de CSS-stijlen die door Client Context worden gebruikt om de HTML-code op te maken. De volgende code illustreert de voorgestelde structuur die moet worden gebruikt voor de weergave van opslaggegevens:

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

De /libs/cq/personalization/components/contextstores/profiledata context store component gebruikt deze structuur om gegevens van de opslag van de profielzitting te tonen. De cq-cc-thumbnail -klasse plaatst de miniatuurafbeelding. De cq-cc-store-property-level*x* de klassen formatteren de alfanumerieke gegevens:

Sessieopslaggegevens renderen voor componenten van het energieopslagsysteem rendering-session-store-data-for-genericstore-components

Om opslaggegevens terug te geven die een component van de algemeen opslag gebruiken, moet u:

De SAP-winkel identificeren identifying-the-genericstore-session-store

De personalisatietag verstrekt personalization:storePropertyTag -tag die de waarde van een eigenschap uit een sessiewinkel weergeeft. Als u de tag wilt gebruiken, neemt u de volgende coderegel op in uw JSP-bestand:

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

De tag heeft de volgende indeling:

<personalization:storeRendererTag store="store_name"/>

De rendermethode Sessiearchief implementeren implementing-the-session-store-renderer-method

Uw zittingsopslag zal dan een "renderer"methode nodig hebben die zal worden geroepen telkens als de component moet worden teruggegeven. De renderfunctie wordt aangeroepen met twee parameters:

Interactie met Sessiewinkels interacting-with-session-stores

Gebruik javascript om met zittingsopslag in wisselwerking te staan.

Sessiewinkels openen accessing-session-stores

Vraag een voorwerp van de zittingsopslag om gegevens aan de opslag te lezen of te schrijven. CQ_Analytics.ClientContextMgr biedt toegang tot opslagruimten op basis van de naam van de winkel. Gebruik na het verkrijgen de methoden van de CQ-Analytics.SessionStore of CQ-Analytics.PersistedSessionStore om met opslaggegevens in wisselwerking te staan.

In het volgende voorbeeld wordt het profile opslaan en vervolgens de formattedName eigenschap uit de winkel.

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

Listener maken om te reageren op een update voor een sessiewinkel creating-a-listener-to-react-to-a-session-store-update

Sessie slaat brandgebeurtenissen op, zodat het mogelijk is om listeners toe te voegen en gebeurtenissen te activeren die op deze gebeurtenissen zijn gebaseerd.

De sessiewinkels zijn gebaseerd op de Observable patroon. Zij worden uitgebreid CQ_Analytics.Observable die de addListener methode.

In het volgende voorbeeld wordt een listener toegevoegd aan de update de profile de zittingsopslag.

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

Controleren of een Sessiewinkel is gedefinieerd en geïnitialiseerd checking-that-a-session-store-is-defined-and-initialized

Sessiewinkels zijn pas beschikbaar als ze zijn geladen en geïnitialiseerd met gegevens. De volgende factoren kunnen de timing van de beschikbaarheid van de zittingsopslag beïnvloeden:

Gebruik de CQ_Analytics.ClientContextUtils object onStoreRegistered en onStoreInitialized methoden om sessiewinkels te openen alleen wanneer deze beschikbaar zijn. Met deze methoden kunt u gebeurtenislisteners registreren die reageren op sessieregistratie- en initialisatiegebeurtenissen.

In het volgende voorbeeld wordt het onStoreRegistered de profile de zittingsopslag. Wanneer de winkel is geregistreerd, wordt een listener toegevoegd aan de update gebeurtenis van de zittingsopslag. Wanneer de opslag wordt bijgewerkt, de inhoud van <div class="welcome"> -element op de pagina wordt bijgewerkt met de naam van het profile opslaan.

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

Een eigenschap uitsluiten van de sessionpersistentie-cookie excluding-a-property-from-the-sessionpersistence-cookie

Een eigenschap van een PersistedSessionStore van het voortbestaan van de sessionpersistence cookie), voegt u de eigenschap toe aan de niet-voortgezette eigenschappenlijst van de voortgezette sessieopslag.

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

De apparaatschuifregelaar configureren configuring-the-device-slider

Voorwaarden conditions

De huidige pagina moet een bijbehorende mobiele pagina hebben; dit wordt alleen bepaald als op de pagina een LiveCopy is geconfigureerd met een mobiele rollout-configuratie ( rolloutconfig.path.toLowerCase contains mobile).

Configuratie configuration

Bij het schakelen van de desktoppagina naar het bijbehorende mobiele equivalent:

Bijvoorbeeld:

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

Voorbeeld: Een aangepaste Context Store-component maken example-creating-a-custom-context-store-component

In dit voorbeeld maakt u een contextopslagcomponent die gegevens van een externe service ophaalt en deze in de sessieopslag opslaat:

De geoloc-component toevoegen add-the-geoloc-component

Maak een CQ-toepassing en voeg de geoloc-component toe.

Het dialoogvenster Bewerken geoloc maken create-the-geoloc-edit-dialog

Voor de component Context Store is een dialoogvenster voor bewerken vereist. Het dialoogvenster voor geoloc-bewerking bevat een statisch bericht dat aangeeft dat er geen eigenschappen zijn die kunnen worden geconfigureerd.

Het initialisatiescript maken create-the-initialization-script

Voeg een init.js.jsp-bestand toe aan de geoloc-component en gebruik dit bestand om de sessieopslag te maken, de locatiegegevens op te halen en toe te voegen aan de winkel.

Het bestand init.js.jsp wordt uitgevoerd wanneer de clientcontext door de pagina wordt geladen. Tegen deze tijd wordt de JavaScript-API voor clientcontext geladen en beschikbaar voor uw script.

De gegevens van de geoloc Session Store renderen render-the-geoloc-session-store-data

Voeg de code aan het JSP dossier van de geologische component toe om de opslaggegevens in de Context van de Cliënt terug te geven.

Component toevoegen aan clientcontext add-the-component-to-client-context

Voeg de component van de Opslag van de Plaats aan de Context van de Cliënt toe zodat het wordt geïnitialiseerd wanneer de pagina laadt.

Zie Locatie-informatie in clientcontext see-the-location-information-in-client-context

Open de homepage van Geometrixx Outdoors in geef wijze uit en open dan de Context van de Cliënt om de gegevens van de component van de Opslag van de Plaats te zien.

Een aangepaste clientcontext maken creating-a-customized-client-context

Als u een tweede clientcontext wilt maken, moet u de vertakking dupliceren:

/etc/clientcontext/default

Als u de aangepaste clientcontext wilt gebruiken, bewerkt u de eigenschap
path
in de ontwerpstijl van de component van de cliëntcontext, zoals inbegrepen in het paginamalplaatje. Bijvoorbeeld als de standaardlocatie van:
/libs/cq/personalization/components/clientcontext/design_dialog/items/path