Sitecore Personalization for websites cached on CDN Servers

SAPIENTNITRO CMS PRACTICE

SapientNitro’s expertise on CMS is based

on years of work with some of the world’s

leading brands and marketers…

4

OUR RELATIONSHIPS AND EXPERIENCE WITH MARKETING PLATFORM PARTNERS ARE SOLID

We have built strategic alliances with the leaders in the digital marketing technology vendor ecosystem

Cross-channel

Analytics Rich Media

Content

Management

Social Commerce

& Collaboration

Digital Asset

ManagementSearch

Relationship Marketing,

Campaign Management,

Production Automation

5

We have been global strategic partners with Sitecore since

2010

Executive level relationships, monthly & quarterly

partnership communications rhythm, data points and

measures

Strategy and Co-Investment Plan that includes enablement

activities, Global / Regional Account Planning (with focus

on NA, Germany and APAC)

Leveraging Sitecore partnership on Engineering and

Technology initiatives

Our Relationship with Sitecore

6

KEY SITECORE CLIENTS

ContextThe definition

8

Context

When building enterprise-scale distributed applications, we might face many performance related challenges. Caching mechanisms can increase performance by storing copies of data accessed frequently from external systems in a high-performance subsystem thus,

Reducing round-trips

Moving content closer to clients

Avoiding time-consuming processes of regenerating reusable content

Improved Performance

Better Availability

Scalability

A wide variety of caching techniques exist for caching within web applications.

Some of them include: ASP. Net Caching

• Page Level Output Caching

• Fragment Caching, User Control Output Caching

• Caching API, Using the Cache Object

IIS Caches

Client Caching

Content Delivery Networks (CDNs)

9

Context

Enabling full Page level caching using some of the techniques mentioned above we may lose out on the personalization features offered by Sitecore.

During the course of this session we will understand why caching is important and how we can make the Sitecore personalization work even with full page level caching.

CACHING OPTIONS IN SITECOREThe details

11

Cache Types

HTML Cache

HTML Cache (also known as the Output cache) associated with each managed Web site contains the output generated by individual renderings under different conditions.

Item Cache

Contains objects of the Sitecore class Sitecore.Data.Items.Item that are used in the code most of the time.

Data Cache

Contains items of the Sitecore class ItemInformation, pulled from the database whenever they are requested.

Prefetch Cache

Contains items that Sitecore accesses during and immediately after initialization and items with children that Sitecore often accesses as a group.

12

HTML Cache

HTML output cache caches the actual HTML generated by the Sublayouts and Renderings. You can configure the allowed size of the HTML cache and whether it should be enabled or not for each of your managed websites.

<site name = "website" virtualFolder="/" physicalFolder="/"rootPath="/sitecore/content " startItem="/Home" database="web“

domain="extranet" cacheHtml="true" htmlCacheSize="10MB” enablePreview="true" enableWebEdit="true"enableDebugger="true" disableClientData="false" />

HTML output cache can be configured for each of the presentation controls. Each presentation control can generate different output under different conditions, which can result in multiple entries in a site HTML output cache for a single presentation control.

HTML output cache criteria for the presentation control can be set at the following locations:

• In the Caching section of the rendering/sublayout definition item.

• In the Caching section of the properties of the presentation control when it is assigned to a layout.

HTML output cache can be specified to vary by on different parameters.

13

Item Cache

Item cache contains objects of the Sitecore class Sitecore.Data.Items.Item, which are used in the code most of the time. Item cache gets generated for each of the databases.

When you request for an item, which isn’t present in the item cache, it will get it from the data cache and then populate it in the item cache as an Item.

The purpose for this cache is to gain performance so that the ItemInformation objects don’t need to get parsed into an Item each time they are requested.

Item cache size can be set for each of the databases in the /databases/database section.

<cacheSizes hint = "setting">

<data>20MB</data>

<items>10MB</items><paths>500KB</paths>

<standardValues>500KB</standardValues>

</cacheSizes >

14

Data Cache

Data cache contains items of the Sitecore class ItemInformation, which also is more or less the item data pulled from the database.. Data cache gets generated for each of the databases.

Data cache gets populated whenever it is requested. The data is pulled from the prefetch cache, if it present there; else it is pulled out of the database, put into the prefetch cache and into then the data cache.

The purpose of this cache is to minimize the amount of requests to the database. This is extremely important for performance, as requesting items from the database is rather expensive.

