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 die als doel heeft). De gegevens zijn ook beschikbaar voor analyses op websites en voor JavaScript 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. Adobe Experience Manager (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, die de informatie vormen die het toont, en het simuleren van de gebruikerservaring, zie {de Context van de Cliënt 0} 🔗.

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 kader van de Context van de Cliënt verstrekt a ​ JavaScript API ​ dat 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, of ontwikkelaar, of allebei kan worden beslist. In het volgende voorbeeld definieert de JavaScript-code een object dat staat voor de profielgegevens die de sessieopslag kan bevatten:

{
  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 component CQ 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 Componenten van de Context van de Cliënt ​.

Doelgerichte levering van inhoud targeted-content-delivery

De informatie van het profiel wordt ook gebruikt voor het leveren van ​ gerichte inhoud ​.

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 het element body van de pagina bevindt:

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

Als u de JavaScript opneemt in de client-bibliotheek personalization.stores.kernel, wordt de winkel gemaakt wanneer het Context-framework van de client wordt geladen.

Soorten 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

De JavaScript van uw clientbibliotheekmap maakt en initialiseert de sessiewinkel. De zittingsopslag moet worden geregistreerd gebruikend de Manager van de Opslag van de Context. Het volgende voorbeeld leidt tot en registreert a ​ CQ_Analytics.SessionStore ​ voorwerp.

//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, leidt het volgende voorbeeld tot en registreert a ​ CQ_Analytics.JSONStore ​ voorwerp.

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 Sidekick configureren configuring-the-appearance-in-sidekick

Wanneer het uitgeven van de Context van de Cliënt, verschijnen de componenten van de contextopslag in Sidekick. Net als bij alle componenten bepalen de eigenschappen componentGroup en jcr:title van de client-contextcomponent de groep en naam van de component.

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

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 gecreeerd hieronder /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-bestand toe aan uw component om JavaScript-code te genereren waarmee de sessieopslagruimte wordt geïnitialiseerd die door uw contextwinkelcomponent wordt gebruikt. Bijvoorbeeld, gebruik het initialisatiescript om configuratieeigenschappen voor de component terug te winnen en hen te gebruiken om de zittingsopslag te bevolken.

De JavaScript die wordt gegenereerd, wordt aan de pagina toegevoegd wanneer Client Context 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 , anders wordt het 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 de personalization:storePropertyTag markering die de waarde van een bezit van een zittingsopslag toont. 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"/>

Het kenmerk propertyName is de naam van de eigenschap store die moet worden weergegeven. Het kenmerk store is de naam van de geregistreerde winkel. Met de volgende voorbeeldtag wordt de waarde van de eigenschap authorizableId van de profile store weergegeven:

<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 contextopslagcomponent van /libs/cq/personalization/components/contextstores/profiledata gebruikt deze structuur om gegevens uit het profielsessiearchief weer te geven. De klasse cq-cc-thumbnail plaatst de miniatuurafbeelding. De klassen cq-cc-store-property-level*x* formatteren de alfanumerieke gegevens:

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

Als u opslaggegevens wilt renderen met een component genericstore, moet u het volgende doen:

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

De personalisatietag verstrekt de personalization:storePropertyTag markering die de waarde van een bezit van een zittingsopslag toont. 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 heeft een "renderer"methode nodig die wordt 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 te communiceren met sessiewinkels.

Sessiewinkels openen accessing-session-stores

Vraag een voorwerp van de zittingsopslag om gegevens aan de opslag te lezen of te schrijven. ​ CQ_Analytics.ClientContextMgr ​ verleent toegang tot opslag die op de archiefnaam wordt gebaseerd. Zodra verkregen, gebruik de methodes van ​ CQ_Analytics.SessionStore ​ of ​ CQ_Analytics.PersistedSessionStore ​ om met opslaggegevens in wisselwerking te staan.

In het volgende voorbeeld wordt de profile store opgehaald en wordt de eigenschap formattedName opgehaald uit de store.

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 het Observable -patroon. Ze breiden CQ_Analytics.Observable uit met de methode [addListener](/docs/experience-manager-65/content/implementing/developing/personlization/client-context/ccjsapi.md#addlistener-event-fct-scope) .

In het volgende voorbeeld wordt een listener toegevoegd aan de update -gebeurtenis van de profile -sessiewinkel.

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 ​ CQ_Analytics.ClientContextUtils ​ voorwerp ​ onStoreRegistered ​ en ​ onStoreInitialized ​ methodes om tot zittingsopslag slechts toegang te hebben wanneer zij beschikbaar zijn. Met deze methoden kunt u gebeurtenislisteners registreren die reageren op sessieregistratie- en initialisatiegebeurtenissen.

In het volgende voorbeeld wordt de gebeurtenis onStoreRegistered van de profile -sessiewinkel gebruikt. Wanneer de winkel is geregistreerd, wordt een listener toegevoegd aan de update -gebeurtenis van de sessiewinkel. Wanneer de winkel wordt bijgewerkt, wordt de inhoud van het element <div class="welcome"> op de pagina bijgewerkt met de naam uit de 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;
    }
}

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

Als u wilt voorkomen dat een eigenschap van een PersistedSessionStore wordt voortgezet (door deze uit te sluiten van het sessionpersistence -cookie), voegt u de eigenschap toe aan de lijst met niet-persistente eigenschappen van de persistente sessiewinkel.

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

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 bevat 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 component Context Store 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 geoloccomponent 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 om te configureren.

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 op 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, dupliceert u de vertakking:

/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