1
Student examples
- Check out this awesome lab 6 stretch goal!
2
3
4
5
How will this lab help me?
This lab will teach you how to run A/B testing using Google Analytics. This is a fundamental skill for testing user behavior on the web, and assignment 8, and especially assignment 9 includes these tasks!
6
7
8
9
10
11
12
Sample event calls
ga("send", "event", "friendsuggestion", "dismiss");
ga("send", "event", "friendsuggestion", "accept");
ga("send", "event", "humankind", "destroy");
ga("send", "event", <Category>, <Action>);13
14
15
16
17
18
19
20
21
22
23
24
Goal
Install pageview analytics on your portfolio.
26
27
28
30
Heroku - Create
heroku create newapplicationnameHeroku - Push
git push heroku master
32
33
34
Tracking Code
Where do I get my code again if I've lost it?
Use the instructions on the next slide.
35
36
37
Troubleshoot
How do I know my code is being included?
From within Chrome, check the end of the body of the html by right-clicking and selecting View Page Source. You should see the google analytics javascript code you pasted into googleAnalytics.handlebars at the bottom of </body>.
My code is included but I'm still not seeing the collect message in the Network tab.
A zealous Adblock sometimes blocks messages to google analytics. Try disabling your adblock plugin for the duration of this lab if you have one.
38
39
40
41
42
Goal
Run an A/B test on a grid vs. the old vertical layout
43
44
Troubleshoot
It says "Cannot GET /grid"
Did you add the route in app.js? (See Prev Slide)
46
47
Code
<div class="row">
<div class="project col-md-4" id="{{projects.0.id}}">
<div class="thumbnail">
<a href="/project/{{projects.0.id}}">
<img src="images/{{projects.0.image}}" alt="Lorem Pixel image">
<h4>{{projects.0.title}}</h4>
</a>
<div class="details"></div>
<button class="btn btn-default likeBtn">Like</button>
</div>
</div>
<div class="project col-md-4" id="{{projects.1.id}}">
<div class="thumbnail">
<a href="/project/{{projects.1.id}}">
<img src="images/{{projects.1.image}}" alt="Lorem Pixel image" class="img-responsive">
<h4>{{projects.1.title}}</h4>
</a>
<button class="btn btn-default likeBtn">Like</button>
<div class="details"></div>
</div>
</div>
<div class="project col-md-4" id="{{projects.2.id}}">
<div class="thumbnail">
<a href="/project/{{projects.2.id}}">
<img src="images/{{projects.2.image}}" alt="Lorem Pixel image" class="img-responsive">
<h4>{{projects.2.title}}</h4>
</a>
<button class="btn btn-default likeBtn">Like</button>
<div class="details"></div>
</div>
</div>
</div>
<div class="row">
<div class="project col-md-3" id="{{projects.3.id}}">
<div class="thumbnail">
<a href="/project/{{projects.3.id}}">
<img src="images/{{projects.3.image}}" alt="Lorem Pixel image" class="img-responsive">
<h4>{{projects.3.title}}</h4>
</a>
<button class="btn btn-default likeBtn">Like</button>
<div class="details"></div>
</div>
</div>
<div class="project col-md-3" id="{{projects.4.id}}">
<div class="thumbnail">
<a href="/project/{{projects.4.id}}">
<img src="images/{{projects.4.image}}" alt="Lorem Pixel image" class="img-responsive">
<h4>{{projects.4.title}}</h4>
</a>
<button class="btn btn-default likeBtn">Like</button>
<div class="details"></div>
</div>
</div>
<div class="project col-md-3" id="{{projects.5.id}}">
<div class="thumbnail">
<a href="/project/{{projects.5.id}}">
<img src="images/{{projects.5.image}}" alt="Lorem Pixel image" class="img-responsive">
<h4>{{projects.5.title}}</h4>
</a>
<button class="btn btn-default likeBtn">Like</button>
<div class="details"></div>
</div>
</div>
<div class="project col-md-3" id="{{projects.6.id}}">
<div class="thumbnail">
<a href="/project/{{projects.6.id}}">
<img src="images/{{projects.6.image}}" alt="Lorem Pixel image" class="img-responsive">
<h4>{{projects.6.title}}</h4>
</a>
<button class="btn btn-default likeBtn">Like</button>
<div class="details"></div>
</div>
</div>
</div>
<div class="row">
<div class="project col-md-2" id="{{projects.7.id}}">
<div class="thumbnail">
<a href="/project/{{projects.7.id}}">
<img src="images/{{projects.7.image}}" alt="Lorem Pixel image" class="img-responsive">
<h4>{{projects.7.title}}</h4>
</a>
<button class="btn btn-default likeBtn">Like</button>
<div class="details"></div>
</div>
</div>
<div class="project col-md-2" id="{{projects.8.id}}">
<div class="thumbnail">
<a href="/project/{{projects.8.id}}">
<img src="images/{{projects.8.image}}" alt="Lorem Pixel image" class="img-responsive">
<h4>{{projects.8.title}}</h4>
</a>
<button class="btn btn-default likeBtn">Like</button>
<div class="details"></div>
</div>
</div>
<div class="project col-md-2" id="{{projects.9.id}}">
<div class="thumbnail">
<a href="/project/{{projects.9.id}}">
<img src="images/{{projects.9.image}}" alt="Lorem Pixel image" class="img-responsive">
<h4>{{projects.9.title}}</h4>
</a>
<button class="btn btn-default likeBtn">Like</button>
<div class="details"></div>
</div>
</div>
<div class="project col-md-2" id="{{projects.10.id}}">
<div class="thumbnail">
<a href="/project/{{projects.10.id}}">
<img src="images/{{projects.10.image}}" alt="Lorem Pixel image" class="img-responsive">
<h4>{{projects.10.title}}</h4>
</a>
<button class="btn btn-default likeBtn">Like</button>
<div class="details"></div>
</div>
</div>
<div class="project col-md-2" id="{{projects.11.id}}">
<div class="thumbnail">
<a href="/project/{{projects.11.id}}">
<img src="images/{{projects.11.image}}" alt="Lorem Pixel image" class="img-responsive">
<h4>{{projects.11.title}}</h4>
</a>
<button class="btn btn-default likeBtn">Like</button>
<div class="details"></div>
</div>
</div>
<div class="project col-md-2" id="{{projects.12.id}}">
<div class="thumbnail">
<a href="/project/{{projects.12.id}}">
<img src="images/{{projects.12.image}}" alt="Lorem Pixel image" class="img-responsive">
<h4>{{projects.12.title}}</h4>
</a>
<button class="btn btn-default likeBtn">Like</button>
<div class="details"></div>
</div>
</div>
</div>
Troubleshoot
It still looks the same!
Restart node and maximize your browser window.
48
Hint
How do I register a user click?
Check back to Lab 3 slide 42-Listening to clicks
How do I add the Google Analytics event?
Remember back from slide 12-Store any kind of event on the form of
ga("send", "event", <Category>, <Action>);<Category> for 'like', and <Action> for 'click' and place it in the click event handler.
49
50
51
52
GitHub - Commit
git status
git add ...
git commit -m "initial analytics lab"Github - Push
git pushHeroku - Push
git push heroku master53
54
55
Coin flip
var random_num = Math.random();
console.log(random_num);
if (random_num > 0.5) {
projects['grid'] = false;
res.render('index', projects);
} else {
res.redirect('/grid');
}56
57
58
59
60
Heads Up!
Will my experiment be evenly distributed?
One more step! In order to get the experiment to evenly distribute, we need to explicitly turn it on as a setting.
61
62
Troubleshoot
How do I reference my new gridExperiment partials?
Remember back to how we referenced the googleAnalytics partials!
63
GitHub - Commit
git status
git add ...
git commit -m "Added Experiment Header"Github - Push
git pushHeroku - Push
git push heroku master64
Troubleshoot
Experiment code not found
Make sure you inserted the code on step 3 inside the <head>...</head> block of index.handlebars
65
66
Hint
How do I clear my cookies so I can see an alternate version of the site?
You can do this by going to google chrome's settings, Show Advanced Settings→Content settings→All Cookies and Site Data. From there, search your heroku URL and Remove the cookie, like below.
This is a lot of work. Is there a better way?
In fact, yes! You could simply open an incognito window and it won't save cookies.
67
68
