Skip to main content

Activate Context SDK inside your app

Since the execution of personalization is decoupled from your headless CMS, the last mile configuration requires adding Uniform Context SDK into your web application. This enables Uniform Tracker, Personalization and A/B Testing components, which render together with your application. Additionally, you can configure the execution of personalization and A/B testing in different modes:

  • Server-side (SSR), enabled by default.
  • Client-side (CSR), enabled by default and co-exists with the SSR option.
  • Edge-side mode - activated via CDN specific configuration.

In terms of JS rendering library support, Uniform supports React, Vue and vanilla JS flavors, allowing to use Uniform Context with Next.js, Nuxt.js, Gatsby, Remix and many other frameworks.

Before you begin​

We recommend you get yourself familiar with the basics of Context concepts and architecture, as well as glace over some of Context APIs.

The general meachanics of activating Context​

The TL;DR version of adding Uniform Context into your app consists of the following parts:

  1. Wrapping your application into <UniformContext /> and feeding it Uniform manifest downloaded from Uniform API. See more about <UniformContext /> component here.
  2. Use the personalization component (<Personalize />) that needs an array of variations retrieved from your Headless CMS. Each variation is expected to have the Personalization Criteria data (expected to be stored as the pz JSON object), see more about the <Personalization /> component here.
  3. If you use Enrichment Tags, wire up the code that sets the enrichments during page or component rendering, reading those from your Headless CMS. See the use of context.update({enrichments: []}) here.

Build a vanilla Next.js app from scratch​

If you'd like to go through the step by step process of wiring up a simple web app with Context and understand the mechanics, start here to go through the zero to sixty app setup using Next.js.

Heads up!

The walkthrough referenced above does not have Kontent specifics described - how to setup Kontent client, and fetch page content. If you are looking for a quicker way to start, please see the section below.

Deploy our demo starter app​

We've open sourced a sample app along with some sample content that you can deploy into your Kontent project. This is a fictitious conference site called UniformConf, and it comes with a couple of personalization scenarios baked in.

  1. Clone this repo.

    git clone https://github.com/uniformdev/uniformconf-context-kontent.git

  2. Check readme on how to get it up and running.

  3. After you are up and running, we recommend installing the Uniform Context chrome extension here.

  4. Explore your Uniform project and notice the additional signals, intents, audiences, quirks added to your project.

  5. Explore your Kontent project and notice the Home page component set, specifically the Homepage hero, it's a list storing all personalized hero variants. Notice the Personalization Criteria on each variant. The last variant is default.

  6. Open one of the pages (with /developers slug) and notice it's Enrichment tags value, it is set to Enrichment: Developer = 50. This means that every time this page is visited, the score of 50 is set with this enrichment.

  7. All this setup is what drives the personalization on the site. Try navigating to the /developers page, then going back to Home. The first hero component is expected to be personalized.

Quick demo​