Web personalization by Bryce Roberts

By Bryce Roberts, MS, MSPHStoneRidge Corporation

[email protected]

© 2013 – StoneRidge Corporation

• What is Web Personalization?• Who does it well?• Example ideas with Cascade


Define web personalization

Know a sample of uses cases for web personalization in higher education

Know key features of Cascade Server that support web personalization

Understand an implementation strategy (tags)

See example of tools that can facilitate web personalization


One view to rule them all …



Most higher education sites provide a single web content set for all viewers of a particular piece content

Individualization of content is often through separate pages or event sites

Highly successful business firms personalize content in both digital and physical forms

Content personalization is coming …◦ Like the revolutions in social media and

responsive design◦ It is already having dramatic effects on the ways

people engage with favorite websites

In some cases web personalization is already here and driving large sites

Guess what … Cascade Server can help!


Why not use this one view?

You cannot wield it.


More is lessMore is less

Nielsen Norman Group [1]

◦ … at most 28% of the words during an average

visit [are read] …

◦ 4.4 seconds more for each additional 100 words

More content is now displayed on pages◦ Mostly driven by images but also text


1 Nielsen, J. How Little Do Users Read (2008) Nielsen Norman Group

Not all content is equally interestingNot all content is equally interesting

Web pages are viewed by irrational people◦ Perfectly rational would look through all content◦ No one is perfectly rational

◦ If not engaged, user will use the back button or leave site

Pages often are for multiple types of viewers with different interests and goals


Improvement of content engagement ◦ Longer, deeper, more

Enriched user experience◦ “That’s just what I am looking for …”

Enhanced brand perception◦ “They really get me …”

Increased conversion rate

◦*Click*


What are you waiting for? Just let it go!The one view is mine.NOOO …


Web personalization is a type of content

personalization.

Web personalization is the process by

which information about the viewer is

utilized to dynamically insert, update, or

select content


In the physical world◦ Direct retail marketing for years was the only

game Based on geographic location Based on past behavior (orders)

◦ Current examples The inventory at your location Wal-Mart®

Database of store behavior Database of area demographics

Bed, Bath, and Beyond (store to home engagement) “Can I have your zipcode?”

In the digital world …

Google◦ The leader and pioneer of web personalization

Amazon◦ “It know just what I want … ”

Netflix◦ Cash and prizes to help us do it better

CNN (Outbrain)◦ It is everywhere

And sometimes you do want to know the end. Because how could the end be happy?


Identify Users◦ Implicit – users’ behavior

Types of link clicked Any measurable event

◦ Explicit – users’ observable data IP address (geo-location) User defined preference Site entry point

Identify Content◦ Tag, tag, tag◦ Cascade can really help!

…© 2013 – StoneRidge Corporation

Change Content◦ Insert, Update, or Select based on the user

identity and content identity

Refine (optional)◦ Update your tags

◦ Update your users identification mechanisms

◦ Cascade can really help!

◦ Google Analytics can really help.


You shall not pass!


No system, idea, or revolution is prefect

Web personalization can work against its

own stated goals

Like most everything it is all about balance


Misidentification of user

◦ Example geo-location by IP is not perfect

◦ Not everyone who goes to prospective guide

page is a prospective student

The “personalization bubble”

Content exploration is more difficult


There's plenty for the rest of us... may the best website win!


Google search – “Auto Repair Shopts” query

Geo by IP

Can includeuser behavior –spelling suggest

Highly Personalized


Geo-location place the most likely location to be approximately 25 miles away

The content bubble effect – only saw auto shops in Norcross (not Marietta)

Hard to explore desired content, because of content bubble effect

User disengagement – not what I wanted

First time custom – provide a general homepage without customization

Promotesgeneralproducts


Search for “glass blowing” and click on the first product

Promotes other glassblowing books – otherusers’ behavior

Returning later the homepagenow shows books about glassblowing – current user’s behavior


The content bubble effect – only see suggested products related to glass blowing

Incomplete profile, which is tied to a particular browsers/computer (profile does not cross browsers on same computer or between computers)

Profile bleed – if a new user comes to the same computer, the profile is not refreshed.

