Web personalization by Bryce Roberts

By Bryce Roberts, MS, MSPH
StoneRidge Corporation
Bryce@stoneridge.net
© 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!
…

 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 include
user 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
 Promotes
general
products

 Search for “glass blowing” and click on the first
product
 Promotes other glass
blowing books – other
users’ behavior
 Returning later the homepage
now shows books about glass
blowing – 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
 Profile bleed – if a new user comes to the same
computer, the profile is not refreshed.

 Embedded third party
user profiling and
content provider
 Found on all pages
 Seamless between
owner content and
third party’s content
 Content from Apple iPhone announcement

 Embedded third party
user profiling and
content provider
 Found on all pages
 Seamless between
owner content and
third 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)
 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!

 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","country_na
me":"United
States","region_code":"GA","region_name":"Georgia","c
ity":"Alpharetta","zipcode":"","latitude":34.0754,"longitud
e":-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=“setUserAduie
nce(‘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 tagging
jQuery 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 with
content 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 Corporation
1050 E Piedmont Rd.
Suite E-222
Marietta GA, 30062
678-391-6173
Bryce@stoneridge.net
www.stoneridge.net

Web personalization by Bryce Roberts

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Web personalization by Bryce Roberts

Ähnlich wie Web personalization by Bryce Roberts (20)

Mehr von hannonhill

Mehr von hannonhill (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Web personalization by Bryce Roberts