forked from hakimel/reveal.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
660 lines (604 loc) · 35.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Google Analytics, Event Tracking and Discovery Tools</title>
<meta name="description" content="Being A Presentation To The Aseembled Body In Chicago">
<meta name="author" content="Emily Lynema, Adam Constabaris">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/beige.css" id="theme">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<style type="text/css">
@-webkit-keyframes blink {
from { opacity: 1.0; }
to { opacity: 0.0; }
}
#blinky {
-webkit-animation-name: blink;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier;
-webkit-animation-duration: 1s;
}
</style>
<!-- If the query includes 'print-pdf', use the PDF print sheet -->
<script>
document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h2>Google Analytics, Event Tracking and Discovery Tools</h2>
<h5>Going Beyond Pageviews</h5>
<small>
<p>
Emily Lynema, Associate Head, IT, NCSU Libraries
</p>
<p>
Adam Constabaris, Singe de Code, NCSU Libraries
</p><br />
<p>Code4Lib, February 2013</p>
<img src="images/ncsu-libraries-logo.png" style="border: none; box-shadow: none;"/>
</small>
</section>
<section>
<section>
<h2>Overview</h2>
<p>
Google Analytics can be used to track not only pageviews, but in-page events, allowing you to understand more
about how your site is being used.
</p>
<br />
<p class="fragment">Have real patron data to make data-driven design decisions. </p>
<aside class="notes">Stop long arguments about design by showing what users do and don't do in your interfaces.</aside>
</section>
</section>
<section>
<h2>Google Analytics Event Tracking</h2>
<ul>
<li>You decide what to track</li>
<ul>
<li>Which user actions?</li>
<li>How should they be categorized?</li>
</ul>
<li>Use simple JavaScript to push events to Google</li>
<li>Enjoy Google Analytics' feature-full reporting interface</li>
</ul>
<aside class="notes">Adam is going to delve into all the technical details, so this is the 3 sentence overview to provide context.
A set of tools within Google Analytics for tracking user actions in a locally customizable, granular way. You decide what to record and how to categorize it. Rather than pushing a javascript call that pushes the standard pageview into Google Analytics for tracking and reporting, you push an event that a user performs on your site, along with several different categories of metadata to describe it -- these can be used for slicing and dicing your reporting later.
Then you have a Google Analytic's standard, pretty feature-full interface for reporting across these events.
</aside>
</section>
</section>
<!-- Example of nested vertical slides -->
<section>
<section>
<h2>Event Tracking Use Cases</h2>
</section>
<section>
<ul>
<li>Hidden or externally loaded (AJAX) content</li>
</ul>
</section>
<section>
<a class="image" href="images/catalog-hidden-content.png" target="_blank">
<img src="images/catalog-hidden-content.png" alt="Full Record Preview" />
</a>
<aside class="notes">
Some content on the page is hidden when the page loads; users access that content
by following a link.
</aside>
</section>
<section>
<a class="image" href="images/catalog-record-ajax.png" target="_blank">
<img src="images/catalog-record-ajax.png" alt="Full Record Preview" />
</a>
<aside class="notes">
Other content is not loaded initially, but is on user demand (as in the tabs).
</aside>
</section>
<section>
<ul>
<li>Hidden or externally loaded (AJAX) content</li>
<li>Internal links that occur in multiple places</li>
</ul>
</section>
<section>
<a class="image" href="images/catalog-record-request.png" target="_blank">
<img src="images/catalog-record-request.png" alt="Full Record Preview" />
</a>
<aside class="notes">
</aside>
</section>
<section>
<ul>
<li>Hidden or externally loaded (AJAX) content</li>
<li>Internal links that occur in multiple places</li>
<li>External links</li>
</ul>
</section>
<section>
<a class="image" href="images/catalog-record-external.png" target="_blank">
<img src="images/catalog-record-external.png" alt="Full Record Preview" />
</a>
<aside class="notes">
</aside>
</section>
</section>
<section>
<section>
<h2>NCSU Catalog Activity (*)</h2>
<p class="fragment">Tracking LOTS of things</p>
<p class="fragment">(*) But not all of them for very long</p><br />
<aside class="notes">Before we talk about technical details, I want to provide some examples of usage data we're gleaning from Google Analytics event tracking.
In the catalog, we decided to track a LOT of things. Unfortunately, this has been a work in progress, so some of the data has not been gathered for very long.</aside>
</section>
<section>
<h2>What are we tracking?</h2>
<ul>
<li>Results List clicks</li>
<li>Facet expand / close</li>
<li>Facet checkboxes</li>
<li>Send search out to TRLN / WorldCat / Summon</li>
<li>Full record tools</li>
<li>Full record tabs</li>
<li>Location tab clicks (request, browse, full text)</li>
<li>External URLs on the full record (finding aids, full text)</li>
<li>Browse (shelf browse / subject browse)</li>
</ul>
</section>
</section>
<section>
<section>
<h2>Interesting Findings</h2>
<small>various dates</small>
<aside class="notes">It's a little out of scope for this short presentation to share all of our statistics, but I wanted to pick out some interesting and/or surprising things to share. I can make more complete statistics available to those who might be interested. </aside>
</section>
<section>
<h5>Whoa....look at those tabs.</h5>
<a class="image" href="images/catalog-event-categories.png" target="_blank">
<img src="images/catalog-event-categories.png" alt="Full Record Preview" />
</a>
<small>Note: February 5-7, 2013</small>
<aside class="notes">A note about the dates....we just finally got some code released last week that contributed numbers for several categories of activity, particularly
full text URLs and things on the results list. In order to include that activity, I've had to limit the date range for these overall statistics. As I'll note on the next slide, that may skew things a little, but overall the trends
are very similar when compared out across the last 3-4 months.
This chart shows the different categories of events we're tracking - the first level of metadata we use to aggregate our events for reporting.
The first biggest thing you see when looking at the stats is...wow, tabs are used a lot. These are tabs on the full record page. I'll talk about that a little more next slide.
The next thing is that URL category. Note that full text activity is scattered across URL, Location Tab, and Results. It's a big reason that the URL category is so high. </aside>
</section>
<section>
<h5>Wait...do I see MARC??</h5>
<a class="image" href="images/catalog-specific-events.png" target="_blank">
<img src="images/catalog-specific-events.png" alt="Full Record Preview" />
</a>
<small>Note: February 5-7, 2013</small>
<aside class="notes">This data is our second level "actions" -- primarily specific events rather than groupings of events. Again note the prominence of
tab activity here. We saw this confirmed in usability testing recently -- the users literally run through and click on all the tabs as one of their first activities if they are looking for something. This includes the MARC tab that we thought no one but staff ever clicked on, although they don't stay there very long.
I'm also interested in the number of clicks on the "Details" tab. It's the second tab in our interface, and really, things like ISBN, other authors, other titles, notes are just not what most undergraduates are
looking for. I believe this is another case in point of tab click mania. And then you see Location Tab in the list -- this is them clicking back on the original tab after realizing the other
tabs really weren't particularly helpful. Full text is high obviously; you can see that our list feature is used a fair amount, as is requesting. It's also interesting to see
the Browse shelf, and our feature to send the search out to our local TRLN consortium being relatively highly used in comparison with other things like emailing, printing, or texting a record.</section>
<section>
<h5>A small link can overpower a fancy widget</h5>
<a class="image" href="images/catalog-shelf-browse.png" target="_blank">
<img src="images/catalog-shelf-browse.png" alt="Full Record Preview" />
</a>
<aside class="notes">Now that we've looked at the most popular, what other interesting tidbits have we found?
Note we have longer term statistics here, so I feel pretty confident about these numbers. 3/4 of users click on "Browse shelf" from the list of individual items
on the holdings tab, rather than the big fancy looking widget.</aside>
<small>Note: November - February, 2013</small>
</section>
<section>
<a class="image" href="images/catalog-shelf-browse-screenshot.png" target="_blank">
<img src="images/catalog-shelf-browse-screenshot.png" alt="Full Record Preview" />
</a>
</section>
<section>
<h5>Having a link in more than one place can be helpful</h5>
<a class="image" href="images/catalog-requesting.png" target="_blank">
<img src="images/catalog-requesting.png" alt="Full Record Preview" />
</a>
<aside class="notes"></aside>
<small>Note: January - February, 2013</small>
</section>
<section>
<a class="image" href="images/catalog-request-links.png" target="_blank">
<img src="images/catalog-request-links.png" alt="Full Record Preview" />
</a>
<aside class="notes"></aside>
</section>
<section>
<h5>Users make some decisions from the results list</h5>
<a class="image" href="images/catalog-add-list.png" target="_blank">
<img src="images/catalog-add-list.png" alt="Full Record Preview" />
</a>
<aside class="notes"></aside><br />
<small>Note: February 5-7, 2013</small>
</section>
<section>
<a class="image" href="images/catalog-results-add-list.png" target="_blank">
<img src="images/catalog-results-add-list.png" alt="Full Record Preview" />
</a>
<aside class="notes"></aside>
</section>
<section>
<a class="image" href="images/catalog-full-record-add-list.png" target="_blank">
<img src="images/catalog-full-record-add-list.png" alt="Full Record Preview" />
</a>
<aside class="notes"></aside>
</section>
<section>
<h5>But they still like to look at the full record</h5>
<a class="image" href="images/catalog-full-text.png" target="_blank">
<img src="images/catalog-full-text.png" alt="Full Record Preview" />
</a><br />
<aside class="notes"></aside>
<small>Note: February 5-7, 2013</small>
<aside class="notes">70% of full text URL clicking is happening on the full record, even though the same URLs are offered on the results list</aside>
</section>
<section>
<a class="image" href="images/catalog-results-full-text.png" target="_blank">
<img src="images/catalog-results-full-text.png" alt="Full Record Preview" />
</a>
<aside class="notes"></aside>
</section>
<section>
<a class="image" href="images/catalog-full-record-full-text.png" target="_blank">
<img src="images/catalog-full-record-full-text.png" alt="Full Record Preview" />
</a>
<aside class="notes"></aside>
</section>
</section>
<section>
<section>
<h2>NCSU Summon Activity (*)</h2>
<p class="fragment">Tracking fewer things</p>
<p class="fragment">* Some things are almost impossible to track (ex: clicks to view full text)</p><br />
<p class="fragment">Picked the things that were easiest to track and seemed most durable, rather than most desired</p>
<aside class="notes">We've also experimented with adding some event tracking to our Serials Solutions Summon interface, for which we use the vendor-hosted interface.
Adam can share more about the differences we found trying to track events in markup we didn't control; but to summarize we are tracking fewer things primarily because they are harder to track in a maintainable way.
</section>
<section>
<h2>What are we tracking?</h2>
<ul>
<li>Searches</li>
<li>Sorting</li>
<li>Paging</li>
<li>Facet activity</li>
</ul><br /><br />
<p>Most difficult to identify: user clicks to view full text. So we didn't go there.</p>
<aside class="notes">The biggest thing to note here is just that the list is a lot, lot smaller. Searching activity (advanced search, search refinements, actual new searches) is interesting, but we don't necessarily
care *that* much about paging or sorting. But they were easy to identify in the DOM.
</section>
</section>
</section>
<section>
<section>
<h2>Interesting Findings</h2>
<small>November 2012 - February 2013</small>
</section>
<section>
<h5>Paging is more popular than facets</h5>
<a class="image" href="images/summon-overall-activity.png" target="_blank">
<img src="images/summon-overall-activity.png" alt="Full Record Preview" />
</a>
</section>
<section>
<h5>Content Type and Subject are basically the only facets </h5>
<a class="image" href="images/summon-facet-usage.png" target="_blank">
<img src="images/summon-facet-usage.png" alt="Full Record Preview" />
</a>
</section>
</section>
<section>
<section>
<h2>The Plumbing</h2>
<p class="fragment">
Of course it involves jQuery!
</p>
<p class="fragment">
It doesn't <em>have</em> to, but that's how we did it.
</p>
</section>
<section>
<h2>GA Event Tracking API</h2>
<pre>
<code contenteditable>
// safely initialize _gaq; if GA loads after your code,
// any events already in the queue will be sent to the Goog.
var _gaq = _gaq || [];
...
_gaq.push([
'_trackEvent',
eventCategory,
eventAction,
optional_eventLabel,
optional_eventValue
]);
</code>
</pre>
</section>
<section>
<h2>Event Overview</h2>
<p>
To track an event of a given type, you need a <em>category</em> and an <em>action</em>. Optionally, you can add a <em>label</em> and, if you add the label, you may also add a <em>value</em>. Picking values for these things (and whether you use 2, 3, or 4 of them for any given event) is up to you.
</p>
</section>
</section>
<section>
<h2>Implementation Issues</h2>
<ul style="list-style-type: none;">
<li class="fragment">Q1. Where do we get the data for the GA API call?</li>
<li class="fragment">Q2. How do we send events when "the right things" happen in the UI?</li>
<li class="fragment">A1. HTML5 Data Attributes</li>
<li class="fragment">A2. jQuery (or similar)</li>
</ul>
<aside class="notes">
Our use cases were fairly straightforward; most of the events we want to track involve tabs, accordions, and the occasional hyperlink. We want these
actions to get logged somewhere.
</aside>
</section>
<section>
<section>
<h2>HTML5 Data Attributes</h2>
<h5>Actionable metadata!</h5>
<figure>
<blockquote cite="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#embedding-custom-non-visible-data-with-the-data-*-attributes">User agents must not derive any implementation behavior from these attributes or values. Specifications intended for user agents must not define these attributes to have any meaningful values.</blockquote>
<figcaption><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#embedding-custom-non-visible-data-with-the-data-*-attributes">WHATWG</a> (2013-02-05)</figcaption>
</figure>
</section>
<section>
<h2>Huh?</h2>
<p><code>data-*</code> attributes give you a place to put data for use by your scripts. Browsers shouldn't try to do anything with them, and you
probably shouldn't
use them to add visual styles.
</p>
<p>jQuery's data API is supported in all browsers jQuery supports.</p>
</section>
<section>
<h2>How to Use 'em</h2>
<p>
<code>data-*</code> attribute names must be lower case and may contain dashes as separators. The <code>data-</code> prefix is stripped and the rest is converted to camel case when you access them in your scripts.
</p>
<p>e.g. a <code>data-foo-bar</code> attribute in HTML is accessed under the name
<code>fooBar</code> in a script.
</p>
</section>
</section>
<section>
<section>
<h2>Putting it Together</h2>
<ol>
<li class="fragment">Nail down your event taxonomy</li>
<li class="fragment">Edit markup</li>
<li class="fragment">Add handlers for the events you want to track</li>
<li class="fragment">Sit back and wait for the <strike>money</strike> data to roll in</li>
</ol>
</section>
<section>
<h2>The Implementation</h2>
<h6>HTML</h6>
<pre>
<code>
<a href="#marc" data-ga-event="Record,Tab,MARC">Marc Record</a>
</code>
</pre>
<h6>jQuery API</h6>
<pre>
<code>
$("a[data-ga-event]").on("click", function(evt) {
// data-ga-event => "gaEvent"
var data = $(this).data("gaEvent").split(",");
data.unshift("_trackEvent");
// data == ['_trackEvent','Record','Tab','Marc']
_gaq.push(data);
});
</code>
</pre>
</section>
<section>
<h2>Really, That's It?</h2>
<p>Yes.</p>
<p class="fragment">
Ok, no. But that <em>is</em> the basic technique.
</p>
<p class="fragment">Later, I'll try to scare you.</p>
</section>
</section>
<section>
<section>
<h2>When it's Not Your Markup</h2>
<p>The declarative technique shown so
far works well if you are generating
the pages. What if you want more info
on how people are using an externally hosted service where you don't control the HTML, such as Summon?
</p>
</section>
<section>
<h2>Not Your Markup (cont.)</h2>
<ul>
<li>Find a way to inject your javascript (and, if needed, GA) onto the page.</li>
<li>Add tracking data to elements programmatically.</li>
</ul>
</section>
<section>
<h2>Inject JavaScript</h2>
<p>Matthew Reidsma's <a href="https://github.com/mreidsma/Summon-Stats">Summon Stats</a> (github project) showed us how to load external JavaScript onto our Summon pages.</p>
<p>For other services, if there's no direct support for it, try playing with the site customization features.
</p>
</section>
<section>
<h2>Differences</h2>
<ul>
<li>More selectors.</li>
<li>Selectors may need to use specific location in the DOM instead of <code>id</code> and <code>class</code> attributes.</li>
<li>Tracking data now needs to be computed instead of asserted.</li>
</ul>
</section>
<section>
<h2>Example</h2>
<pre>
<code>
// from our custom summon-analytics.js
$("#pageNavigation a[href^='/search']").click(
function(evt) {
var link = $(evt.target);
var lt = $.trim(link.text());
if ( lt == "Next" ) {
lt = "" + (thisPage +1);
} else if ( lt == "Prev" ) {
lt = "" + (thisPage -1);
}
logEvent("Paging", "Page", lt);
}
);
</code>
</pre>
</section>
</section> <!-- end Summon discussion -->
<section>
<h2>Explorations</h2>
<ul>
<li class="fragment">Testing and Debugging</li>
<li class="fragment">AJAX Content</li>
<li class="fragment">Selector Strategies</li>
<li class="fragment">Tracking Tweaks</li>
</ul>
</section>
<section>
<section>
<h2>Troublerebuking, Debugging, and Testing</h2>
<ul >
<li>Be proactive! Set up a safety net first</li>
<li>Make friends with your browser's dev tools/debugger.</li>
<li>use <code>ga_debug.js</code> while developing (*)</li>
</ul>
</section>
<section>
<h2>“Fire it up and see if it works?”</h2>
<p>
We found that it can take up to a day for an event to show up in the GA dashboard, so this is an
error-prone and time consuming testing strategy.
</p>
<p>Test everything you can see and control <em>before</em> you send it to the third party</p>
</section>
<section>
<h2>Working With a Net</h2>
<ol>
<li>Write testable code</li>
<li>Write tests</li>
<li class="fragment">Run the tests</li>
</ol>
<aside class="notes">
<pre><code>$("*[data-ga-event]").css("border", "5px solid red");</code></pre> in the JavaScript console.
</aside>
</section>
<section>
<h2>Why So Much Emphasis on Testing?</h2>
<p>Unlike with a lot of other front-end JavaScript development, this is not a visual feature. Automated tests
can keep you from just collecting some really boring anecdotes.
</p>
</section>
</section>
<section>
<section>
<h2>Tracking Events in AJAX Content</h2>
<p>We are tracking some events sent when users click on content that is loaded externally.</p>
<ul>
<li>You may not control the markup</li>
<li>The tracked elements are not in the DOM when the page is loaded, so you have to do a bit more work in your selectors</li>
</ul>
</section>
<section>
<h2>AJAX Content Tracking (cont.)</h2>
<p>jQuery lets you specify handlers for events for elements that don't exist yet, by (essentially) listening on an (existing) element that (will) contain them. This is not the only approach, but is the easiest to work with.
</p>
<pre>
<code contenteditable>
// our catalog loads transformed EAD XML via XHR when users click on the content tab
$("#contents").on("click", ".EAD_daolink", function(evt) {
logGAEvent($(this), ['URL','Digitized Content','CCC']);
});
</code>
</pre>
<aside class="notes">
An alternate approach is to chain an event handler that attaches the events after the content is loaded. This works, but it's more code and, "yo dawg" and all that.
</aside>
</section>
</section> <!-- end AJAX -->
<section>
<h2>On Selector Strategy (Your Markup)</h2>
<ul>
<li><code>*[data-ga-event]</code> matches all elements with tracking data, but is potentially very slow; the data we are collecting can be valuable,
but you don't want to frustrate your users trying to get it.</li>
<li>If you use a CSS class in concert with it (e.g. <code>.tracked[data-ga-event]</code>, it's both faster and you can temporarily disable
tracking for some elements should you need to, by simply removing the class.</li>
</ul>
</section>
<section>
<h2>Tracking Tweaks</h2>
<p>In usability studies, I noticed some people cycle through the tabs; so now we track each element once per page view. Whether you want to do this depends on your goals.
</p>
<p>What are patrons doing before they click your chat button? You could track different events for those kinds of cases if you maintain state locally.
</p>
<p class="fragment">
jQuery's Data API can be used to write data onto elements.
</p>
<p class="fragment">This can probably get a bit crazy though.</p>
</section>
<section>
<h2>Thanks for Listening!</h2>
</section>
<section>
<h2>Links</h2>
<ul>
<li>Official GA Docs
<ul>
<li><a href="https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiEventTracking">Event Tracking</a></li>
<li><a href="https://developers.google.com/analytics/resources/articles/gaTrackingTroubleshooting">Troubleshooting Guide</a></li>
</ul>
</li>
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#embedding-custom-non-visible-data-with-the-data-*-attributes">data-* attributes (WHATWG)</a></li>
<li><a href="http://api.jquery.com/data/">jQuery.data() API</a></li>
<li><a href="https://github.com/mreidsma/Summon-Stats">Summon Stats</a (github) by Matt Reidsma.></li>
</ul>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// #configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
overview: true,
theme: Reveal.getQueryHash().theme || 'beige', // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'fade', // default/cube/page/concave/zoom/linear/fade/none
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
// { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>