Klientkontext i detalj client-context-in-detail

Klientkontexten representerar en dynamiskt sammansatt samling med användardata. Du kan använda data för att avgöra vilket innehåll som ska visas på en webbsida i en viss situation (målinriktning av innehåll). Data är också tillgängliga för webbplatsanalys och för JavaScript på sidan.

Klientkontext består huvudsakligen av följande aspekter:

Om du vill skapa ett fristående sessionsarkiv och lägga till det i klientkontexten, eller skapa ett sessionsarkiv som är kopplat till en Context Store-komponent. Adobe Experience Manager (AEM) installerar flera Context Store-komponenter som du kan använda direkt. Du kan använda de här komponenterna som bas för dina komponenter.

Mer information om hur du öppnar klientkontext, konfigurerar den information som visas och simulerar användarupplevelsen finns i Klientkontext.

Sessionsarkiv session-stores

Klientkontexten innehåller olika sessionslager som innehåller användardata. Lagringsdata kommer från följande källor:

Client Context Framework innehåller en JavaScript API som du kan använda för att interagera med sessionsarkiv för att läsa och skriva användardata, samt för att lyssna och reagera på butikshändelser. Du kan också skapa sessionsarkiv för användardata som du använder för innehåll som är avsett för målinriktning eller andra syften.

Sessionsarkivdata finns kvar på klienten. Klientkontexten skriver inte tillbaka data till servern. Använd ett formulär eller utveckla ett anpassat JavaScript om du vill skicka data till servern.

Varje sessionsarkiv är en samling egenskapspar. Sessionsarkivet representerar en samling data (av alla slag) vars konceptuella betydelse kan avgöras av designern, utvecklaren eller båda. I följande exempel definierar JavaScript-kod ett objekt som representerar de profildata som sessionslagringen kan innehålla:

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

Ett sessionsarkiv kan sparas mellan olika webbläsarsessioner eller kan bara vara i den webbläsarsession som det skapades i.

Context Store-komponenter context-store-components

En kontextlagringskomponent är en CQ-komponent som kan läggas till i klientkontexten. Komponenter i kontextarkivet visar vanligtvis data från ett sessionsarkiv som de är associerade med. Informationen som visas i kontextlagringskomponenter är dock inte begränsad till sessionsarkivdata.

Context Store-komponenter kan innehålla följande objekt:

En beskrivning av de installerade Context Store-komponenterna som du kan lägga till i Context Store finns på Tillgängliga klientkontextkomponenter.

Målanpassad innehållsleverans targeted-content-delivery

Profilinformation används också för att leverera riktat innehåll.

Lägga till klientkontext på en sida adding-client-context-to-a-page

Inkludera klientkontextkomponenten i huvudavsnittet på dina webbsidor för att aktivera klientkontext. Sökvägen till klientkontextkomponentnoden är /libs/cq/personalization/components/clientcontext. Om du vill ta med komponenten lägger du till följande kod i JSP-filen för sidkomponenten, som finns precis nedanför body element på sidan:

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

Klientkontextkomponenten gör att sidan läser in klientbiblioteken som implementerar klientkontext.

Användargränssnittet för klientkontext är bara tillgängligt på författarinstansen.

Utöka klientkontext extending-client-context

Om du vill utöka klientkontexten skapar du ett sessionsarkiv och kan även visa lagringsdata:

Skapa ett sessionsarkiv creating-a-session-store

Skapa ett sessionsarkiv för data som du måste lägga till i och hämta från klientkontext. I allmänhet använder du följande procedur för att skapa ett sessionsarkiv:

Om JavaScript inkluderas i klientbiblioteket personalization.stores.kernel skapas arkivet när klientkontextramverket läses in.

Olika typer av sessionslager types-of-session-stores

Sessionsarkiv skapas och är tillgängliga under en webbläsarsession, eller lagras i webbläsarlagring eller cookies. JavaScript-API:t för klientkontext definierar flera klasser som representerar båda typerna av datalager:

API:t innehåller även tillägg för dessa klasser som är specialiserade för att lagra JSON-data eller JSONP-data:

Skapar objektet för sessionsarkivet creating-the-session-store-object

JavaScript-koden i klientbiblioteksmappen skapar och initierar sessionsarkivet. Sessionsarkivet måste registreras med Context Store Manager. I följande exempel skapas och registreras en CQ_Analytics.SessionStore -objekt.

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

För lagring av JSON-data skapas och registreras en CQ_Analytics.JSONStore -objekt.

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

Skapa en Context Store-komponent creating-a-context-store-component

