Skip to content

Commit 96e1603

Browse files
wimpyprogrammerwimpyprogrammer
committed
Merge branch 'feature/analytics' into develop
2 parents 5b5dced + 507183d commit 96e1603

File tree

2 files changed

+79
-22
lines changed

2 files changed

+79
-22
lines changed

‎js/main.js‎

Lines changed: 65 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,43 @@ define(function(require, exports, module) {
1111
Submission = require('submission'),
1212
Tutorial = require('tutorial');
1313

14+
function trackEvent(category, action, label, value, _isInteractive) {
15+
var dataLayer = window.dataLayer || [],
16+
isInteractive = (_isInteractive === undefined) ? true : _isInteractive;
17+
dataLayer.push({
18+
'event': 'event',
19+
'eventCategory': 'Conditional - ' + category,
20+
'eventAction': action,
21+
'eventLabel': label,
22+
'eventValue': value,
23+
'isNonInteractive': !Boolean(isInteractive)
24+
});
25+
}
26+
27+
function trackEventTutorialStart(stepNum) {
28+
trackEvent('Tutorial', 'Start', 'Step ' + stepNum);
29+
}
30+
31+
function trackEventTutorialEnd(stepNum) {
32+
trackEvent('Tutorial', 'End', 'Step ' + stepNum);
33+
}
34+
35+
function trackEventTutorialNext(prevStep, nextStep) {
36+
trackEvent('Tutorial', 'Next', 'Step ' + prevStep + ' to ' + nextStep);
37+
}
38+
39+
function trackEventTutorialPrev(prevStep, nextStep) {
40+
trackEvent('Tutorial', 'Prev', 'Step ' + prevStep + ' to ' + nextStep);
41+
}
42+
43+
function trackEventInputMixedOperators() {
44+
trackEvent('Parse', 'Mixed Operators');
45+
}
46+
47+
function trackEventInputParse() {
48+
trackEvent('Parse', 'Success');
49+
}
50+
1451
function calculateColumnClasses(/*Expression*/ expression, newDepth) {
1552
var columnClasses = [],
1653
depth = newDepth || 0,
@@ -98,7 +135,8 @@ define(function(require, exports, module) {
98135
$introText = $('.js-intro-text'),
99136
$alertMixedOperators = $('.js-alert-mixed-operators'),
100137
$truthTable = $('.js-truth-table'),
101-
$startTutorial = $('.js-tutorial-start');
138+
$startTutorial = $('.js-tutorial-start'),
139+
lastTutorialStepNum = null;
102140

103141
$input.change(function() {
104142
var input = $input.val(),
@@ -119,6 +157,7 @@ define(function(require, exports, module) {
119157
if(expression.hasMixedOperatorsDeep()) {
120158
$inputForm.addClass('has-error');
121159
$alertMixedOperators.removeClass('hidden');
160+
trackEventInputMixedOperators();
122161
} else {
123162

124163
$truthTable.removeClass('hidden');
@@ -129,28 +168,46 @@ define(function(require, exports, module) {
129168
printCells(expression, columnClasses)
130169
);
131170

171+
trackEventInputParse();
172+
132173
}
133174

134175
}
135176
});
136177

137178
$startTutorial.click(function() {
138-
var hasStarted = false,
179+
var thisStepNum = function(tour) { return tour.getCurrentStep() + 1; },
139180
userInput;
140181

141182
var tutorial = new Tutorial.Tutorial({
183+
debug: true,
184+
//template: tutorialTemplate,
142185
onShow: function() {
143-
// onStart does not fire if the user has previously seen the tutorial
144-
if(!hasStarted) {
145-
hasStarted = true;
186+
// onStart does not fire if the user has previously seen the tutorial,
187+
// so detect the start using onShow
188+
if(lastTutorialStepNum === null) {
146189
userInput = $input.val();
147190
$input.val('').change();
148191
}
149-
$input.change();
150192
},
151-
onEnd: function() {
152-
hasStarted = false;
193+
onShown: function(tour) {
194+
// the step number is only accurate in onShown, not onShow
195+
if(lastTutorialStepNum === null) {
196+
trackEventTutorialStart(thisStepNum(tour));
197+
} else {
198+
if(lastTutorialStepNum < thisStepNum(tour)) {
199+
trackEventTutorialNext(lastTutorialStepNum, thisStepNum(tour));
200+
} else {
201+
trackEventTutorialPrev(lastTutorialStepNum, thisStepNum(tour));
202+
}
203+
}
204+
205+
lastTutorialStepNum = thisStepNum(tour);
206+
},
207+
onEnd: function(tour) {
208+
lastTutorialStepNum = null;
153209
$input.val(userInput).change();
210+
trackEventTutorialEnd(thisStepNum(tour));
154211
}
155212
});
156213

‎js/tutorial.js‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -21,62 +21,62 @@ define(function(require, exports, module) {
2121
orphan: true,
2222
content: 'Welcome to the Conditional Expression Parser.<br><br>Use your keyboard or the buttons below to navigate this brief tutorial.'
2323
},{
24-
onShow: function() {
25-
if(_options.onShow) { _options.onShow(); }
24+
onShow: function(tour) {
25+
if(_options.onShow) { _options.onShow(tour); }
2626
resetInput();
2727
},
2828
element: '.js-tutorial-input',
2929
placement: 'bottom',
3030
title: 'The Input Box',
3131
content: 'This textbox is where you\'ll enter the conditional expression you want to analyze.'
3232
},{
33-
onShow: function() {
34-
if(_options.onShow) { _options.onShow(); }
33+
onShow: function(tour) {
34+
if(_options.onShow) { _options.onShow(tour); }
3535
resetInput().val(example1);
3636
},
3737
element: '.js-tutorial-input',
3838
placement: 'bottom',
3939
title: 'A Simple Input',
4040
content: 'Let\'s begin with a simple example: two conditions, A and B, separated by an OR operator.<br><br>Notice that some syntax like the "if" statement and the opening bracket are included. They are unnecessary and will be ignored.'
4141
},{
42-
onShow: function() {
43-
if(_options.onShow) { _options.onShow(); }
42+
onShow: function(tour) {
43+
if(_options.onShow) { _options.onShow(tour); }
4444
resetInput().val(example1).change();
4545
},
4646
element: '.js-truth-table',
4747
placement: 'bottom',
4848
title: 'A Simple Output',
4949
content: 'The parser will generate a "truth table" showing all of the code paths in which the expression will evaluate to TRUE. Our simple example has simple results.'
5050
},{
51-
onShow: function() {
52-
if(_options.onShow) { _options.onShow(); }
51+
onShow: function(tour) {
52+
if(_options.onShow) { _options.onShow(tour); }
5353
resetInput().val(example2);
5454
},
5555
element: '.js-tutorial-input',
5656
placement: 'bottom',
5757
title: 'A Complex Input',
5858
content: 'If your conditional expressions were so simple, you wouldn\'t need this tool!<br><br>Let\'s try something harder with sub-expressions, function calls, strings, and varied operators.'
5959
},{
60-
onShow: function() {
61-
if(_options.onShow) { _options.onShow(); }
60+
onShow: function(tour) {
61+
if(_options.onShow) { _options.onShow(tour); }
6262
resetInput().val(example2).change();
6363
},
6464
element: '.js-truth-table',
6565
placement: 'bottom',
6666
title: 'A Complex Output',
6767
content: 'Now our truth table is much larger. The different colored columns are used to group conditions within the same expression depth.<br><br>Notice that function parameters and strings are grouped into a single expression even if they look like conditional expressions.'
6868
},{
69-
onShow: function() {
70-
if(_options.onShow) { _options.onShow(); }
69+
onShow: function(tour) {
70+
if(_options.onShow) { _options.onShow(tour); }
7171
resetInput().val(example3);
7272
},
7373
element: '.js-tutorial-input',
7474
placement: 'bottom',
7575
title: 'The XOR Operator',
7676
content: 'Lastly we\'ll look at the XOR operator. Unlike the OR operator, the XOR operator requires that one or more conditions is FALSE for the overall expression to be TRUE.'
7777
},{
78-
onShow: function() {
79-
if(_options.onShow) { _options.onShow(); }
78+
onShow: function(tour) {
79+
if(_options.onShow) { _options.onShow(tour); }
8080
resetInput().val(example3).change();
8181
},
8282
element: '.js-truth-table',

0 commit comments

Comments
 (0)