Google Analytics and Sungard HE Luminis

2,490 views

Published on

How to track events by tab, channel, submit, click for Sungard HE's Luminis portal using the qGoogleAnalytics plugin for jQuery

Published in: Technology

Google Analytics and Sungard HE Luminis

  1. 1. Using Google Analytics with Luminis David Simpson Wednesday, February 25, 2009
  2. 2. Outline • What GA does • Fixing uPortal / Luminis HTML • Integrating GA with Luminis • Analysis results Wednesday, February 25, 2009
  3. 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. 4. Example: Segment by Country/City Source website: http://my.nottingham.ac.uk Wednesday, February 25, 2009
  5. 5. Example: Goal Setting / Tunnel visualisation • Validate design decisions • Highlight problem pages • Visualise goals Source website: http://my.nottingham.ac.uk Wednesday, February 25, 2009
  6. 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. 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. 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. 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. 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. 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. 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
  13. 13. ...fix the navigation Wednesday, February 25, 2009
  14. 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
  15. 15. ...remove the nested tables Wednesday, February 25, 2009
  16. 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. 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. 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. 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. 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. 21. Live demo? http://www.google.com/analytics/ Wednesday, February 25, 2009
  22. 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. 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. 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. 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. 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. 27. Example Business Strategy... quot;Expand portal usage on Malaysia & China Campuses to 90% of student population by 2010quot; Wednesday, February 25, 2009
  28. 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. 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
  30. 30. ? dvdsmpsn Email: david.simpson@nottingham.ac.uk Slides & qGoogleAnalytics: http://davidsimpson.me/ Wednesday, February 25, 2009

×