Responsive design can get all of your site content on mobile devices, but without some tweaking, it can wreak havoc on your analytics. Learn to set up profiles that will not only preserve your current results but give you new insights about how people use your site in different contexts.
1. Google Analytics
for
Responsive Websites
#edui_analytics
Monday, Nov 4
there will be a time for questions at the end
slides will be available - stay with me it’s a lot of information
one sheet up front
advanced analytics, NOT covering basics - jumping over that stuff fast
google changed names - I WILL call views profiles - force of habit
1
2. Jessica Behal
Director of
Internet Marketing
jessica@insidenewcity.com
@jes525
Monday, Nov 4
since 2009
seo, ppc, banner, email, social, lead gen, ANALYTICS
2
3. NewCity
Monday, Nov 4
digital agency, 30 people in blacksburg...
how real people will interact with technology and use that to plan strategy to help them be
able to accomplish their goals
focus on data and results to make decisions and determine success
3
4. The Basics
Monday, Nov 4
Let’s get basics out of the way...
how many of you are hands on with google analytics?
how many of you are planning for responsive?
how many of you have a current site that is responsive?
4
6. Consistent
Experience
Monday, Nov 4
why is it a good idea?
-less work for manager of site (versions, content)
-your brand needs to come through
-you have a suite of components to build a page within the family of design
-you can run off of one CMS and set of code
-good for SEO
6
7. A
A
B
B
E
C
Responsive
Design
F
D
G
C
D
E
F
G
Monday, Nov 4
NewCity’s method:
Use data to drive decisions.
Never assume you know what content people want on a particular device.
Start with structured content and go from there click x2
Design for touch at all major breakpoints based on your actual users
Prototype and test.
7
9. ...a powerful, easy to
use reporting platform
that lets you decide
what data you want to
view and to customize
your reports with just a
few clicks.
Not only can you
measure sales and
conversions, it gives
you fresh insights into
how visitors use your
site, how they arrived
on your site, and how
you can keep them
coming back.
Monday, Nov 4
Google
defines as...
9
Google Analytics is a powerful, easy to use, reporting platform, that lets yo
decide what data you want to view and customize your reports, with just a
few clicks. Not only can you measure sales and conversions, it gives you fr
insights into how visitors use your site, how they arrived on your site, and
how you can keep them coming back.
10. Analytics Data
Monday, Nov 4
A bunch of stats about user behavior on your website,
important bc
the better you can define a problem (less of a black box) , the more likelihood you’ll be able to solve
10
11. Data to ask better questions
Data to inform the process and revisions
Data to enable micro-tweaks
Actionable items based on facts not guesses
Analytics
Provides
Monday, Nov 4
Data to ask better questions
Data to inform the process and revisions
Enables you to Make micro-tweaks
other disciplines to have actionable items based on real data
11
12. Configure
Analytics
Monday, Nov 4
Google is great but have to configure >>>>one sheet handout
- lowercase filters >>> variations of the same page.
- custom alerts >>> notify us if/when there are sudden changes in traffic.
- internal site search tracking >>> better understand what visitors are looking for but not finding on the site.
- Set up event tracking >>> any action without a URL change
- Set up Conversions >>> info form, purchase, etc
- Link their AdWords and Analytics accounts >>> how visitors from paid advertising sources are interacting
- Link their Webmaster Tools and Analytics accounts >>> analyze SEO data within Analytics.
- Custom Reports >>> reporting on quality of traffic sources/mediums, keywords, quality of traffic by location, quality of traffic by mobile device, etc
12
13. CONFIGURING ANALYTICS
Go-to sources: BOOKS
Web Analytics: An Hour a Day by
Avinash Kaushik
Web Analytics 2.0 by Avinash Kaushik
Advanced Web Metrics with Google
Analytics by Brian Clifton
Google Analytics by Justin Cutroni
Monday, Nov 4
again slides are available with these sources
13
15. Review Data
Monday, Nov 4
15
-types of data to review on a regular basis•
Locations of visitors to the site
•
Top visited pages and bounce rates for key pages
•
Traffic mediums: their comparative quality and trends over time
•
Top traffic sources
•
Organic traffic quality (keyword phrase in adwords/webmaster tools)
•
Mobile Behavior
REVISE THE SITE AND REPEAT
16. Common
Mistakes
Monday, Nov 4
thinking pageviews mean something - or any one single metric... for example, lots of people no conversions
not looking at data in context - sometimes a high bounce rate is a good thing... like on a directions page!
assuming you know why something (like a conversion) isn’t working
16
17. Planning for
Responsive
Monday, Nov 4
17
now that Basics out of the way
lucky enough to be able to plan before building a responsive site there is a lot to learn from the
existing data
just remember things change. New information comes to light.
18. Preliminary
Analytics
Review
Monday, Nov 4
Determine
what
exists
Get
access
to
all
accounts
Make
sure
at
a
min
you
have
the
following
views
>>>
raw
data
(nothing
applied)
global
site
view/main
site
external
traffic
only
everything
all
combined
mobile
traffic
only,
external
traffic
only
18
19. Current
Mobile
Behavior
Monday, Nov 4
What isn’t working now?
Apply your mobile segment
Compare to non-mobile traffic
Different Bounce Rates/time on page/etc
convert/non-convert
19
20. Frequent
Breakpoints
Monday, Nov 4
-design for responsive layouts based on actual sizes
where to find in analytics - under
>Audience>Technology>Browser & OS>Screen Res Dimension
20
21. Common
Browsers
Monday, Nov 4
-what browsers are used by current audiences
-what will we support?
where to find in analytics - under
>Audience>Technology>Browser & OS>Browser>Secondary - Browser Version
21
23. Setup
Baseline
Analytics
Monday, Nov 4
Same
as
before
>>>
Make
sure
at
a
min
you
have
the
following
views
raw
data
(nothing
applied)
global
website/main
site
external
traffic
only
everything
all
combined
mobile
traffic
only,
external
traffic
only
Then
set
things
up
by
departments,
schools,
etc
>>>
MAX
50
VIEWS/profiles
PER
ACCOUNT
SO
PLAN
CAREFULLY
23
24. Determine
Top Devices
Monday, Nov 4
24
Create
views
for
top
devices
(HOW
DID
WE
COME
TO
THESE?
LOOK
AT
OLD
DATA...
DIFFERENT
FOR
YOU)
1.
Android
phone
2.
Android
tablet
(Think
of
what
would
cause
users
to
interact
with
the
site
differently...
touch,
size,
res)
3.
iPad
4.
iPhone
5.
non-‐mobile,
non
touch
(tradiXonal
computers)
6.
Windows
8
7.
as
wells
as
others
-‐
“all
mobile”,
“no
filters”,
“internal”,
etc.
26. Custom
Advanced
Segments
Monday, Nov 4
addiXonally
you
could
use
custom
advanced
segments,
follow
same
basic
steps
about
to
outline
we
like
views
for
more
control:
-‐apply
advanced
segments
(like
returning
users)
to
a
view
of
specific
device
-‐segment
data
is
sampled
over
250k
visits
so
to
be
truly
accurate
at
high
volume
a
view
is
preferable
bc
not
sampled
26
27. iPad
Monday, Nov 4
27
go
into
ADMIN...
Apply
filter
by
mobile
model
name
(iPad)
to
include
traffic
side
note
-‐
we
have
mulXple
filters
applied
-‐we
almost
always
also
filter
out
internal
IPs
and
combine
upper/lowercase
URLs
in
these
profiles...
can
have
internal
traffic
iPad
profile
if
you
think
you
need
it...
28. iPhone
Monday, Nov 4
Apply
filter
by
mobile
model
name
(iPhone)
to
include
traffic
-‐internal
IPs
and
combine
upper/lowercase
URLs
28
29. Android
Phone
Monday, Nov 4
>>Starts
to
get
a
lidle
trickier<<
Apply
filter
by
operaXng
system
(android)
>>>
can
only
do
by
device
if
you’re
trying
to
track
specific
like
Galaxy
S4
or
HTC
One
Include
mobile
filter
>>>
enXre
operaXng
system
so
we
only
want
the
mobile
traffic
Exclude
tablets
filter
>>>
enXre
operaXng
system
but
we
only
want
phones
-‐internal
IPs
and
combine
upper/lowercase
URLs
29
30. Android
Tablet
Monday, Nov 4
Apply
filter
by
operaXng
system
(android)
>>>
can
only
do
by
device
if
you’re
trying
to
track
specific
like
Kindle
Fire
Include
tablets
filter
>>>
enXre
operaXng
system
but
we
only
want
tablets
-‐internal
IPs
and
combine
upper/lowercase
URLs
30
31. Windows
8
Monday, Nov 4
Windows
8
(touch
traffic
so
we
want
to
look
at
data
separately)
Apply
filter
by
operaXng
system
(windows)
Apply
filter
by
operaXng
system
version
(8)
-‐internal
IPs
and
combine
upper/lowercase
URL
31
32. Non-Mobile
Non-Touch
traffic
[Traditional
Computers]
Monday, Nov 4
We
want
non-‐mobile
traffic
>>>
Apply
mobile
filter
to
EXCLUDE
mobile
traffic
We
want
all
non-‐touch
traffic
>>>
Apply
operaXng
system
filters
to
include
everything
out
there
(Windows,
Mac,
Linux)
We
don’t
want
touch
traffic
>>>
Apply
operaXng
system
version
filter
to
exclude
Windows
8
-‐internal
IPs
and
combine
upper/lowercase
URLs
These
paderns
can
be
followed
for
any
other
devices,
operaXng
systems,
etc
that
are
specific
to
you
like
before...
Think
of
what
would
cause
users
to
interact
with
the
site
differently...
like
touch,
size,
res
32
33. What can we
learn?
Monday, Nov 4
(explain picture) ... she would say dig deeper and don’t make assumptions
Analytics can tell us lots of things... overwhelming amount of info
33
34. Remember our goal:
Fully harness the power of analytics to
break down problems into solvable chunks
with as much information as possible
Learning
from Data
Monday, Nov 4
and... the solution will be different in every case
>>> look responsive data this way rather than breaking the entire system to fix
solving the problem (micro level) of not working on this specific device, screen, etc
34
35. Analytics
can tell us...
Monday, Nov 4
-
What questions to ask
What should we examine further >>> finding oddities and discrepancies in the data
-
Conversion rates - Bounce rates -Time on page - New Visitors vs. Returning
>>>remember - it’s exactly the same code/content so when it acts differently what does it lead us to think
about?
-
35
36. Analytics
can’t tell us...
Monday, Nov 4
36
Why things are happening
What audiences are trying to do
Why the page was abandoned
Why the user didn’t convert
>>>> for that we need other tools/disciplines “ux hat” (above my paygrade, might have to do yourself) >>>A/B
testing
SIDE NOTE - sessions here, Jared Spool resources
38. Intercept
Survey
Monday, Nov 4
Intercept users real-time as they use the site, insight into what they came looking for, rather
if they were able to accomplish it
tie into analytics with custom variables
this is great on pages like the homepage, major landing pages
keep it to 2-3 questions
38
39. Social Media
Polling
Monday, Nov 4
you have a captive audience already
what do you want to do on the admissions page?
what is the top task you try to accomplish on the website?
39
40. Loop 11
http://www.loop11.com/online-usability-testing-101/?confirmed=true
Monday, Nov 4
Ask a relatively simple task first
Avoid creating task scenarios that give participants hidden clues (info/words give hints)
Keep the length of evaluations as short as possible - less than 6 questions is good - results in higher completion rates
-
looking at most common success pages and most common fail pages
find the problems and the strengths then focus on finding the cause of the problems using the click path analysis and heat maps.
rank the problems by severity
decide how to solve and put the findings into action
40
41. UX Tools
Go-to sources: USER TESTING
Usabilila
Qualaroo
UX Punk
Userfly
Feedback Army
UserTesting.com
OpenHallway
TryMyUI
GoToMeeting, Glance, Skype
Monday, Nov 4
41
Usabilla primarily design, testing small things not complex workflows>> Remote, unmoderated; can test flat images and live site; recruit your own
users
Qualaroo for short feedback surveys
UX Punk Online card sorting & navigation menu testing
Userfly Records what users are doing on your site; no tasks or assigned workflows just records what’s going on on a page
Feedback Army Quick and dirty test
UserTesting.com -Remote, unmoderated task testing; recruits users for you
OpenHallway Remote, unmoderated task testing >>>>have to have a URL to test, users are prompted out loud to talk about the task as they work
on it
TryMyUI Remote, unmoderated testing >>> get video of users trying to accomplish tasks
42. UX Tools
Go-to sources: PROTOTYPING
Invision App
Balsmiq
Proto.io
UXPin
Blueprint
Monday, Nov 4
Invision App Clickable prototype (images only); great for fast, flat testing and
demonstration
Balsmiq Clickable wireframes
Proto.io for tablets & smartphones
UXPin - Clickable wireframing tool
Blueprint (IOS app)- for mobile
42
44. Steps for
Success
Monday, Nov 4
set up analytics and configure properly to look at multiple devices differently
review the data
find discrepancies and oddities
use ux tools to A/B and user test
refine site
start again
Good luck on your data revision journey!!
44