Skip to content

Commit

Permalink
update slides for 2016
Browse files Browse the repository at this point in the history
  • Loading branch information
@willdurand
willdurand committed May 29, 2016
1 parent b70bb32 commit 3f8893b
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 55 deletions.
5 changes: 5 additions & 0 deletions css/custom.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
.slides p,
.slides li {
font-size: 2.2rem!important;
}

.me {
margin: 0 !important;
text-align: center !important;
Expand Down
110 changes: 56 additions & 54 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
<meta charset="utf-8">

<title>Web Analytics & Tracking 101 | William Durand</title>
<link rel="stylesheet" href="reveal.js/css/reveal.min.css">
<link rel="stylesheet" href="reveal.js/css/theme/simple.css" id="theme">
<link rel="stylesheet" href="reveal.js/css/reveal.css">
<link rel="stylesheet" href="reveal.js/css/theme/white.css" id="theme">
<link rel="stylesheet" href="reveal.js/lib/css/zenburn.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/fix-fontawesome-reveal-js.css">
Expand Down Expand Up @@ -45,34 +45,32 @@ <h1 class="title">Web Analytics & Tracking 101</h1>
<script type="text/template">
## Definition

**Web analytics** is the **measurement**, **collection**, **analysis** and **reporting**
of web data for purposes of **understanding** and **optimizing web usage**.
**Web analytics** is the **measurement**, **collection**, **analysis**<br>and **reporting**
of web data for purposes of **understanding**<br>and **optimizing web usage**.

<br>
It can be used as a tool for business and market research.
* It can be used as a tool for business and market research
* There are two categories of web analytics:

<br>
There are two categories of web analytics:

* **off-site** web analytics
* **on-site** web analytics
- **off-site** web analytics
- **on-site** web analytics
</script>
</section>
<section data-markdown>
<script type="text/template">
## Off-Site WA

Off-site web analytics refers to web measurement and analysis regardless of
whether you own or maintain a website.
whether you own/maintain a website.
</script>
</section>
<section data-markdown>
<script type="text/template">
## On-Site WA

On-site web analytics measures a **visitor's behavior once on your website**.
There are two main technical ways of collecting the data: **server log file
analysis**, and **page tagging**.
On-site web analytics measures a **visitor's behavior<br>once on your website**.
There are two main technical<br>ways of collecting the data: **server log file
analysis**,<br>and **page tagging**.

<br>
<br>
Expand All @@ -88,10 +86,10 @@ <h1 class="title">Web Analytics & Tracking 101</h1>
Web servers record some of their transactions in a **logfile**.

In the early 1990s, web site statistics consisted of counting the number
of client requests, called **hits**, made to the web server.
of client requests (**hits**) made to the web server.

<br>
This was a reasonable method initially, since each web site often consisted of a
This was a reasonable method initially, since each web site<br>often consisted of a
single HTML file. However, with the introduction of images in HTML, and web
sites that spanned multiple HTML files, this count became less useful.

Expand Down Expand Up @@ -185,7 +183,7 @@ <h1 class="title">Web Analytics & Tracking 101</h1>
</section>
<section data-markdown>
<script type="text/template">
## How Does The Tracking Code Work? (1/2)
### How Does The Tracking Code Work? (1/2)

1. A browser requests a web page that contains the tracking code
2. A JavaScript `Array` named `_gaq` is created and tracking commands are pushed onto the array
Expand All @@ -199,17 +197,17 @@ <h1 class="title">Web Analytics & Tracking 101</h1>
</section>
<section data-markdown>
<script type="text/template">
## How Does The Tracking Code Work? (2/2)
### How Does The Tracking Code Work? (2/2)

<img src="images/ga-tracking.png" class="no-border" />
</script>
</section>
<section data-markdown>
<script type="text/template">
## How Does Google Analytics Collect Data? (1/2)
### How Does Google Analytics Collect Data? (1/2)

The **data used** to provide all the information in Google
Analytics **reports** comes from three different sources:
<br>Analytics **reports** comes from three different sources:

* The **HTTP request** of the user (hostname, the browser type, referrer, language)
* Browser/system information (Java and Flash support, screen resolution thanks to the DOM)
Expand All @@ -218,29 +216,31 @@ <h1 class="title">Web Analytics & Tracking 101</h1>
</section>
<section data-markdown>
<script type="text/template">
## How Does Google Analytics Collect Data? (2/2)
### How Does Google Analytics Collect Data? (2/2)

When all this information is collected, it is sent
to the Google Analytics servers in the form of a
**long list of parameters** attached to a
**single-pixel GIF image** request:

<pre><code>http://www.google-analytics.com/__utm.gif?
utmac=UA-30138-1& // Account
utmcc=__utma%3D97315849.1774621898...& // Cookie values
utmdt=analytics%20page%20test& // Page title
utmfl=9.0%20r48& // Flash version
utmhn=example.com& // Hostname
utmn=769876874& // Unique ID to prevent caching
utmcs=ISO-8859-1& // Language enc.
utmsr=1280x1024& // Screen resolution
utmsc=32-bit& // Screen color depth
utmul=en-us& // Browser language
...
utmac=UA-30138-1& // Account
utmcc=__utma%3D97315849.1774621898...& // Cookie values
utmdt=analytics%20page%20test& // Page title
utmfl=9.0%20r48& // Flash version
utmhn=example.com& // Hostname
utmn=769876874& // Unique ID to prevent caching
utmcs=ISO-8859-1& // Language enc.
utmsr=1280x1024& // Screen resolution
utmsc=32-bit& // Screen color depth
utmul=en-us& // Browser language
...
</code></pre>

<small>
<i class="fa fa-book"></i> [The Google Analytics GIF Request
Parameters](https://developers.google.com/analytics/resources/articles/gaTrackingTroubleshooting#gifParameters)
</small>
</script>
</section>
<section>
Expand Down Expand Up @@ -300,15 +300,15 @@ <h1 class="title">Web Analytics & Tracking 101</h1>
</section>
<section data-markdown>
<script type="text/template">
## EU Cookie Directive
### EU Cookie Directive

The **EU cookie directive** requires websites to
gain permission from users, before planting cookies
with two exceptions:

* Some cookies can be exempted from informed consent
under certain conditions if they are not used for
additional purposes (e.g. cookies used to keep
additional purposes (_e.g._, cookies used to keep
track of a user's input when filling online forms
or as a shopping cart);
* First-party analytics cookies are not likely to
Expand All @@ -321,7 +321,7 @@ <h1 class="title">Web Analytics & Tracking 101</h1>
</section>
<section data-markdown>
<script type="text/template">
## How Do Third-Party Tracking Cookies work? (1/4)
### How Do Third-Party Tracking Cookies work? (1/4)

Let's say you have four websites:

Expand All @@ -330,18 +330,17 @@ <h1 class="title">Web Analytics & Tracking 101</h1>
* wired.com
* facebook.com

<br>
You are a user, and you visit each of these websites.
Each of these websites also works with a third-party company whose
job is to serve ads, and named: **badboys.com**.
job is to serve ads, and named: `badboys.com`.

On every page of these websites, there is a web bug that points to
badboys.com's adserver and requests an ad.
`badboys.com`'s adserver and requests an ad.
</script>
</section>
<section data-markdown>
<script type="text/template">
## How Do Third-Party Tracking Cookies work? (2/4)
### How Do Third-Party Tracking Cookies work? (2/4)

Assuming `gizmodo.com` knows your age and gender,
when visiting it, the following request is made:
Expand All @@ -358,7 +357,7 @@ <h1 class="title">Web Analytics & Tracking 101</h1>
</section>
<section data-markdown>
<script type="text/template">
## How Do Third-Party Tracking Cookies work? (3/4)
### How Do Third-Party Tracking Cookies work? (3/4)

Even though you are visiting the site
`gizmodo.com`, the cookie is under the domain
Expand All @@ -376,7 +375,7 @@ <h1 class="title">Web Analytics & Tracking 101</h1>
</section>
<section data-markdown>
<script type="text/template">
## How Do Third-Party Tracking Cookies work? (4/4)
### How Do Third-Party Tracking Cookies work? (4/4)

Now, you go to `facebook.com`. Serving an ad for such a website is
complicated as it depends on how you use Facebook. Maybe you didn't
Expand All @@ -385,24 +384,26 @@ <h1 class="title">Web Analytics & Tracking 101</h1>

<br>
**But**, let's walk through the steps of a Facebook's ad call to
`badboys.com` in more detail!
`badboys.com` in more details!
</script>
</section>
<section data-markdown>
<script type="text/template">
## 1. Browser Requests Content
### 1. Browser Requests Content
<br>

http://badboys.com/adrequest?site=facebook.com
</script>
</section>
<section data-markdown>
<script type="text/template">
## 2. Server Requests Cookies (If Any)
### 2. Server Requests Cookies (If Any)
</script>
</section>
<section data-markdown>
<script type="text/template">
## 3. Browser Sends Cookies
### 3. Browser Sends Cookies
<br>

* Cookie contains your age & gender (25 & male) (encrypted)
* Cookie shows you visited `gizmodo.com` 12 times this morning
Expand All @@ -412,7 +413,8 @@ <h1 class="title">Web Analytics & Tracking 101</h1>
</section>
<section data-markdown>
<script type="text/template">
## 4. Server Does Some Black Magic, And Picks An Ad
### 4. Server Does Some Black Magic,<br>And Picks An Ad
<br>

* Server puts user data (_25, male, 16 visits to tech sites_) into a **profile engine**
* Profile engine represents **categories**, say `male`, `tech`
Expand All @@ -425,17 +427,17 @@ <h1 class="title">Web Analytics & Tracking 101</h1>
</section>
<section data-markdown>
<script type="text/template">
## 5. Server Returns New Cookie Data, And The Ad
### 5. Server Returns New Cookie Data, And The Ad
</script>
</section>
<section data-markdown>
<script type="text/template">
## 6. Browser Displays This Ad
### 6. Browser Displays This Ad
</script>
</section>
<section data-markdown>
<script type="text/template">
## Conclusion
### Conclusion

Instead of showing you a random ad, `badboys.com`
is able to show you a highly relevant and targeted
Expand All @@ -445,7 +447,7 @@ <h1 class="title">Web Analytics & Tracking 101</h1>
</section>
<section data-markdown>
<script type="text/template">
## And...
### And...

Given how much tracking companies know about your
browsing history, it is worth asking whether these
Expand All @@ -456,7 +458,8 @@ <h1 class="title">Web Analytics & Tracking 101</h1>
</section>
<section data-markdown>
<script type="text/template">
## Paths For Data Leakage From Social Networks To Third-Party Tracking Companies
### Paths For Data Leakage From<br>Social Networks To Third-Party Tracking Companies
<br>

The most obvious way that a third-party tracker
(remember `badboys.com`?) might learn which account
Expand All @@ -470,7 +473,7 @@ <h1 class="title">Web Analytics & Tracking 101</h1>
</section>
<section data-markdown>
<script type="text/template">
## What Can You Do?
### What Can You Do?

1. Pick a **good cookie policy** for your browser, like **only keep
cookies until I close my browser**, or manual approval of all cookies
Expand Down Expand Up @@ -554,7 +557,6 @@ <h1 class="title">Web Analytics & Tracking 101</h1>

### Questions?

<br>
<br>
<br>
<ul class="me">
Expand All @@ -573,7 +575,7 @@ <h1 class="title">Web Analytics & Tracking 101</h1>
</div>
</div>
<script src="reveal.js/lib/js/head.min.js"></script>
<script src="reveal.js/js/reveal.min.js"></script>
<script src="reveal.js/js/reveal.js"></script>
<script>
Reveal.initialize({
controls: true,
Expand Down
2 changes: 1 addition & 1 deletion reveal.js
Submodule reveal.js updated 99 files
+8 −1 .gitignore
+1 −1 .travis.yml
+23 −0 CONTRIBUTING.md
+65 −26 Gruntfile.js
+1 −1 LICENSE
+348 −177 README.md
+27 −0 bower.json
+193 −167 css/print/paper.css
+44 −74 css/print/pdf.css
+1,075 −1,624 css/reveal.css
+0 −7 css/reveal.min.css
+1,411 −0 css/reveal.scss
+2 −6 css/theme/README.md
+190 −47 css/theme/beige.css
+287 −0 css/theme/black.css
+200 −65 css/theme/blood.css
+0 −148 css/theme/default.css
+293 −0 css/theme/league.css
+187 −44 css/theme/moon.css
+191 −42 css/theme/night.css
+199 −50 css/theme/serif.css
+199 −50 css/theme/simple.css
+190 −41 css/theme/sky.css
+187 −44 css/theme/solarized.css
+1 −12 css/theme/source/beige.scss
+49 −0 css/theme/source/black.scss
+3 −15 css/theme/source/blood.scss
+5 −13 css/theme/source/league.scss
+1 −12 css/theme/source/moon.scss
+1 −1 css/theme/source/serif.scss
+1 −1 css/theme/source/sky.scss
+1 −12 css/theme/source/solarized.scss
+49 −0 css/theme/source/white.scss
+13 −4 css/theme/template/settings.scss
+208 −32 css/theme/template/theme.scss
+287 −0 css/theme/white.css
+410 −0 demo.html
+21 −359 index.html
+1,855 −493 js/reveal.js
+0 −9 js/reveal.min.js
+51 −85 lib/css/zenburn.css
+0 −0 lib/font/league-gothic/LICENSE
+10 −0 lib/font/league-gothic/league-gothic.css
+ − lib/font/league-gothic/league-gothic.eot
+ − lib/font/league-gothic/league-gothic.ttf
+ − lib/font/league-gothic/league-gothic.woff
+ − lib/font/league_gothic-webfont.eot
+0 −230 lib/font/league_gothic-webfont.svg
+ − lib/font/league_gothic-webfont.ttf
+ − lib/font/league_gothic-webfont.woff
+45 −0 lib/font/source-sans-pro/LICENSE
+ − lib/font/source-sans-pro/source-sans-pro-italic.eot
+ − lib/font/source-sans-pro/source-sans-pro-italic.ttf
+ − lib/font/source-sans-pro/source-sans-pro-italic.woff
+ − lib/font/source-sans-pro/source-sans-pro-regular.eot
+ − lib/font/source-sans-pro/source-sans-pro-regular.ttf
+ − lib/font/source-sans-pro/source-sans-pro-regular.woff
+ − lib/font/source-sans-pro/source-sans-pro-semibold.eot
+ − lib/font/source-sans-pro/source-sans-pro-semibold.ttf
+ − lib/font/source-sans-pro/source-sans-pro-semibold.woff
+ − lib/font/source-sans-pro/source-sans-pro-semibolditalic.eot
+ − lib/font/source-sans-pro/source-sans-pro-semibolditalic.ttf
+ − lib/font/source-sans-pro/source-sans-pro-semibolditalic.woff
+39 −0 lib/font/source-sans-pro/source-sans-pro.css
+9 −8 lib/js/head.min.js
+20 −22 package.json
+4 −5 plugin/highlight/highlight.js
+0 −157 plugin/leap/leap.js
+3 −3 plugin/markdown/example.html
+26 −13 plugin/markdown/markdown.js
+2 −33 plugin/markdown/marked.js
+5 −2 plugin/math/math.js
+1 −1 plugin/multiplex/client.js
+24 −16 plugin/multiplex/index.js
+22 −42 plugin/multiplex/master.js
+19 −0 plugin/multiplex/package.json
+54 −46 plugin/notes-server/client.js
+35 −25 plugin/notes-server/index.js
+362 −97 plugin/notes-server/notes.html
+329 −182 plugin/notes/notes.html
+105 −47 plugin/notes/notes.js
+0 −39 plugin/postmessage/example.html
+0 −42 plugin/postmessage/postmessage.js
+24 −20 plugin/print-pdf/print-pdf.js
+0 −39 plugin/remotes/remotes.js
+78 −58 plugin/zoom-js/zoom.js
+2 −2 test/examples/barebones.html
+2 −2 test/examples/embedded-media.html
+2 −2 test/examples/math.html
+29 −7 test/examples/slide-backgrounds.html
+101 −0 test/examples/slide-transitions.html
+9 −9 test/test-markdown-element-attributes.html
+1 −1 test/test-markdown-element-attributes.js
+7 −7 test/test-markdown-slide-attributes.html
+4 −4 test/test-markdown.html
+83 −0 test/test-pdf.html
+15 −0 test/test-pdf.js
+9 −4 test/test.html
+168 −9 test/test.js

0 comments on commit 3f8893b

Please sign in to comment.