Progressive enhancement to user’s suggestion movies

Implicit – All about user’s behavior Feedback mechanism


Starting out – content suggestions seem random and disjointed

Requires significant amount of time to build a profile of the user

Content bubble – show only shows like one you have watched and rated as liked


Embedded third partyuser profiling andcontent provider

Found on all pages

Seamless betweenowner content andthird party’s content

Content from Apple iPhone announcement


Embedded third partyuser profiling andcontent provider

Found on all pages

Seamless betweenowner content andthird party’s content


Just like Netflix

Starting out – content suggestions seem random and disjointed

Requires significant amount of time to build a profile of the user

Content bubble – show only articles like one, which where previous click (no feed back mechanism)


Anyways you need people of intelligence on this sort of … mission … quest … thing!


Force users to login when coming to your site

and fill out a complete information profile

Put all content for all audience on all pages

Create sites for each type of viewer and let

the user choice, which site to visit


Dynamically insert content◦ Example: insert additional content into page

Dynamically update content◦ Example: change the order of content on a page

Dynamically select content◦ Example: select which content place on a page

Cascade supports this process!


JS based◦ Can use any JavaScript library for structuring and

supporting web personalization (only limits are target users)

◦ Example are with jQuery since is a extremely helpful in DOM manipulation

◦ Storage and persistence is require for more meaningful personalization Cookies jStorage – great library

Plan on general content if JS is not enabled


Embedded content◦ Cascade output◦ Classes on html element◦ Embedded JS variables (ex. array of event data)◦ Embedded XML◦ Feeds (RSS, ATOM, XML, JSON)

Can be on a page

Can be shared resource across site


A web technology is never late. Nor is it early. It arrives precisely when it means to.


In most higher education environments, most every if not all page can have some elements of web personalization.

Examples to be discussed◦ A university’s homepage◦ A newsroom or event calendar◦ An admission site

* Examples are drawn from monsteruniversity.com – it is a lot of fun and is used for educational purposes with claim of copyright (under fair use), all images of the site are covered by Pixar’s copyright


Differentiate by audience (internal to campus vs external users)

Four area of content to think about customizing base on audience◦ Stories◦ Calls to action◦ News◦ Events


Stories

Calls to action

News

Events


Stories◦ Filter by fright-net (subnet)

External computers Continuing education for new extreme creepiness

Local computers Dean’s message about dishonor code

Calls to action◦ Filter by audience

Alumni Monsters Hiring Monsters initiative

Prospective Apply today to scare tomorrow


News◦ Audience

Student Student Pride Event free 4-arm hoodie

Staff Update healthcare form to cover new growths

Events◦ Audience and Geo

Student on campus Campus event - Tailgating for the MU Monsters

Alumni off campus Local alumni chapter meeting


Interior content order

Navigation links order and selection

Supplemental navigation (quick links)

Store Items (Parent, Alumni, Current …)


It's the job that's never started as takes longest to finish.


Callouts on Homepage◦ Audience – Insert content

Apply Now Page◦ Audience – Update content (order)

Events Feed◦ Audience and Geo-location – Select content


Tag, tag, tag

The agile nature of Cascade server allows for creation of sophisticated tagging systems

You are only limited by your imagination

Example types: audience and geo-location


Simple Object – Base on a string value

Expandable – can be used to collect and produce tagged content (feeds, etc…)

Good to include self documentation and description information about the tag


Complex Object – Base multiple values

Expandable – can be used to collect and produce tagged content (feeds, etc…)

Good to include self documentation and description information about the tag


Often content tags are attached to pages◦ Useful for tagging both pages and blocks◦ Can be use to create feeds

Tagging content becomes as simple as using a page picker

Tag lexicon can be expanded as needed.


Callouts – blocks◦ Included on other pages

Apply Now page – within page content◦ Direct tagging on a page

Event page – individual pages◦ Collected in general feed◦ Collected as a topical feed


Tagging can be a single associate or multiple associations with different types.


Implicit◦ Clicking on links