Data cache size can be set for each of the databases in the /databases/database section.

<cacheSizes hint = "setting">

<data>20MB</data><items>10MB</items>

<paths>500KB</paths>

<standardValues>500KB</standardValues>

</cacheSizes >

15

Prefetch Cache

Prefetch cache contains items of the Sitecore class PrefetchData, which is more or less item data pulled out from the database. Prefetch cache gets generated for each of the databases.

Prefetch cache gets populated by pulling items out of the database at Sitecore startup.

The purpose of this cache is to trade longer startup times for faster load times at runtime.

The items which should be loaded at start up are specified in the config files specified in /app_config/prefecth folder. The items which are loaded are a combination of the items specified in the config file for the specific database, for instance master.config, and the common.config file.

<?xml version="1.0" encoding="utf-8" ?>

<configuration>

<cacheSize>20MB</cacheSize>

<template desc="reference">{EF295CD8-19D4-4E02-9438-94C926EF5284}</template>

<template desc="menu item">{998B965E-6AB8-4568-810F-8101D60D0CC3}</template>

16

Clearing of Caches

HTML cache: The HTML is always cleared on publish. So whenever you publish even a single item the complete cache is cleared. This is due to the fact, that parts of the HTML can be built from multiple items, so the cache has no way of knowing if the item being published has influence on the presentation.

Item cache: The Item cache gets cleared for items once they are published or updated. If you publish an item which might influence other items, these items are cleared as well. For example if you publish standard values or a template, that clears more than a single item. The item cache is rebuild incrementally when the items are requested again.

Data cache: The data cache gets cleared for items once they are published or updated. It is rebuild incrementally when the items are requested again.

Prefetch cache: The Prefetch cache gets cleared in the same way as the item and data cache, but the items specified in the Prefetch config files are pre-fetched from the database again.

CDN CACHINGThe usage

18

WHAT IS CDN?

A content delivery network or content distribution network (CDN) is a large distributed system of servers deployed in multiple data centers across the Internet. The goal of a CDN is to serve content to end-users with high availability and high performance. CDNs serve a large fraction of the Internet content today, including web objects (text, graphics and scripts), downloadable objects (media files, software, documents), applications (e-commerce, portals), live streaming media, on-demand streaming media, and social networks. Some of the more known CDNs are Akamai, Amazon CloudFront, Cloudfare, Fastly, MaxCDN, Cachefly etc.

19

CDN CATEGORIES

PULL

Transfer Protocol: None

Pros:

• Requires virtually no setup at your end: all you have to do, is rewritethe URLs to your files: replace your own domain name with the CDN’s domainname.

Cons:

• No flexibility. It will just re-sync files based on the TTL set.

• Results in redundant traffic because files are being pulled from the originserver more often than they actually change

PUSH

Transfer Protocol: FTP, SFTP, WebDAV, Amazon S3

Pros

• Flexibility as you can decide when files are synced, how often and if any pre-processing should happen.

• No redundant traffic

Cons

• Requires a fair amount of work at your end to sync files to the CDN

20

CDN Caching and TTL (Time-To-Live)

One of the most useful features to implement on a CDN-powered webpage is to define the “Time To Live” (TTL) for file types. Time-To-Live (TTL) is a mechanism to limit the lifetime of data in a network. Our Content Delivery Network (CDN) providers offer this configuration setting. This will tell our CDN servers how long to wait before checking for a changed/updated version of the file. When the time-to-live time has passed, a GET request for an object triggers an IMS (If-Modified-Since) request to the origin server.

PersonalizationMaking Personalization work !!!

22

What is Personalization?

Personalization is the practice of dynamically tailoring your site based on individual users characteristics or preferences.

A key feature of Sitecore is its ability to personalize content according to pre-defined sets of criteria, defined by content authors or marketers .

23

Making Personalization Work on CDN Cached Pages

Setup an Ajax Device in Sitecore that will return the Rendering component HTML based on the useAjax=true query string parameter and the component placeholder name that is passed dynamically.

Define an Ajax Layout that will be the default layout to be used for an Ajax Device. add an Ajax placeholder.

@using Sitecore.Mvc

@Html.Sitecore().Placeholder("ajax")

24

Making Personalization Work on CDN Cached Pages

Create an Ajax Controller to handle the Render action that will get triggered when an item is queried for Ajax Device and the placeholder name for the component is passed as a query string parameter.

