web personalization by bryce roberts
DESCRIPTION
This presentation provides an overview of implementing web personalization with a thick client (jQuery) and Cascade generated content sets and management for an admission site. It will provide example of both environmental and behavioral information based web personalization. This presentation provides a starting point on the road to web personalization.TRANSCRIPT
• What is Web Personalization?• Who does it well?• Example ideas with Cascade
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
One view to rule them all …
© 2013 – StoneRidge Corporation
© 2013 – StoneRidge Corporation
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!
© 2013 – StoneRidge Corporation
Why not use this one view?
You cannot wield it.
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
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*
© 2013 – StoneRidge Corporation
What are you waiting for? Just let it go!The one view is mine.NOOO …
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
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?
© 2013 – StoneRidge Corporation
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.
© 2013 – StoneRidge Corporation
You shall not pass!
© 2013 – StoneRidge Corporation
No system, idea, or revolution is prefect
Web personalization can work against its
own stated goals
Like most everything it is all about balance
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
There's plenty for the rest of us... may the best website win!
© 2013 – StoneRidge Corporation
Google search – “Auto Repair Shopts” query
Geo by IP
Can includeuser behavior –spelling suggest
Highly Personalized
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
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
Profile bleed – if a new user comes to the same computer, the profile is not refreshed.
Embedded third partyuser profiling andcontent provider
Found on all pages
Seamless betweenowner content andthird party’s content
Content from Apple iPhone announcement
© 2013 – StoneRidge Corporation
Embedded third partyuser profiling andcontent provider
Found on all pages
Seamless betweenowner content andthird party’s content
© 2013 – StoneRidge Corporation
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)
Profile bleed – if a new user comes to the same computer, the profile is not refreshed.
Anyways you need people of intelligence on this sort of … mission … quest … thing!
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
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!
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
A web technology is never late. Nor is it early. It arrives precisely when it means to.
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
Stories
Calls to action
News
Events
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
Interior content order
Navigation links order and selection
Supplemental navigation (quick links)
Store Items (Parent, Alumni, Current …)
© 2013 – StoneRidge Corporation
It's the job that's never started as takes longest to finish.
© 2013 – StoneRidge Corporation
Callouts on Homepage◦ Audience – Insert content
Apply Now Page◦ Audience – Update content (order)
Events Feed◦ Audience and Geo-location – Select content
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
© 2013 – StoneRidge Corporation
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.
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
Tagging can be a single associate or multiple associations with different types.
© 2013 – StoneRidge Corporation
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"}
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
Functions◦ checkUser()
◦ getUser()
◦ getUserAudience()
◦ getUserGeo()
◦ deleteUser()
© 2013 – StoneRidge Corporation
Functions◦ createUser()
◦ clearUser()
◦ setUserAudience()
◦ setUserGeo()
Cascade ◦ Tag action in
cascade ◦ Example of
audience navigation link
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
Include content on homepage and output with tagging
Structure – On page
callout = {img: image,href: link,txt: text,tags: {
audience:[]}
}
© 2013 – StoneRidge Corporation
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);
© 2013 – StoneRidge Corporation
…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;} …
© 2013 – StoneRidge Corporation
…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
© 2013 – StoneRidge Corporation
Tag content on page by audience
© 2013 – StoneRidge Corporation
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>
© 2013 – StoneRidge Corporation
$(function(){$(“.reorder”).filter(function(index){
return $(this).data(‘audience’) ==
getUserAudience();}).detach().prependTo(‘# reorder-container’);
});Reorder content if user as audience value
© 2013 – StoneRidge Corporation
Tag content on page ◦ By audience ◦ By geo-location
Collect content withcontent type index
Create feed output
© 2013 – StoneRidge Corporation
<events><event>
<audiences><audience>Value</audience>…
</audiences><locations>
<location><country>Value</country><region>Value<region>
</location></locations>… event data …
</event></events>
© 2013 – StoneRidge Corporation
$.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);
});
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
If I take one more step, it'll be the farthest away from home I've ever been
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
I wouldn’t be here without you
© 2013 – StoneRidge Corporation
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
© 2013 – StoneRidge Corporation
Bryce Roberts, MS, MSPH
StoneRidge Corporation1050 E Piedmont Rd.Suite E-222Marietta GA, 30062
© 2013 – StoneRidge Corporation