Adding ContextHub to Pages and Accessing Stores

Last update: August 15, 2024

CREATED FOR:

  • Developer

Add ContextHub to your pages to enable the ContextHub features and to link to the ContextHub JavaScript libraries.

The ContextHub JavaScript API provides access to the context data that ContextHub manages. This page briefly describes the main features of the API for accessing and manipulating context data. Follow links to the API reference documentation to see detailed information and code examples.

Adding ContextHub to a Page Component

To enable the ContextHub features and to link to the ContextHub JavaScript libraries, include the contexthub component in the head section of your page. The HTL code for your page component should resemble the following example:

<sly data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}"/>

Note that you also need to configure whether the ContextHub toolbar appears in Preview mode. See Showing and Hiding the ContextHub UI.

About ContextHub Stores

Use ContextHub stores to persist context data. ContextHub provides the following types of stores that form the basis of all store types:

All store types are extensions of the ContextHub.Store.Core class. For information about creating a store type, see Creating Custom Stores. For information about sample store types, see Sample ContextHub Store Candidates.

Persistence Modes

Context Hub stores use one of the following persistence modes:

  • Local: Uses HTML5 localStorage to persist data. Local storage is persisted on the browser across sessions.
  • Session: Uses HTML5 sessionStorage to persist data. Session storage is persisted for the duration of the browser session and is available to all browser windows.
  • Cookie: Uses the browser’s native support of cookies for data storage. Cookie data is sent to and from the server in HTTP requests.
  • Window.name: Uses the window.name property to persist data.
  • Memory: Uses a JavaScript object to persist data.

By default, Context Hub uses the Local persistence mode. If the browser does not support or allow HTML5 localStorage, Session persistence is used. If the browser does not support or allow HTML5 sessionStorage, Window.name persistence is used.

Store Data

Internally, store data forms a tree structure, enabling values to be added as primary types or complex objects. When you add complex objects to stores, the object properties form branches in the data tree. For example, the following complex object is added to an empty store named location:

Object {
   number: 321,
   data: {
      city: "Basel",
      country: "Switzerland",
      details: {
         population: 173330,
         elevation: 260
      }
   }
}

The tree structure of the store data can be conceptualized as follows:

/
|- number
|- data
      |- city
      |- country
      |- details
            |- population
            |- elevation

The tree structure defines data items in the store as key/value pairs. In the above example, the key /number corresponds with the value 321, and the key /data/country corresponds with the value Switzerland.

Manipulating Objects

ContextHub provides the ContextHub.Utils.JSON.tree class for manipulating JavaScript objects. Use the functions of this class for manipulating JavaScript objects before you add them to a store, or after you obtain them from a store.

Additionally, the ContextHub.Utils.JSON class provides functions for serializing objects to stings, and deserializing strings to objects. Use this class for handling JSON data to support browsers that do not natively include the JSON.parse and JSON.stringify functions.

Interacting with ContextHub Stores

Use the ContextHub JavaScript object to obtain a store as a JavaScript object. Once you obtain the store object you can manipulate the data that it contains. Use the getAllStores or the getStore function to obtain the store.

Accessing Store Data

The ContexHub.Store.Core JavaScript class defines several functions for interacting with store data. The following functions store and retrieve multiple data items that are contained in objects:

Individual data items are stored as a set of key/value pairs. To store and retrieve values you specify the corresponding key:

Note that custom store candidates can define additional functions that provide access to store data.

NOTE
ContextHub is not by default aware of the currently logged in used on publish servers and such users are regarded by ContextHub as “Anonymous.”
You can make ContextHub aware of logged in users by loading the profile store. Refer to sample code on GitHub.

ContextHub Eventing

ContextHub includes an event framework that enables you to automatically react to store events. Each store object contains a ContextHub.Utils.Eventing object that is available as the store’s eventing property. Use the on or once function to bind a JavaScript function to a store event.

Using Context Hub to Manipulate Cookies

The Context Hub JavaScript API provides cross-browser support for handling browser cookies. The ContextHub.Utils.Cookie namespace defines several functions for creating, manipulating, and deleting cookies.

Determining Resolved ContextHub Segments

The ContextHub segment engine enables you to determine which of the registered segments are resolved in the current context. Use the getResolvedSegments function of the ContextHub.SegmentEngine.SegmentManager class to retrieve resolved segments. Then, use the getName or getPath function of the ContextHub.SegmentEngine.Segment class to test for a segment.

ContextHub Segments

ContextHub segments are installed below the /conf/<site>/settings/wcm/segments node.

The following segments are installed with the WKND tutorial site.

  • summer
  • winter

The rules that are used to resolve these segments are summarized as follows:

  • First the geolocation store is used to determine latitude of the user.
  • Then the month data item of the surferinfo store determines what season it is in that latitude.
WARNING
The installed segments are provided as reference configurations to help you build your own dedicated configuration for your project. Do not use them directly.

Debugging ContextHub

There are several options for debugging ContextHub including generating logs. See Configuring ContextHub for more information.

See an Overview of the ContextHub Framework

ContextHub provides a diagnostics page where you can see an overview of the ContextHub framework.

Experience Manager


Adobe Experience Manager Sites: Top Innovations

Online | Session | General Audience

Digital interactions are the most critical touchpoints in a customer journey. Brands need to maximize the impact of content to drive...

Tue, Mar 18, 2:00 PM PDT (9:00 PM UTC)

Register

Rapid Feature Releases with AEM Cloud: Telegraph Media Group’s RDE Strategy

Online | Session | Intermediate

Hear how Telegraph Media Group, the award-winning publisher of The Daily Telegraph, The Sunday Telegraph, The Telegraph Magazine,...

Wed, Mar 19, 3:30 PM PDT (10:30 PM UTC)

Register

Connect with Experience League at Summit!

Get front-row access to top sessions, hands-on activities, and networking—wherever you are!

Learn more

Register now