Render action will identify the rendering on the page that matches the placeholder parameter passed in the query string. It will then fetch the HTML for the same using the PipelineService to run the mvc.renderRendering pipeline.

Create a Controller Rendering RenderAjax that will call the Renderaction of Ajax Controller.

public ActionResult Render(string placeholder)

{var html = string.Empty;

foreach (var r in PageContext.Current.PageDefinition.Renderings.Where(r => r.Placeholder == placeholder))

{try{

using (var stringWriter = new StringWriter()){

PipelineService.Get().RunPipeline("mvc.renderRendering", new RenderRenderingArgs(r,

stringWriter));html += stringWriter.ToString();

}}

catch (Exception ex){

Logger.Log(ex.Message, ExceptionCategory.Fatal); }

}

return Content(html);}

25

Making Personalization Work on CDN Cached Pages

Associate the default Ajax Layout and RenderAjax component with the Ajax Device by adding it on the standard values of the Base Page Templates.

26

Making Personalization Work on CDN Cached Pages

Create a View Rendering for the Ajax Container that will control the addition of “Personalized-Content” placeholder in the page edit or preview mode so that we can benefit from OOTB Sitecore personalization features in preview or page edit mode.

In the normal mode it will add the container div with a unique class name, personalized-content, and the data attributes for the page item url and unique placeholder name.

Include the JavaScript that will trigger the Ajax call for any div with the unique class name personalized-content by reading the data-item-nameand data-placeholder-name data attributes. The Ajax url will be formed as below:

@inherits WebViewPage@using Sitecore.Mvc

@{

var str = "Personalized-Content" + Sitecore.Mvc.Presentation.RenderingContext.Current.Rendering.Parameters["Unique Identifier"];

if (Sitecore.Context.PageMode.IsPageEditor || Sitecore.Context.PageMode.IsPreview)

{@Html.Sitecore().Placeholder(str)

}else{

var url = Request.Url.AbsolutePath; var placeholder =

@Sitecore.Mvc.Presentation.RenderingContext.Current.Rendering.Placeholder + "/" + @str;

var ajaxID = placeholder.Replace("/", string.Empty); <div class="personalized-content" id="@ajaxID" data-placeholder-

name="@placeholder" data-item-name="@url" ></div>

27

Making Personalization Work on CDN Cached Pages

Add the Ajax Container View rendering before adding a personalized component. Ajax Container should be placed in the same placeholder as the personalized component. Thereafter, add the personalized component to the “personalized-content” placeholder added by the Ajax Container.

Add a separate Ajax Container for each personalized component added on the page.

In case multiple Personalized Components are added on the same placeholder then use the Rendering Parameter “Unique Identifier” to make the placeholder name unique by appending a numeric value after the personalized content

28

Making Personalization Work on CDN Cached Pages

Define a rule on the CDN servers not to cache any urls that contain the query string ?useAjax=true. Thus the output of the ajax urls will not get cached and the request will always come to the server.

url = <<data-item-name>> + "?useAjax=true&placeholder=" + <<data-placeholder-name>>;

© 2013 SAPIENT CORPORATION | CONFIDENTIAL

Demo

AnalyticsHow to handle!!!

31

Enabling Sitecore Analytics Session on CDN

In order to access the Sitecore Analytics data for personalization rules that are based on user visit information it is important to instantiate the Sitecore Analytics session on CDN by dropping the Sitecore Analytics cookie in user’s browser.

This can be achieved by adding a light weight ‘TrackExternal.aspx’ page in your web application just to instantiate the Sitecore Analytics session from CDN. This page will not have any code logic except a no-cache header.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TrackExternal.aspx.cs" Inherits=“sample.web.ui.website.TrackExternal" %><%@ OutputCache Location="None" VaryByParam="none" %>

Include a Pixel tracking code(beacon) as below in your base layout that will trigger a call to ‘TrackExternal.aspx’ page for every page request thus ensuring that the Analytics session is available on CDN as well.

<img id="trackVisitor" src="@UriHtmlHelper.FormatAbsoluteUrl(Request.Url, "/TrackExternal.aspx")" alt="Tracking Image" height="1" width="1" style="border-style:none;display:none;" />

© 2013 SAPIENT CORPORATION | CONFIDENTIAL

Q&A

© 2013 SAPIENT CORPORATION | CONFIDENTIAL

THANK YOU