track report & optimize your web creations
DESCRIPTION
Peter Howley of Empirical Path delivered this presentation to the HTTQ web design and developers group in April 2013. Topics include counting conversions, segmenting audiences, testing ideas, and sharing insights using Google Analytics, Optimizely, Klipfolio and other tools. Video also available at TBD.TRANSCRIPT
@EmpiricalPath
Peter Howley of Empirical Path @EmpiricalPath @phowley99
@EmpiricalPath
‣ Introduction
‣ Status Quo
‣Count Conversions
‣ Segment Audiences
‣Test Ideas
‣ Share Insights
@EmpiricalPath
‣ Web analytics, market research and campaign measurement
‣ Founded in Washington DC in 2002
‣ Atlanta, NM and DC offices
‣ Founder led web analytics at washingtonpost.com
‣ Google Analytics Certified Partner
‣ Webtrends Agency
@EmpiricalPath
‣ Defend digital investment
‣ Compare online to offline
‣ Right-size digital investment
‣ Re-allocate budget to most valuable activities
‣ Celebrate and reward successes
‣ Learn from mistakes
@EmpiricalPath
Reports with little context that measure only how many people entered the funnel:
‣ Impressions
‣ Visits
‣ Unique visitors
‣ Friends
‣ Followers
@EmpiricalPath
Measure how many times they complete the funnel (& achieve campaign goal):
‣ Purchases
‣ Social shares
‣ Email signups
‣ Contacts via form & phone
‣ File downloads
‣ Video views
@EmpiricalPath
‣ Track user activity on pages separately from pageviews
‣ Any Flash-driven element, like a website or Movie player
‣ Embedded AJAX page elements
‣ Page gadgets
‣ File downloads
‣ Clicks on links to other domains
‣ Form submits without a unique thank-you URL
‣ Load times for data
‣ Correct Bounce Rate by defining visits with these user activities as not Bounces
@EmpiricalPath
‣ Category ‣ Root level of event tracking and is the base level for sorting events
‣ Collect similar actions together, e.g., Outbound Links, Downloads, Videos
‣ Action ‣ Descriptor for a particular event, described by any string you specify
‣ Verb that describes what user did, e.g., Played, Clicked, Paused, Downloaded
‣ Not just one per category
‣ Label ‣ Optional descriptor to provide further granularity
‣ Often automatically passed based on code on page
‣ Don’t record Page where event occurred; tracked automatically
‣ Value ‣ Numerical variable can have explicit or inferred values
‣ Economic value of non-commerce action
‣ Estimated value of unmeasured commerce action
‣ Non-interactive parameter ‣ Tells GA that an Event was not initiated by visitor
‣ Counts single-page visits with only these Events in Bounce Rate calculation
@EmpiricalPath
‣ Core events reports in Standard Reporting > Content section
‣ Top Events lets you drill down from Categories
‣ Overview rolls up all Categories, Events, and Actions
‣ Metrics on total & unique events
‣ And any optional value tracked
‣ Standard tabs also available
‣ Site Usage: Visits, Avg. Duration, % New Visits
‣ Ecommerce: Revenue, Transactions, Avg. Order Value
@EmpiricalPath
‣ gaforflash is an ActionScript 3 API for Google Analytics data collection
‣ 1st, add the gaforflash SWC to Flash CS3
‣ Quit Flash CS3
‣ Navigate to the location where you unzipped the GA zip and find the swc
‣ Create a "Google" directory
‣ Copy the SWC file there
@EmpiricalPath
public function handlePlayTime(event:Event):void { //Tracking elapsed time for video for event and pageview tracker.trackEvent("Videos", "AutoPlayed", "[VideoTitle]",PlayTime); tracker.trackPageview("/TDNB/[DomainName]/Videos/[VideoTitle]"); } public function handleComplete(event:Event):void { tracker.trackEvent("Videos", "Completed", "[VideoTitle]"); } public function handlePause(event:MouseEvent):void { var button:Button = event.target as Button; if (button.label == "Pause") { video.stop(); button.label = "Resume"; tracker.trackEvent("Videos", "Paused", "[VideoTitle]"); } else { video.play(); button.label = "Pause"; tracker.trackEvent("Videos", "Resumed", "[VideoTitle]", ResumeTime); } }
‣ Example Tracking:
‣ http://stanfordhospital.org/events/awareness/stroke.html
‣ http://test.empiricalpath.com/ga-youtube2.html
@EmpiricalPath
‣ Example Reporting:
‣ https://www.google.com/analytics/web/?#realtime/rt-event/a12625662w34163983p33420663/%3Ffilter.list%3D40%3D%3Dyoutube-video%25253A3Sk7cOqB9Dk%3B
@EmpiricalPath
Only cumulative share data
Only cumulative share data
@EmpiricalPath
Hard Way: Manual
_gaq.push(['_trackSocial', network, socialAction, opt_target, opt_pagePath]);
SOURCE: https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingSocial
Easy Way: Google +
Do nothing (but get only G+ Social Actions)
Easy Way: AddThis
<!-- AddThis Button BEGIN --> <a class="addthis_button" href="http://addthis.com/bookmark.php?v=250"> <img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/> </a> <script type="text/javascript"> var addthis_config = { data_ga_property: 'UA-xxxxxx-x', data_ga_social: true }; </script> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script> <!-- AddThis Button END -->
Easy Way: Google +
Do nothing (but get GA Events, not Social Actions)
@EmpiricalPath
SOURCE: https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingSocial
Twitter Tweets
1. Implement a twitter button on your page :
<a href="http://developers.google.com/analytics" class="twitter-share-button" data-lang="en">Tweet</a> <script type="text/javascript" charset="utf-8"> window.twttr = (function (d,s,id) { var t, js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } }); }(document, "script", "twitter-wjs")); </script> 2. Use Twitter's Web Intents Javascript Events 3. Bind a callback function to the Intent Event 4. Wrap event bindings in a callback function to ensure everything has loaded before
binding events.
function trackTwitter(intent_event) { if (intent_event) { var opt_pagePath; if (intent_event.target && intent_event.target.nodeName == 'IFRAME') { opt_target = extractParamFromUri(intent_event.target.src, 'url'); } _gaq.push(['_trackSocial', 'twitter', 'tweet', opt_pagePath]); } } //Wrap event bindings - Wait for async js to load twttr.ready(function (twttr) { //event bindings twttr.events.bind('tweet', trackTwitter); });
Facebook Likes
1. Set up a Like button on your page using the following code
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> <fb:like></fb:like> 2. Subscribe to Facebook's edge.create event 3. Create a callback function to execute the Google
Analytics tracking code. FB.Event.subscribe('edge.create', function(targetUrl) { _gaq.push(['_trackSocial', 'facebook', 'like', targetUrl]); });
Facebook Shares FB.Event.subscribe('message.send', function(targetUrl) { _gaq.push(['_trackSocial', 'facebook', 'send', targetUrl]); });
Facebook Unlikes FB.Event.subscribe('edge.remove', function(targetUrl) { _gaq.push(['_trackSocial', 'facebook', 'unlike', targetUrl]); });
@EmpiricalPath
NOTE: All data disguised
@EmpiricalPath
NOTE: All data disguised
Show all, new, returning, or
campaign, etc. visits
Show all, new, returning, or
campaign, etc. visits
@EmpiricalPath
NOTE: All data disguised
@EmpiricalPath
GA Debug (Chrome) WASP (Firefox)
@EmpiricalPath
Charles (any) Fiddler (any)
@EmpiricalPath
ObservePoint (Chrome) ObservePoint (Firefox)
@EmpiricalPath
Experiment with ideas and use conversion rate in key segments to pick a winner:
‣ Landing Page
‣ Ad Copy
‣Home Page
‣Offer
‣Discount
‣ Button color
@EmpiricalPath
Above-the-fold call-to-action
23% of next clicks from the
homepage are to promotions
23% of next clicks from the
homepage are to promotions
23% of next clicks from the
homepage are to promotions
23% of next clicks from the homepage are to promotions
@EmpiricalPath
Carousel dominates above-the-
fold
Copy pushes everything
but Carousel below fold
79% of page views are
entries to the site
@EmpiricalPath
@EmpiricalPath
Revenue per Pageview shot up
Bounce rate improved
Pageviews dropped as client cut
PPC NOTE: Period data disguised
@EmpiricalPath
Visits viewing page spent 32%
more despite falling 73%
Oh yeah!
NOTE: Period data disguised
@EmpiricalPath
@EmpiricalPath
Winner
Excellent lift in conversion rate
@EmpiricalPath
Downplay; few click but most of those
come back
Shrink; pushes
products & prices down
Shrink; pushes
products & prices down
Keep; many entrances
click
Lose; draws eye from
product art & headline
@EmpiricalPath
@EmpiricalPath
Testing Tool Pros Cons Estimated Costs
Content Experiments
Free No worries re: over-sampling Easy to use Part of existing GA login and code
base
No support but GACPs like Empirical Path
No multi-variate testing Non-intuitive splits between tests &
control No visual WYSIWYG editor No targeting
Free
Includes heatmaps & clickmaps Multi-variate testing Visual WYSIWYG editor Includes targeting GA integration
Customer support via email only $49/mo for 10k UVs/mo $249/mo for 100k UVs/mo $1,700/mo for 1M UVs/mo
Live customer support Multi-variate testing Visual WYSIWYG editor Forrester “strong performer” Includes targeting GA integration
Lacks heatmaps & clickmaps Smaller early-stage firm
$71/mo for 10k UVs/mo $359/mo for 100k UVs/mo $1,999/mo for 1M UVs/mo
Deep support team at Adobe Forrester “leader” Includes targeting
Essentially requires costly support team
Worst references in Forrester study No GA integration
$900-$1,300/mo with substantial incremental costs for each “mbox” (the area where split-test is executed, such as a graphic that is being tested)
Deep support team Forrester “leader” Fixed fee lets you test ad nauseum
High total cost Weak on integrations
“Six-figures” per year
@EmpiricalPath
Create variations
Edit, add, move
elements
@EmpiricalPath
Multiple success metrics
For each success metric
@EmpiricalPath
Measure conversion rate for each key segment of visitors.
‣ Traffic source (PPC, email, SEO)
‣Geography
‣ Loyalty (new, returning)
‣ Answers to survey questions
‣ Content interest
‣ Prior purchase
@EmpiricalPath
Unique content for
each audience
@EmpiricalPath
<script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-xxxxxxx-1']); _gaq.push(['_setCustomVar','1', 'Visitor Type', 'Prospective Student','1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script>
@EmpiricalPath
NOTE: All data disguised
Row for each segment…in any report
Conversion rates for
multiple goals
@EmpiricalPath
@EmpiricalPath
@EmpiricalPath
@EmpiricalPath
1 row for each link or set of links worth
tracking
Ties in other analytics
tools
Tells analytics which
channel worked
@EmpiricalPath
@EmpiricalPath
Revenue Other
Conversions
@EmpiricalPath
@EmpiricalPath
@EmpiricalPath
Get analytics reports, findings & recommendations to decision-makers
‣ Build useful dashboards
‣ Email reports automatically
‣ Update spreadsheets automatically
‣ Try out mobile apps
‣ Display real-time metrics
@EmpiricalPath
@EmpiricalPath
@EmpiricalPath
@EmpiricalPath
@EmpiricalPath
@EmpiricalPath
Webtrends
ClickyTouch
ChartBeat
Analytics App
@EmpiricalPath
@EmpiricalPath
@EmpiricalPath
@EmpiricalPath
@EmpiricalPath
Questions now?
Questions later:
‣ @EmpiricalPath or @phowley99
‣ Facebook.com/EmpiricalPath
‣ +Empirical Path Page