Skapa en kontextlagringskomponent som återger sessionsarkivdata i klientkontexten. När du har skapat en kontextlagringskomponent kan du dra den till klientkontexten för att återge data från ett sessionsarkiv. Context Store-komponenter består av följande objekt:

Utöka de medföljande komponenterna i Context Store extending-the-provided-context-store-components

AEM innehåller genericstore- och genericstoreproperties-kontextlagringskomponenter som du kan utöka. Strukturen för dina lagringsdata avgör vilken komponent du utökar:

Konfigurera utseendet i Sidekick configuring-the-appearance-in-sidekick

När du redigerar klientkontext visas kontextlagringskomponenter i Sidekick. Precis som för alla komponenter finns componentGroup och jcr:title klientkontextkomponentens egenskaper bestämmer komponentens grupp och namn.

Alla komponenter som har componentGroup egenskapsvärde för Client Context visas i Sidekick som standard. Om du använder ett annat värde för componentGroup måste du lägga till komponenten manuellt i Sidekick i designläge.

Context Store-komponentinstanser context-store-component-instances

När du lägger till en kontextlagringskomponent i klientkontexten skapas en nod som representerar komponentinstansen nedan /etc/clientcontext/default/content/jcr:content/stores. Den här noden innehåller egenskapsvärden som har konfigurerats med komponentens redigeringsdialogruta.

När klientkontexten initieras bearbetas dessa noder.

Initierar associerat sessionsarkiv initializing-the-associated-session-store

Lägg till en init.js.jsp-fil i komponenten för att generera JavaScript-kod som initierar det sessionsarkiv som din kontextlagringskomponent använder. Använd till exempel initieringsskriptet för att hämta konfigurationsegenskaper för komponenten och använda dem för att fylla i sessionsarkivet.

Det JavaScript som genereras läggs till på sidan när klientkontext initieras vid sidinläsning på både författaren och publiceringsinstanser. Denna JSP körs innan kontextlagringskomponentinstansen läses in och återges.

Koden måste ange mime-typen för filen till text/javascript, eller så körs den inte.

Följande procedur skapar init.js.jsp-skriptfilen och lägger till koden som anger rätt MIME-typ. Koden som utför butiksinitieringen följer.

Återger sessionsarkivdata för genericstoreproperties-komponenter rendering-session-store-data-for-genericstoreproperties-components

Visa sessionsarkivdata i klientkontext i ett konsekvent format.

Visa egenskapsdata displaying-property-data

Personaliseringstaglib tillhandahåller personalization:storePropertyTag -tagg som visar värdet för en egenskap från ett sessionsarkiv. Om du vill använda taggen inkluderar du följande kodrad i JSP-filen:

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

Taggen har följande format:

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

The propertyName attribute is the name of the store property to display. The store attribute är namnet på det registrerade arkivet. Följande exempeltagg visar värdet för authorizableId egenskapen för profile butik:

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

HTML struktur html-structure

