Ad Code

Saturday, December 29, 2018

Implement 301 and 302 Redirect in AEM



Hello Everyone,

A website redirect will take one website URL and point it to another. When anyone
types in or clicks on that original URL they’ll be taken to the new page or website.

There are few different types of redirects.
301 Redirect:A 301 redirect is a permanent redirect from one URL to another. 301
redirects send site visitors and search engines to a different URL than the one they
originally typed into their browser or selected from a search engine results page.
The big reasons marketers might set up a 301 redirect are:
  • To rebrand or rename a website with a different URL.
  • To direct traffic to a website from other URLs owned by the same organization.
Note:- In case of 301 redirect browser cache the mapping of new URL with old URL.

302 Redirect:A 302 status code means Found, or more commonly referred to as “temporarily moved.” This redirect doesn’t carry or pass the link value to the new location. What it does do is get the user to an appropriate location for you so that you aren’t showing them a broken link, a 404 page not found, or an error page.
Note:- In case of 302 redirect browser does not maintain any mapping or cache. So, server receives hit for both the URLs.
In AEM, OOTB redirect URLs do 302 Redirect.Redirect URL will only work in disabled and publish mode but not in edit mode.
Fig-1 Redirect Widget in Page Properties Dialog
So How to do 301/302 Redirect in AEM?
Add a custom widget as drop down to select 301 and 301 redirect and value must be 301 and 302 only.
Fig-2 Redirect Type Option in Page Properties

Let’s start with AEM 6.2/AEM 6.3 with 301/302 Redirect

The logic of redirection is written in /libs/foundation/components/page/page.jsp file so need to seperate the redirection logic in one another jsp file may be “redirect.jsp” but logic in this jsp only do 302 redirect so let’s add logic for 301 redirect.and include that jsp in header.html. 
The implementation of 301 and 302 Redirection is exactly same in AEM 6.2 and AEM 6.3

redirect.jsp having the logic for 301 and 302 redirection:

Demonstration Video on 301 and 302 Redirection in AEM 6.2


AEM 6.4 with 301/302 Redirect:
In AEM 6.4, AEM has provided a feature of redirecting a page by default.It means no need to write
any redirect.jsp for 302 Redirection.


So how 302 Redirect is working in AEM 6.4?
My observation: I created a page component without any inheritance and created a
page configured a redirect path in it.
While rendering a page this jsp "/libs/cq/Page/Page.jsp" gets called. This jsp
includes proxy.jsp and that proxy.jsp is calling a servlet com.day.cq.wcm.foundation.impl.PageRedirectServlet.java with selector "redirect".
Fig-3 : Call PageRedirectServlet from proxy.jsp

com.day.cq.wcm.foundation.impl.PageRedirectServlet.java class exists in the bundle shown below.
Fig-4: Bundle that has the class PageRedirectServlet.java
Now the question come how to configure 301 in AEM 6.4??
To achieve 301 redirect,
  • Overlay /libs/cq/Page hierarchy and make a servlet with a different selector and make an entry of that selector in proxy.jsp.So that always your servlet will get called (in which the logic for 301 and 302 redirection is written ) in place of OOTB servlet.
  • Make your own servlet class with the same selector(redirect) with 301 redirect logic in it and make the service ranking of this servlet higher.OOTB Servlet is not using any service ranking, so you can create servlet using service ranking and then always your servlet will get called.
Fig-5: Servlet Resolver Console that shows the scripts running for redirection as per preference
Custom PageRedirectServlet
Demonstration Video on 301 and 302 Redirection in AEM 6.4

If you have any query or suggestion then kindly comment or mail us at

sgaem.blog02@gmail.com
Hope it will help you guys !!
Thanks and Happy Learning.

Sunday, December 23, 2018

Personalization using ContextHub in AEM 6.4: Part-2

Hello Everyone,
I am sure you have gone through my previous blog on Personalization using ContextHub
in AEM 6.4 Part-1. Now in this blog we will discuss some more features of ContextHub in
Personalization.
Boost Factor