Explicit◦ Geo-location◦ Freegeoip.net (it really is simple)◦ {"ip":"50.194.225.53","country_code":"US","cou

ntry_name":"United States","region_code":"GA","region_name":"Georgia","city":"Alpharetta","zipcode":"","latitude":34.0754,"longitude":-84.2941,"metro_code":"524","areacode":"770"}


Should be similar in structure to your tags

Needs to be persistent

{audience : “Undergraduate”, geo: {country_code: “US”, region_code: “GA”}}

jStorage - http://www.jstorage.info/

May want to set a TTL


Functions◦ checkUser()

◦ getUser()

◦ getUserAudience()

◦ getUserGeo()

◦ deleteUser()


Functions◦ createUser()

◦ clearUser()

◦ setUserAudience()

◦ setUserGeo()

Cascade ◦ Tag action in

cascade ◦ Example of

audience navigation link


On Page◦ Embed data in page◦ Base on action

<a href=“…” onclick=“setUserAduience(‘value’);”>…</a>

This can be implement many ways and integrated with GA

Create callout structure and tag content


Include content on homepage and output with tagging

Structure – On page

callout = {img: image,href: link,txt: text,tags: {

audience:[]}

}


Include all callout information on the page in the form of JSON.

This is collected into an array

On page load change user and insert content

(function($){$(function(){

if(!checkUser()){createUser();}var numberOfCallouts = 2;var locationOfCallouts =

‘.callouts’;var callouts = [];……

});})(jQuery);


…var = userAudience = get if(getUserAudience !== ‘’){

callouts = $.grep(calloutArray, function(co){return $.grep(co.tag.audience), fn(au){

return au == getUserAudience();}).length > 0 ;

});} else {callouts = calloutArray;} …


…displayCallouts(callouts, numberOf Callouts, locationOfCallouts);

…

Content is dynamically insert with a filter by user audience.Cascade server help manage the taggingjQuery provide tools for create application logic simply


Tag content on page by audience


Include tag value directly in the content

All content always displayed

Only order is adjusted

<div id=“reorder-container”> …<div data-audience=“” class=“reorder”>

<div>Section Title</div><div>Content …</div>

</div> …</div>


$(function(){$(“.reorder”).filter(function(index){

return $(this).data(‘audience’) ==

getUserAudience();}).detach().prependTo(‘# reorder-container’);

});Reorder content if user as audience value


Tag content on page ◦ By audience ◦ By geo-location

Collect content withcontent type index

Create feed output


<events><event>

<audiences><audience>Value</audience>…

</audiences><locations>

<location><country>Value</country><region>Value<region>

</location></locations>… event data …

</event></events>


$.get(‘feeds/events.xml’,function(data){$events = $(‘event’, data);var $selectedEvents = $events.filter(function(index){

return $(this).find(“audience:contains(“+getUserAdience()+”)”).length > 0 && $(this).find(“region:contains(“+getUserGeo.region+”)”).length > 0

});outputSelectEvents($selectedEvents);outputAllEvents($events);

});


Select content can be use differently form all content

Selection can be based on audience, geo-location, or both

With Cascade provide a simple method for tagging, JavaScript (jQuery) can provide powerful web personalization quickly and easily


If I take one more step, it'll be the farthest away from home I've ever been


Web personalization is a progressive process, which should include refinement

Over time the methods for implicit and explicit user identification can be improved

Google Analytics or other user behavior tools can be extremely helpful in this process

As you build and refine your tool, the quality and effectiveness of your web personalization efforts can only increase


JavaScript is great for developing this type of dynamic webpage but server side languages can also be unitized

Much sure to have clear goals when implementing web personalization

Utilize user behavior to refine you content


I wouldn’t be here without you


Hannon Hill◦ For continuing to develop and add wonderful

features to Cascade Server◦ For nurturing a wonderfully vibrant user

community

Holly and the Hannon Hill team◦ For making this presentation possible with the

wonderful suggestion of the topic

You◦ For taking time and coming to my presentation


Bryce Roberts, MS, MSPH

StoneRidge Corporation1050 E Piedmont Rd.Suite E-222Marietta GA, 30062

[email protected]


Web personalization by Bryce Roberts

Technology

Transcript of Web personalization by Bryce Roberts