Klientbiblioteksmappen personalization.ui (https://experienceleague.adobe.com/etc/clientlibs/foundation/personalization/ui/themes/default?lang=sv) innehåller CSS-formaten som används i Client Context för att formatera HTML-koden. I följande kod visas den föreslagna strukturen som används för att visa butiksdata:

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

The /libs/cq/personalization/components/contextstores/profiledata kontextlagringskomponenten använder den här strukturen för att visa data från profilens sessionsarkiv. The cq-cc-thumbnail -klassen placerar miniatyrbilden. The cq-cc-store-property-level*x* klasserna formaterar alfanumeriska data:

Återger sessionsarkivdata för genericstore-komponenter rendering-session-store-data-for-genericstore-components

Om du vill återge butiksdata med en genericstore-komponent måste du göra följande:

Identifiera genericstore-sessionsarkivet identifying-the-genericstore-session-store

Personaliseringstaglib tillhandahåller personalization:storePropertyTag -tagg som visar värdet för en egenskap från ett sessionsarkiv. Om du vill använda taggen inkluderar du följande kodrad i JSP-filen:

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

Taggen har följande format:

<personalization:storeRendererTag store="store_name"/>

Implementera återgivningsmetoden för sessionslager implementing-the-session-store-renderer-method

Sessionsarkivet behöver en renderingsmetod som anropas varje gång komponenten måste återges. Återgivningsfunktionen anropas med två parametrar:

Interagera med sessionslager interacting-with-session-stores

Använd JavaScript för att interagera med sessionslager.

Åtkomst till sessionslager accessing-session-stores

Hämta ett sessionsarkivobjekt för att läsa eller skriva data till arkivet. CQ_Analytics.ClientContextMgr ger åtkomst till butiker baserat på butiksnamnet. Använd metoderna i CQ_Analytics.SessionStore eller CQ_Analytics.PersistedSessionStore för att interagera med butiksdata.

Följande exempel hämtar profile lagra och sedan hämta formattedName från butiken.

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

Skapa en avlyssnare som ska reagera på en uppdatering av ett sessionsarkiv creating-a-listener-to-react-to-a-session-store-update

Sessionen lagrar brandhändelser, så det är möjligt att lägga till avlyssnare och utlösa händelser baserat på dessa händelser.

Sessionsbutikerna bygger på Observable mönster. De utökar CQ_Analytics.Observable som innehåller [addListener](/docs/experience-manager-65/content/implementing/developing/personlization/client-context/ccjsapi.md#addlistener-event-fct-scope) -metod.

I följande exempel läggs en avlyssnare till i update händelsen för profile sessionsarkiv.

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

Kontrollera att ett sessionsarkiv har definierats och initierats checking-that-a-session-store-is-defined-and-initialized

Sessionsarkiv är inte tillgängliga förrän de har lästs in och initierats med data. Följande faktorer kan påverka tillgängligheten för sessionsarkivet:

Använd CQ_Analytics.ClientContextUtils objektets onStoreRegistered och onStoreInitialized metoder för att komma åt sessionsarkiv endast när de är tillgängliga. Med dessa metoder kan du registrera händelseavlyssnare som reagerar på sessionens registrerings- och initieringshändelser.

I följande exempel används onStoreRegistered händelsen för profile sessionsarkiv. När arkivet är registrerat läggs en avlyssnare till i update -händelse för sessionsarkivet. När butiken uppdateras är innehållet i <div class="welcome"> -elementet på sidan uppdateras med namnet från profile butik.

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

Exkludera en egenskap från sessionpersistence Cookie excluding-a-property-from-the-sessionpersistence-cookie

Förhindra en egenskap hos en PersistedSessionStore från att bli beständig (d.v.s. utelämna den från sessionpersistence cookie) lägger du till egenskapen i listan över icke-beständiga egenskaper i det beständiga sessionsarkivet.

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

Konfigurera enhetens skjutreglage configuring-the-device-slider

Villkor conditions

Den aktuella sidan måste ha en motsvarande mobilsida. Detta avgörs endast om sidan har en LiveCopy konfigurerad med en mobil utrullningskonfiguration ( rolloutconfig.path.toLowerCase innehåller mobile).

Konfiguration configuration

När du växlar från skrivbordssidan till dess mobila motsvarighet:

Till exempel:

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

Exempel: Skapa en anpassad kontextlagringskomponent example-creating-a-custom-context-store-component

I det här exemplet skapar du en kontextlagringskomponent som hämtar data från en extern tjänst och lagrar dem i sessionsarkivet:

Lägg till geoloc-komponenten add-the-geoloc-component

Skapa ett CQ-program och lägg till den geologiska komponenten.

Skapa den geologiska redigeringsdialogrutan create-the-geoloc-edit-dialog

Kontextlagringskomponenten kräver en redigeringsdialogruta. Dialogrutan för geologisk redigering innehåller ett statiskt meddelande som anger att det inte finns några egenskaper att konfigurera.

Skapa initieringsskriptet create-the-initialization-script

Lägg till en init.js.jsp-fil i den geoloc-komponenten och använd den för att skapa sessionsarkivet, hämta platsdata och lägga till dem i arkivet.

init.js.jsp-filen körs när klientkontexten läses in av sidan. Nu är JavaScript-API:t för klientkontext inläst och tillgängligt för skriptet.

Återge data för den geoloc Session Store render-the-geoloc-session-store-data

Lägg till koden i JSP-filen för den geologiska komponenten för att återge lagringsdata i klientkontexten.

Lägg till komponenten i klientkontexten add-the-component-to-client-context

Lägg till komponenten Location Store i klientkontexten så att den initieras när sidan läses in.

Se platsinformationen i klientkontexten see-the-location-information-in-client-context

Öppna Geometrixx Outdoors hemsida i redigeringsläge och öppna sedan Klientkontext för att visa data från komponenten Platsarkiv.

Skapa en anpassad klientkontext creating-a-customized-client-context

Om du vill skapa en andra klientkontext duplicerar du grenen:

/etc/clientcontext/default

Redigera egenskapen om du vill använda din anpassade klientkontext
path
i designstilen för klientkontextkomponenten, som ingår i sidmallen. Som standardplats för:
/libs/cq/personalization/components/clientcontext/design_dialog/items/path