There is a boost value associated with each contexthub segment.If there are more
than one segments gets resolved at the same time then which one should take
higher priority.So boost factor decides which segment should resolved and show content.
A higher number indicates that the segment will be selected in preference to a segment with
a lower number.
  • Minimum Value:0
  • Maximum Value:1000000
Segment Engine

Segment Engine allows to build conditions that gets resolved into a Boolean values.List of Components in the ContextHub Segmentation Group:
  • Comparison:Property-Value:Compares a property of a store to a defined value.
  • Comparison: Property-Script Reference:Sometimes to create conditions using Comparison: Property value is not possible.
Example: Let’s suppose you are storing the date when user has visited a particular page, and you want to personalize the content only till 4 days of his/her visit so you can not create such condition using OOTB components.You need to write one script to do this and if script returns true the segment gets resolve.

Defining a Script to Reference:

  • Add file to contexthub.segment-engine.scripts clientlib.
  • Implement a function that returns a value. For example:
(function() {
   'use strict';
   var testScript = function(val1, val2) {
       /* let the SegmentEngine know when script should be re-run */
       this.dependOn(ContextHub.SegmentEngine.Property('profile/age'));
     this.dependOn(ContextHub.SegmentEngine.Property('profile/givenName'));

       var name = ContextHub.get('profile/givenName');
       var age = ContextHub.get('profile/age');

       /* return result */
       return name === 'Joe' && age === 123 && val1 === 11 && val2 === 22;
   };

   /* register function */
   ContextHub.SegmentEngine.ScriptManager.register('test-script', testScript);
})();
  • Register the script with ContextHub.SegmentEngine.ScriptManager.register.
  • If the script depends on additional properties, the script should call this.dependOn(). For example if the script depends on profile/age.

Referencing a Script:

  • Create ContextHub segment.
  • Add Script Reference component in the desired place of the segment.
  • Open the edit dialog of the Script Reference component. If properly configured, the script should be available in the Script name drop-down.

Fig 1: Script Reference Component
You can find all the scripts loaded here:
/etc/cloudsettings.kernel.js/libs/settings/cloudsettings/legacy/contexthub
  • Comparison:Segment Reference : In this component you can make conditions based on referring the segments.
Let's take an example, you have already created two segments:
    • The Gender is Female.
    • The age is above 30.
Now you can make a new segment that checks both conditions gender is female and age is above 30, no need to create it using Comparison:property-Value, you can make it using Segment Reference.

Fig 2: Segment Reference Component
  • Container AND and Container OR:Using the AND and OR container components, you can construct complex segments in AEM. When doing this, it helps to be aware of a few basic points:
    • The top level of the definition is always the AND container that is initially created. This cannot be changed, but does not have an effect on the rest of your segment definition.
    • Ensure that the nesting of your container makes sense. The containers can be viewed as the brackets of your Boolean expression.
The following example is used to select visitors who are considered in our prime age group:
Male and between the ages of 30 and 59
OR
Female and between the ages of 30 and 59

You start by placing an OR container component within the default AND container. Within the OR container, you add two AND containers and within both of these you can add the property or reference components.
  • Comparison:Property-Property:In this component, you can compare the value of two properties of different stores or may be same stores.
  • Comparison:Property-Segment Reference:Comparison:Compares a property of a store to another referenced segment.
  • Comparison:Property-Script Reference: Compares a property of a store to the results of a script.
Note:I really don’t know the business use case of three components (Comparison: Property-Property,Comparison:Property-Script Reference,Comparison:Property-Segment Reference).So i just mentioned the definition of components but use case can’t explain.

How to create Offers in AEM using Personalization
In the previous blog, we talk about limitations of Personalization in Contexthub in AEM using component targeting  that we can’t change the components for different audiences but using offers this can be achieved also.
  • Go to Offers console from Personalization. 
  • Go to Project and click on Create Folder and Offers.
  • Choose Offer Page and Click on Next.
  • Now add the Offer Title and click on Create.
