📈 Améliorer le tracking

source/actions.js

@@ -2,8 +2,8 @@
 // The state keeps track of which of them have been submitted
 // The user can also come back to one of his answers and edit it
 export const STEP_ACTION = 'STEP_ACTION'
-export function stepAction(name, step) {
-	return { type: STEP_ACTION, name, step }
+export function stepAction(name, step, source) {
+	return { type: STEP_ACTION, name, step, source }
 }
 
 export const START_CONVERSATION = 'START_CONVERSATION'

source/components/conversation/FormDecorator.js

@@ -25,7 +25,7 @@ export var FormDecorator = formType => RenderField =>
 				formValueSelector('conversation')(state, 'inversions.' + dottedName)
 		}),
 		dispatch => ({
-			stepAction: (name, step) => dispatch(stepAction(name, step)),
+			stepAction: (name, step, source) => dispatch(stepAction(name, step, source)),
 			setFormValue: (field, value) =>
 				dispatch(change('conversation', field, value))
 		})
@@ -76,7 +76,7 @@ export var FormDecorator = formType => RenderField =>
 			des balises html, <input> dans notre cas.
 			*/
 			//TODO hack, enables redux-form/CHANGE to update the form state before the traverse functions are run
-			let submit = () => setTimeout(() => stepAction('fold', fieldName), 1),
+			let submit = (cause) => setTimeout(() => stepAction('fold', fieldName, cause), 1),
 				stepProps = {
 					...this.props.step,
 					inverted,
@@ -121,7 +121,7 @@ export var FormDecorator = formType => RenderField =>
 							<IgnoreStepButton
 								action={() => {
 									setFormValue(fieldName, '' + defaultValue)
-									submit()
+									submit('ignore')
 								}}
 							/>
 						)}
@@ -159,7 +159,7 @@ export var FormDecorator = formType => RenderField =>
 					</span>
 					<button
 						className="edit"
-						onClick={() => stepAction('unfold', dottedName)}
+						onClick={() => stepAction('unfold', dottedName, 'unfold')}
 						style={{ color: themeColours.textColourOnWhite }}
 					>
 						<i className="fa fa-pencil" aria-hidden="true" />

source/components/conversation/Input.js

@@ -114,7 +114,7 @@ export default class Input extends Component {
 								setFormValue('' + value)
 								if (this.state.suggestion !== value)
 									this.setState({ suggestion: value })
-								else this.props.stepProps.submit()
+								else this.props.stepProps.submit('suggestion')
 							}}
 							onMouseOver={() => {
 								this.setState({ lastValue: this.props.input.value })

source/components/conversation/Question.js

@@ -139,7 +139,7 @@ class RadioLabelContent extends Component {
 	click = value => () => {
 		this.props.setFormValue(value)
 		if (this.state.active !== value) this.setState({ active: value })
-		else this.props.submit()
+		else this.props.submit('dblClick')
 	}
 	render() {
 		let { value, label, input, hover, themeColours } = this.props,

source/components/conversation/SendButton.js

@@ -5,7 +5,7 @@ import HoverDecorator from 'Components/HoverDecorator'
 export default class SendButton extends Component {
 	getAction() {
 		let { disabled, submit } = this.props
-		return () => (!disabled ? submit() : null)
+		return (cause) => (!disabled ? submit(cause) : null)
 	}
 	componentDidMount() {
 		// removeEventListener will need the exact same function instance
@@ -18,7 +18,7 @@ export default class SendButton extends Component {
 	}
 	handleKeyDown({ key }) {
 		if (key !== 'Enter') return
-		this.getAction()()
+		this.getAction()('enter')
 	}
 	render() {
 		let { disabled, themeColours, hover } = this.props
@@ -31,7 +31,7 @@ export default class SendButton extends Component {
 						color: themeColours.textColour,
 						background: themeColours.colour
 					}}
-					onClick={this.getAction()}
+					onClick={(event) => this.getAction()('accept')}
 				>
 					<span className="text">valider</span>
 					<i className="fa fa-check" aria-hidden="true" />

source/reducers.js

@@ -1,4 +1,4 @@
-import { head, isEmpty, pathOr, reject, contains, without, concat } from 'ramda'
+import { head, isEmpty, pathOr, reject, contains, without, concat, length } from 'ramda'
 import { combineReducers } from 'redux'
 import reduceReducers from 'reduce-reducers'
 import { reducer as formReducer, formValueSelector } from 'redux-form'
@@ -116,10 +116,18 @@ export let reduceSteps = (tracker, flatRules, answerSource) => (
 	if (action.type == STEP_ACTION && action.name == 'fold') {
 		tracker.push([
 			'trackEvent',
-			'answer',
+			'answer:'+action.source,
 			action.step + ': ' + situationWithDefaults(state)(action.step)
 		])
 
+		if (!newState.currentQuestion) {
+			tracker.push([
+				'trackEvent',
+				'done',
+				'after'+length(newState.foldedSteps)+'questions'
+			])
+		}
+
 		return {
 			...newState,
 			foldedSteps: [...state.foldedSteps, state.currentQuestion]