close

Filter

loading table of contents...

Personalization Hub Manual / Version 2301

Table Of Contents

4. Client-side Personalization

Client-side Personalization decides on the user client software (mostly the browser) which content to show. The rules are defined in a third-party system, such as Monetate.

Client-side Personalization consists of three extensions, which can be integrated into the CoreMedia system:

  • The p13n-core extension which offers the basis functionality used by the adapter extensions. This extension must always be installed.

  • The p13n-adapter-monetate extension which connects with Monetate.

  • The p13n-adapter-generic extension which connects with Evergage and Dynamic Yield.

You must always install p13n-core as the base extension required by the other ones.

Based on the capability of the provider the following use cases are supported:

  • Optimization and Testing: Run experiences with split traffic allocation (A/B/n tests) and targeting

  • Personalization: Run experiences with machine learning and targeting

  • Segmentation: Use targeting capabilities of the provider to serve custom content experiences to different user segments

For all these use cases, content editors in CoreMedia Studio can easily create and manage content and connect them to the provider for optimized and personalized delivery.

p13n-core Extension

The CoreMedia p13n-core extension provides the base functionality for integrating third party web personalization, optimization, and testing providers with CoreMedia.

p13n-adapter-monetate Extension

Monetate is a leading provider of personalization, targeting and optimization solutions for websites.

The p13n-adapter-monetate extension for CoreMedia Blueprint enables you to use Monetate's advanced technology to personalize, target and test content in an easy way to build a whole new customer experience.

p13n-adapter-generic Extension

The p13n-adapter-generic adapter is a generic means to connect third party web personalization, optimization and targeting solutions that don't provide dedicated client APIs to query metadata state.

The current implementation has been tested with the following systems:

  • Dynamic Yield

  • Evergage

Architecture

For all supported personalization providers, a client-side integration approach is used:

The provider's JavaScript tag is rendered into the head of the generated HTML output. The script tag loads and calls additional JavaScript code which evaluates the current request and determines the actions to run on this page, for example which variant to show from what experience. When actions related to CoreMedia experiences are run, custom CoreMedia JavaScript callbacks are triggered, loading personalized content items from the CAE via AJAX, replacing default content items on the page. Using this approach offers two main benefits:

In addition to CMS content actions, all capabilities of the provider can be used for use cases that are currently not supported by CoreMedia. The generated CoreMedia pages are not dependent on the personalization actions and can be cached.

Content Placement and Rendering Restrictions

Client-side Personalization bases on a few assumptions that affect the way you can place content and render content:

  • Experiences and segments target single teasable items only - not collections. This means it is not possible to replace an item with a collection of items and vice versa.

  • A baseline item must always exist, therefore, it is not possible to add content to the variants/segments while the baseline remains empty. Moreover, for all variants/segments a content item must be defined, which means it is not possible to add a baseline content item and leave some or all the variant/segment content empty.

  • The design of segments follows the idea that a user is part of only one segment. There is no ruleset to combine different segments to target content.

  • Different experiences/segmentation documents cannot target the same baseline slot.

Personalization based on React and Spark

This manual shows in addition how you can implement the CoreMedia Client-side Personalization by extending Spark, an example application based on React, TypeScript and the Headless Server of CoreMedia Content Cloud.

See Section 4.3, “Client-Side Personalization Using Headless Server”.

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.