Fig 3: Console for Offer Creation
  • Now open the offer page,you will see an open parsys.You can drop n number of components in the parsys and create an offer page.
  • Now go to the page,select targeting mode then choose brand and activities,select the component and target it.
  • When you choose a particular segment,there is one icon saying “remove offer from Activity” click on it then you will see a placeholder like "Add Offers".

Fig 4: "Remove offer from Activity" option in the component
  • Then click on icon “choose from offer library” and select the particular offer for that particular segment.
Fig 5: "Add offer" option in the component
This is how you can select offers based on segments and personalized the content.
Demonstartion Video on Creating an offers and Boost Factor:


What are the changes in AEM 6.4 in contextHub

  • AEM 6.4 is using /conf//settings/wcm/segments to store segments
  • AEM 6.4 is using  /conf//settings/cloudsettings//contexthub for configurations.
  • sample config moved from /etc/settings/cloudsettings/default/contexthub to /libs/settings/cloudsettings/legacy/contexthub  
  • sample segments moved from /etc/segmentation/contexthub to /conf/we-retail/settings/wcm/segments.
  • segment generation and resolving performance improvements (/path/to/segments.seg.js)

Testing the Application of a segment in contextHub

  • Preview a Page.
  • Click the ContextHub icon to reveal the ContextHub toolbar.
  • Select a persona that matches the segment you created.
  • The ContextHub will resolve the applicable segments for the selected persona.
Fig 6: Steps for Testing the Segments in ContextHub
Once the segment has been defined, potential results can be tested with the help of the
ContextHub.

Demonstartion Video on Segment Engine and Testing of Segments in ContextHub:
So this is all about OOTB functionalities of Personalization in AEM.In the upcoming blogs, we will talk about more about custom stores and modules.So stay tuned with more upcoming blogs of personalization.

If you have any query or suggestion then kindly comment or mail us at
sgaem.blog02@gmail.com
Hope it will help you guys !!
Thanks and Happy Learning.

Sunday, December 16, 2018

Personalization using ContextHub in AEM 6.4 Part-1


Hello Everyone,

With every upgrade of AEM version, Adobe is trying to improve the capability of AEM.
In this blog, we will talk about personalization using contexthub. In AEM 6.2, it was the first time when Adobe introduced contexthub in place of clientcontext. I never used clientcontext but i have implemented personalization on contexthub in one of my project and i found out it very amazing and easy to use.

So In the series of my blogs, we will learn personalization with contexthub step by step.
I am going to explain everything on AEM 6.4 here.
In the personalization section of AEM, we can see three options:
  1. Activities
  2. Offers
  3. Audiences
Here we will discuss audiences first but before that we will talk about contexthub stores. So how AEM personalize content using the information of users visiting the websites.AEM store information of user in the browser somewhere on the basis of which personalization can happen.

Where are these contexthub stores exist in browser?

AEM stores the user information in the ContextHubPersistance Object in the local storage.All the OOTB stores like geolocation,recently viewed etc can be seen under ContextHubPersistance object.

ContextHub Store Available in Browser
So now we have place where the user information is getting stored.Now the next step is we need to create audiences for personalization.

Audiences in Personalization

Audiences means some conditions on the basis of which you want to personalize the content. Right now in audiences, there are only two folders global,we-retail.Now I want to add a new project to create new audience(segments).

Go to: Adobe Experience Manager->General->Configuration Browser or go here

Follow the steps to create a demo-project.
Create a project using Configuration Browser
Note: Please create a new project using lower-case with no space(using hyphen) and go to the hierarchy and change the title.,because if you give space it will create the name of the project with some extra characters .
Use Case: Let’s go through the use case first. I want to personalize content on the basis of browsers like Google Chrome, Mozilla etc. So to detect which browser it is, we have a OOTB store called "surferinfo". If you see the browser Family of Google Chrome, it  is “Chrome” and for Mozilla Firefox it is Firefox. So let’s create the audiences basis of these two conditions.

