This document provides an overview of Google Analytics for developers. It describes Google Analytics as a platform for reporting on visitor behavior across websites, mobile apps, connected devices, and offline activities. It outlines the process for setting up Google Analytics tracking on a website or mobile app, including signing up for an account, creating properties, and inserting the tracking code. It also discusses metrics, dimensions, event tracking, and using Google Tag Manager.
2. A
plaCorm
to
report
the
behaviour
of
online
and
offline
visitors
to:
• Websites
• Mobile
applica+ons
• Connected
devices
• Online
instances
(email,
github)
• Offline
ac+vity
–
Physical
analy+cs!
Google
Analy+cs
is:
A
funnel
of
conversion
Source:
Google
Analy+cs
3. Google
Analy+cs
reports
incoming
traffic
to
webs
(and
apps)
Comparison
of
the
organic
traffic
of
a
website
in
two
periods
of
+me
Source:
Google
Analy+cs
6. How
to
start
collec+ng
data
Same
process
for
websites,
mobile
apps
and
gaming
apps
1. Sign
up
to
Google
Analy+cs
with
your
Google
account
(or
get
authorisa+on
as
a
User
by
the
account
owner)
2. Setup
a
web
property
(URL)
or
a
mobile
property
at
the
admin
panel
3. Paste
the
code
provided
by
Google
on
all
the
pages
or
download
the
{iOS,
Android}
SDK
and
integrate
it
into
your
app
4. (API:
create
an
OAuth
2.0
client
ID
/
service
account
and
key)
Source:
Google
7. Tracking
code
for
mobile
apps
Very
similar
to
tracking
web
apps
except:
• The
ga_trackingId
UA-‐XXXX-‐Y
of
your
mobile
app
will
be
different
to
your
web
applica+on
• The
na+ve
hit
of
the
analy+cs
of
mobile
apps
is
Screens,
not
pageviews
8. Steps
1
and
2.
Administra+on
panel
of
Google
Analy+cs
Source:
Google
9. Step
3.
Start
collec+ng
your
data
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function()
{ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })
(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-2282690-1', 'paradigmadigital.com');
ga('send', 'pageview');
</script>
Paste
the
code
provided
by
Google
on
all
the
pages
This
script
triggers
a
sequence
of
tos
and
fros
between
your
applica+on
and
Google
Analy+cs’
servers.
10. Sequence of events Client browser <> Google Analytics’ server
(*)
http://www.google-analytics.com/collect?v=1&_v=j20&a=806449001&t=pageview&_s=1&dl=http%3A%2F%2Fwww.domain.com%2F&ul=en-
us&de=UTF-8&sd=24-bit&sr=1920x1080&vp=1920x199&je=1&fl=13.0%20r0&_u=MAC~&cid=416165610.1399537988&tid=UA-XXXXXXX-1&z=2140666386
Servers
analy+cs.js
<img>
element
in
the
DOM
Requests
analy+cs.js
GET
with
a
URL
(*)
containing
appended
values
single-‐pixel
gif
stores
the
hit
11. The
4
cri+cal
variables:
t,
cid
and
+d
They
must
be
present
on
EVERY
call
to
be
accepted
by
GA
servers.
o t=pageview
pageview
hit
type
o cid=416165610.1399537988
anonymous
Client
ID
o +d=UA-‐2282690-‐1
tracking
property
ID
o v=1
protocol
Version
13. Visualiza+on
of
tags
and
scripts
Sequence
of
scripts
of
Google
Tag
Manager
and
tags
of
Google
Analy+cs
firing
Animated
sequence
elaborated
from
screenshot
of
the
analy+cs
tool
WASP
by
Cardinal
Path
15. Metrics
and
dimensions
Dimensions
Auributes
of
• Visitors
• Sessions
• Hits:
page,
event
The
values
of
dimensions
are
strings.
Metrics
Counts
(average
integer
or
currencies).
Values
of
metrics
are
numbers.
16. Event
hits
Some
user
ac+ons
do
not
generate
pageviews:
-‐ comple+on
of
individual
form
fields
(“Send”)
-‐ clicks
on
external,
pdf
and
mailto:
links
-‐ video
plays
or
completes
-‐ ac+va+on
of
AJAX,
Flash,
jQuery
or
HTML5
interac+ons
In
other
to
measure
and
report
these
ac+ons
tag
some
HTML
elements
as
events
by
hardcoding
each
one:
ga(‘send’, ‘event’, ‘category’ ‘action’, ‘label’);
17. Custom
metrics
and
dimensions
ga('send', 'pageview', { 'dimension5': ‘stockist' });
Google
Analy+cs
is
not
restricted
to
its
built-‐in
variables.
You
can
be
setup
and
passed
as
custom
dimensions
or
custom
metrics
of
your
specific
applica+on.
You
can
tag
some
pageviews
by
hardcoding
for
instance
a
dimension
specific
to
them,
e.g.
“stockist”:
18. Google
Tag
Manager
Snippet
provided
by
Google
to
paste
on
your
web
applica+on
immeditely
azer
the
tag
<body>:
! !<!-- Google Tag Manager -->"
"
! !<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-NJTFQC""
"
! !height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>"
"
! !<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':"
"
! !new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],"
"
! !j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src="
"
! !'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);"
"
! !})(window,document,'script','dataLayer','GTM-NJTFQC'); </noscript>"
"
! !<!-- End Google Tag Manager -->
19. Google
Tag
Manager
Data
Layers
for
Google
Tag
Manager
replace
the
hardcoding
of
Google
Analy+cs
<body>"
<script>"
dataLayer = [{"
'pageCategory': 'signup’,"
'visitorType': 'high-value’"
}];"
</script>"
<!-- Google Tag Manager à"
!snippet"
<!-- End Google Tag Manager -->"
20. Mark
up
of
events
ID page Category
type
element id Action Label dataLayer
nkPR-001_Dashboard upsell button messages-link-message-{n} click submit {data}-{model}-{atributte-00}-{attribute-01}-{attribute-02}
nkPR-001_Dashboard upsell button messages-button-close-message-{n} click hide {data}-{model}-{atributte-00}-{attribute-01}-{attribute-02}
Crea+ng
event
tags
directly
within
the
Google
Tag
Manager
interface
spares
you
from
hardcoding
them
as
with
Google
Analy+cs.
Events
are
fired
• with
triggers
based
on
predefined
variables
• on
custom
variables
that
you
can
build
within
the
Google
Tag
Manager
UI
Example
of
specifica+ons
sent
by
Analysts
to
Developers
with
data
Layers
of
events
by
HTML
id
21. Paste
the
tracking
code
in
the
<head>
of
all
the
web
pages
of
your
applica+on
Start
tracking
from
day
zero
of
a
project
as
soon
as
you
have
something
in
pre-‐produc+on
Track
also
private
areas
(protected
by
a
login
and/or
disallowed
to
crawling
bots)
________________________
Do
not
collect
data
with
Google
Analy+cs’
script
analy+cs.js
AND
with
Google
Tag
Manager’s
container
simultaneously
Do
not
place
the
data
layer
code
azer
the
container
snippet
Do’s
and
don’ts
22. Most
frequent
errors
• Missing
HTTP
response,
tags
not
fired
• Pas+ng
the
Google
Analy+cs
tracking
code
outside
of
the
<head>
sec+on
• Pas+ng
the
Google
Tag
Manager
code
snippet
not
immediately
azer
the
opening
<body>
tag
• Mul+ple
installa+ons
of
Google
Tag
Manager
and
Google
Analy+cs
• Declara+on
of
names
of
parameters
instead
of
names
of
variables
in
Google
Analy+cs
• Missing
quotes
in
data
layer
fields
dataLayer.push({new-‐variable:
"value"});
in
Google
Tag
Manager
24. Debugging
tools
• Tag
Assistant
hups://support.google.com/tagassistant#topic=6000196
• JavaScript
Console
hup://geCirebug.com/
• Google
Analy+cs
console
–
Repor+ng
-‐
Real-‐Time
• Google
API
Query
Explorer
hups://ga-‐dev-‐tools.appspot.com/query-‐explorer/
25. Google
Analy+cs
Universal
is
user-‐centric
Cookies are not used by mobile apps and browsers such as Safari on iphones.
The identification of users and their sessions takes place now at server level, not browser/cookie level.
Cookies are still used but Google warns that their format might change without warning.
Developers should not directly access the cookie analytics.js sets as it could lead to script errors and
incorrect data.
Developers should use the get command to retrieve the clientId value when needed.
ga(function(tracker) { var clientId = tracker.get('clientId'); });
26. clientId for cross-device attribution
You can use a custom visitor ID based on customer email or ID in your database to merge smartphone /
laptop / pc sessions into one cross-device session.
Example: you can associate the clientID to their email address:
ga('create', 'UA-XXXX-Y', {'clientId': ’md5($email)' });
GA uses cookie value + domain as a unique internal identifier. If two or more websites set up the same
client ID value based on customer email, the data won't be corrupted, because they are using different
domains (and different GA profile id).
27. Track
transac+ons
by
individual
user
In
an
e-‐commerce
scenario
unique
ids
of
users
are
generated
through
the
authen+ca+on
passed
to
an
account
at
sign-‐in.
The
User
ID
will
allow
you
to
track
transac+ons
and
ac+vity
on
per
individual
customer
basis
(anonymized
by
TOS
of
Google).
Add
the
following
line
to
your
tracking
code
to
send
User-‐ID
data
to
Google
Analy+cs.
ga('set', '&userId', 'USER_ID');
where
USER_ID
is
a
string
and
represents
the
anonymized
andunique
ID
retrieved
from
your
system.
Do
declare
the
variable
"userId"
instead
of
the
parameter
"uid”.
28. Split
tes+ng
of
content
-‐
a
mul+-‐armed
bandit
approach
Source:
Wikimedia.org
30. Physical
analy+cs?
You
can
send
data
to
Google
Analy+cs
using
by
making
either
POST
or
GET
requests
to
the
following
end
point:
hups://www.google-‐analy+cs.com/collect
For
instance
sensors
firing
events
in
the
physical
world
can
be
sent
as
hit
type
“event”
on
Google
Analy+cs
by
opening
the
URL
hup://www.google-‐analy+cs.com/collect?v=1&+d=UA-‐XXXXXX-‐
Y&cid=1111&t=event&ec=in-‐store&ea=walkthrough&el=frontdoor
where
ec:
event
category
ea:
event
ac+on
el:
event
label
Sensor
connected
to
a
Raspberry
Pi
Source:
hup://nicomiceli.com/tracking-‐your-‐home-‐with-‐google-‐analy+cs/
Read
more:
hups://developers.google.com/analy+cs/devguides/collec+on/protocol/v1/reference