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). Informationen är även tillgänglig för webbplatsanalyser och för alla 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 informationen 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 ett JavaScript API som du kan använda för att interagera med sessionslager för att läsa och skriva användardata samt för att avlyssna 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 anpassade JavaScript för att 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 definieras ett JavaScript-objekt som representerar 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 i 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 för 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-elementet 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 i klientbiblioteksmappen skapar och initierar sessionsarkivet. Sessionsarkivet måste registreras med Context Store Manager. I följande exempel skapas och registreras ett 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 ett CQ_Analytics.JSONStore -objekt i följande exempel.

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 avgör egenskaperna componentGroup och jcr:title för klientkontextkomponenten vilken grupp och vilket namn komponenten har.

Alla komponenter som har egenskapsvärdet componentGroup Client Context visas som standard i Sidekick. Om du använder ett annat värde för egenskapen 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 under /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.

Den 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, annars 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

Personaliseringstagglib tillhandahåller taggen personalization:storePropertyTag 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"/>

Attributet propertyName är namnet på den lagringsegenskap som ska visas. Attributet store är namnet på det registrerade arkivet. I följande exempeltagg visas värdet för egenskapen authorizableId i profile store:

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

Kontextlagringskomponenten /libs/cq/personalization/components/contextstores/profiledata använder den här strukturen för att visa data från profilsessionsarkivet. Klassen cq-cc-thumbnail placerar miniatyrbilden. Klasserna cq-cc-store-property-level*x* 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

Personaliseringstagglib tillhandahåller taggen personalization:storePropertyTag 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 när du har hämtat data för att interagera med lagringsdata.

I följande exempel hämtas arkivet profile och sedan hämtas egenskapen formattedName från arkivet.

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.

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

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

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-sessionsarkivet. När arkivet har registrerats läggs en avlyssnare till i update-händelsen i sessionsarkivet. När arkivet uppdateras uppdateras innehållet i elementet <div class="welcome"> på sidan med namnet från arkivet profile.

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

Om du vill förhindra att en egenskap för PersistedSessionStore behålls (d.v.s. utelämnar den från cookien sessionpersistence) lägger du till egenskapen i den icke-beständiga egenskapslistan för 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 bara 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 Client Context JavaScript API inläst och tillgänglig för ditt skript.

Å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