Steps to create the audience:
  • Go to personalization console and open audiences, you will be able to see a new project named Demo Project or directly click  here. Let's make two segments regarding Chrome and Mozilla Firefox browsers.
Note: Below image is showing the browser family for both browsers on basis of which we are creating audiences.

Values of SurferInfo Store in Chrome and Firefox Browsers
  • Click on Create
  • Create ContextHub Segment.
  • Add a Title “Any Title(e.g.Chrome Users)“ and Boost value.
  • Now click on segment.Open the newly created segment.
  • There are so many components in the group ContextHub Segmentation.We will discuss about all the components a bit later. First add a component named Comparison:Property-Value.
  • Add the values as shown in figure below
Condition in Contexthub Segment

Property Name
It is the hierarchy where the property exist in ContextHub Persistence Store.
Operator
It is the condition which you wanna put.It has many options like equal, greater-than,greater-than-or-equal,less-than etc.
Data Type
Here you can select data type of your value on which you are comparing. If you don't want to put data type just put as auto-detect.
Value
This is the value of the property on which you want to put some condition.
  • Click OK. If the condition is true the background of component will turn green
Note: It is very important to note here that sometimes background doesn’t get green even if the condition is true.I have gone through this issue. So What to do now.
    • First, you can refresh the page and then check if it turned into green
    • Second, if still the background is not green there is a technical way to check it.If in the segmentation store, you are able to see any segments that means that segment is getting resolved. In other words, only those segments will be visible in segmentation stores which are resolving for that page.
  • In the same way create another segment for Mozilla FireFox Browser.
This is how, our audience is ready, Now the next step is creating activities.

Activities

Activities is collecting a same kind of audience(segments) in a brand.
  • Go to activities and create a brand
    • Add a Title for Brand.
    • Click on Create.
  • Under Brand Create an Activity.
    • Add a Title for Activity.
    • Click on Create.
    • A configuration Activity screen will be visible and need to click on Next.

  • In the Configure Activity Wizard Screen shown below, “Add Experiences” and “Choose
    Audience” (segments) related to the activity and give a name to fragments and click on next.
  • In the next screen, you can specify the priority of the activity and date-time of start of personalize content which will start showing on a website and end date-time also.

All the prerequisites for personalization is done now it’s time to personalize the page.

To enable personalization on a website, We need to add this line in page component.

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

To enable particular segments on a page, you need to go to page properties and add segments path.You can also enable a particular brand from the Brand Configuration.
Page Properties Dialog of the page

Personalize content on a page

Now Go to a page, and click on Targeting mode and select the Brand and Activity been configured in the previous steps and click on Start Targeting.

Choosing Brand and Activity on a page

Now you can see all the audiences configured for that activity. If you want to add more audience in the particular activity, click on “Add Experience Targeting”.
Different Segments associated with selected activity

Select a component which you want to target and click on target icon It will pop up a message that component is now targeted. Now click on different audience from the right rail,choose the audience and edit the content for that particular audience,after you are done click on next and save.Now you can see the personalize content on the view as published on author instance or publish instance..

Target Icon in a component

Demonstration video on Personalization using Context-hub:


Trade Off of Personalization in AEM using ContextHub

The trade off of personalization using contexthub is that there is a lag in loading personalized content on a page.It first load default content on a page and then after some ms it loads personalized content.You can refer demo video to understand this issue more clearly.
When the page gets load it runs contexthub library, resolves the segments and then show personalize,it takes time and that’s the reason this lag is justified. But from the end user perspective, it spoils the user experience also.
Myths of Personalization in AEM using ContextHub

  • Using Personalization only content of the component can be changed not the components itself. For instance you can’t show “Image Component” for audience 1  and “Text Component” for audience 2
  • You can’t delete one component for audience 2 which was present for audience 1.
In the coming series of this blog we will discuss how boost factor works and what all components exist in ContextHub Segmentation component Group. and much more.So stay tuned.:-)


If you have any query or suggestion then kindly comment or mail us at sgaem.blog02@gmail.com

Hope it will help you guys !!
Thanks and Happy Learning.