This document discusses implementing Google Analytics on a Luminis portal to track user behavior and optimize the site. It covers fixing HTML issues, integrating the tracking code, and using jQuery to track events. Custom goals and segments are defined to analyze usage. Limitations are noted, and continually improving content based on analytics is advocated to achieve business goals like increasing portal usage on international campuses.
2. Outline
• What GA does
• Fixing uPortal / Luminis HTML
• Integrating GA with Luminis
• Analysis results
Wednesday, February 25, 2009
3. What Google Analytics does
• Visitor segmentation e.g. by country, city, referrer,
search term, browser, network, screen res. etc.
• Page views, time on site, bounce rate, loyality,
recency, depth of visit
• Define and track goals/conversions - Tunnel
visualisation
• AdWords integration, Email reports, eCommerce
tracking
Wednesday, February 25, 2009
4. Example: Segment by Country/City
Source website: http://my.nottingham.ac.uk
Wednesday, February 25, 2009
6. Implementing GA
• Add tracking Javascript to every page
• Communicates with GA servers
• Saves the page title & URL & user info
• Add immediately before </body> closing tag to
ensure the page has loaded completely
• Add to every page, thtml template, jsf, jsp, etc.
• Needed for referer info
Wednesday, February 25, 2009
7. ...but URLs are horrid for Luminis
• Typical default page after login:
http://my.nottingham.ac.uk/cp/render.userLayoutRootNode.uP
• After another click:
http://my.nottingham.ac.uk/cp/tag.669a8bc4666a611.render.userLayoutRootNode.uP?
uP_root=root&uP_sparam=activeTab&activeTab=u191787l1s17&uP_tparam=frm&frm=
• What can we do with these?
• URL rewrites?
• Lookup table in GA?
• Something else?
Wednesday, February 25, 2009
8. Maybe we can be clever?
• Event tracking via Javascript
for anchors, tabs, links, form submits etc
• Hmmm. My Javascript is a bit lacking...
• Maybe a library is easier?
Wednesday, February 25, 2009
9. Enter jQuery
• Easy to use; small footprint; browser neutral
• Uses CSS or XPath selectors to access the DOM
• Used by Google, Microsoft, Amazon, Nokia etc.
• Extend the jQuery library
• Use event binding for interactions with the page
click tracking/form submits/mouseovers etc
• Google have recently introduced event tracking -
we were already doing this!
Reference: jQuery in 15 minutes
http://www.slideshare.net/simon/jquery-in-15-minutes/
Wednesday, February 25, 2009
10. uPortal/Luminis is broken
• The uPortal developers didn't really get web standards
• doctype declaration not supported until Luminis 3.3.3
but we’re still on 3.3.1
• id attributes should be unique. Oh dear.
• Did they really need to nest that many tables?
• Presentational HTML
e.g. <font/> <center/> <td align=”center”></td>
• Inline Javascript & CSS
Wednesday, February 25, 2009
11. Fix as much as you can,
then move on
• Fix nested-tables.xsl
• Use a customisation layer for easier
upgrade path*
• Remove (nearly) all those presentational
elements & attributes
* Reference: http://www.lumdev.net/node/727
UPDATE uportal.up_ss_theme
SET SS_URI = 'stylesheets/org/jasig/portal/layout/tab-column/nested-tables/custom-nested-tables.xsl'
WHERE up_ss_theme.SS_ID = 1 LIMIT 1 ;
Wednesday, February 25, 2009
12. ...fix the navigation
• Fix the table based tabbed navigation to be more
accessible
• Use an unordered list
ul#menu with li.current-tab selector
• Sliding doors CSS* can be used for fancy tabs
e.g.
• Tab text available to jQuery as e.g.
$('#menu li a').each( function(){
alert( $(this).text() ); }
* Reference: http://www.alistapart.com/articles/slidingdoors/
Wednesday, February 25, 2009
14. ...remove the nested tables
• Remove all the nested tables - 1 table for column
based layout is enough ;-)
• All channels in div.channel, rather than illegal
div#channel / table#channel
• Channel titles in div.channel > div.channelHeader
• Available to jQuery as e.g.
$('.channel .channelHeader').each( function(){
alert($(this).text()); }
Wednesday, February 25, 2009
16. Get over these
• No doctype - but you should all be on
Luminis 4 now, so that’s OK
• Quirks Mode !!!
• CSS layout is really trial and error with
quirks mode, so make do and mend
Wednesday, February 25, 2009
17. qGoogleAnalytics
• jQuery plugin written in December 2007
• Updated April 2008 (move from urchin.js
to ga.js)
• Bugfix January 2009
• Simply add to nested-tables.xsl or...
• load it with a loader js like we do
Wednesday, February 25, 2009
18. Loader for CSS & JS
• /js/loader.js?epoch=179824356789
• No caching here
• Loads versioned CSS & JS
• /css/portalframework.css?v=1.0
• /js/jquery.js?v=1.0
• /js/plugins-packed.js?v=1.0
• /js/behaviours.js?v=1.0
• Caching within versions here
• No need to update nested-tables.xsl when
updating CSS or JS
Wednesday, February 25, 2009
19. qGoogleAnalytics
• Can be a simple call e.g.:
window.onload = function(){
$.qGoogleAnalytics(
'UA-XXXXXX-X', // GA tracking ID
{ anchorClick: true, pageViewsEnabled: false }
);
}
• Same effect as adding tracker code to end of page
• Only called when the page is completely loaded
• Do not use standard jQuery.
$(document).ready(function(){ ... });
• GA code must come last!
Wednesday, February 25, 2009
20. window.onload = function(){
var options = {
domainName: 'nottingham.ac.uk',
evalClickEvents: { // evaluate the key
'#menu li a': quot;'/tabs/'+ $(this).text()quot;, // the tabs
'table#header li a': quot;'/appicons/'+ $(this).text()quot;, // Icons, e.g. Groups
'table#footer li a': quot;'/footerLinks/'+ $(this).text()quot;, // footer links
'#leftnav li a': quot;'/frontpage/leftcolumn/'+ $(this).text()quot;, // front page links
'#universityNews li': quot;getUniversityNewsItemInfo( $(this) )quot;, // news items
'.accordionCluster li h3': quot;getNewsItemInfo( $(this) )quot;, // news items
'.channelContent a': quot;getChannelAnchorInfo( $(this) )quot; // channel anchors
},
evalSubmitEvents: {
'.channelContent form': quot;getChannelFormInfo( $(this) )quot; // channel submit buttons
},
submitEvents: {
'#frontpage .login': '/frontpage/portalLoginFormSubmitted', // login
'#frontpage body > form#search': '/frontpage/searchWebsite', // search
'#frontpage #personUK': '/frontpage/personsearch/submit/uk', // person search UK
'#frontpage #personChina': '/frontpage/personsearch/submit/china', // person search CN
'#frontpage #personMalaysia': '/frontpage/personsearch/submit/malaysia', // person search MY
'.channelContent #personUK': '/channel/Person Search/submit/uk', // person search UK
'.channelContent #personChina': '/channel/Person Search/submit/china', // person search CN
'.channelContent #personMalaysia': '/channel/Person Search/submit/malaysia' // person search MY
}
} // end options
$.qGoogleAnalytics(trackerCode, options);
}
Wednesday, February 25, 2009
21. Live demo?
http://www.google.com/analytics/
Wednesday, February 25, 2009
22. Front page not properly tagged
needs fixing
Click on a tab before the Home
tab is fully loaded and GA code has
executed
Click on the Email Channel before
the Home tab is fully loaded and
GA code has executed
Interpret results carefully!
Wednesday, February 25, 2009
23. NTL
UK campus
Total Visitors
UoN
Network
Course Tab
Recency: 2+ daily
visits
Library Tab
Logged in visitors
My School Tab
Email Channel
Visitor segments Exit
Wednesday, February 25, 2009
24. Campus browser wars
Browser % (2/09) % (2/08)
IE 96.2 86.1
• IE usage increased
IE6 11.1 62.6
• Support IE6 for another year?
IE7 88.2 37.4
•
Firefox 2.0 11.5 Firefox & Safari use fell
Chrome 1.7 n/a • Chrome released!
Opera >0.0 >0.0
Safari >0.0 2.4
“Official support for IE7 only”
Wednesday, February 25, 2009
25. Screen Resolutions
• 1200+ pixels is now standard
Width % (2/09) % (2/08)
• Design for >1000px - 99.2% of users
<600 >0.0 >0.0
• Postpone support for handheld
600-1000 0.8 0.9 devices?
Almost no current visitors are using handheld
1000-1200 19.8 32.6
• Monitor handheld usage
1200-1600 72.6 64.9
• Set a trigger point for developing
handheld support based on analytics
1600+ 2.6 1.6
strategy
e.g. 5% or10% of visitors?
Wednesday, February 25, 2009
26. Limitations of using GA
• Don't go crazy tracking everything
• Only the first 500 events/impressions per session are recorded
• Limit of 5 million impressions/month without AdWords account
• Results take upwards of 12 hours to show on GA - Be patient!
• For instant gratification/real time results...
• Yahoo Analytics http://web.analytics.yahoo.com/ now out of beta
• WebTrends http://www.webtrends.com/ if you can afford it
• You can't reanalyse the data - get WebTrends for that
• For better performance, save a local copy of ga.js*
* Reference: http://www.askapache.com/linux-unix/ga-urchin-speed.html
Wednesday, February 25, 2009
27. Example Business Strategy...
quot;Expand portal usage on
Malaysia & China Campuses to
90% of student population by
2010quot;
Wednesday, February 25, 2009
28. ...Example Web Analytics Strategy
• Define KPIs e.g. usage in my & cn against total student numbers in my & cn
• Baseline first!
• Release useful content for my & cn students
• Measure
• Improve content
• Add content/functionality
• A/B tests etc
• Measure
• Repeat - Continual Improvement
Wednesday, February 25, 2009
29. The path to Web Analytics success
• Deep analysis of data based on business goals
• Experimentation and testing A/B testing and beyond
• Make Web Analytics actionable
• KPIs
• Data-driven decision making
We’re not there yet!
Wednesday, February 25, 2009