feat: track user events in Countly (#282)

Author: terichadbourne

cypress/integration/tutorials.spec.js

@@ -14,8 +14,9 @@ function viewSolutionsAndSubmitAll ({ tutorialName, lessonCount, hasResources =
     cy.get(`[href="#/${tutorialName}/01"]`).click()
   })
   for (let i = 1; i <= lessonCount; i++) {
-    it(`should view the solution and pass test ${i}`, function () {
-      cy.url().should('include', `#/${tutorialName}/0${i}`)
+    let lessonNr = i.toString().padStart(2, 0)
+    it(`should view the solution and pass test ${lessonNr}`, function () {
+      cy.url().should('include', `#/${tutorialName}/${lessonNr}`)
       cy.get('[data-cy=code-editor-ready]').should('be.visible') // wait for editor to be updated
       cy.get('[data-cy=view-solution]').click()
       cy.get('[data-cy=solution-editor-ready]').should('be.visible') // wait for editor to be updated

public/index.html

@@ -60,19 +60,26 @@
       const COUNTLY_URL = 'https://countly.proto.school';
 
       (function(){
-        if (!_dntEnabled()) {
+        if (!window.Cypress && !_dntEnabled()) {
           // Provide countly initialization parameters
           Countly.app_key = location.hostname === 'proto.school' ? COUNTLY_KEY_PROTOSCHOOL : COUNTLY_KEY_PROTOSCHOOL_TEST;
           Countly.url = COUNTLY_URL;
           // Choose what to track
           Countly.q.push(['track_sessions']);
           Countly.q.push(['track_pageview']);
           Countly.q.push(['track_clicks']);
+          Countly.q.push(['track_scrolls']);
+          Countly.q.push(['track_links']);
           // Load countly script asynchronously
           var cly = document.createElement('script'); cly.type = 'text/javascript';
           cly.async = true;
           cly.src = 'https://countly.proto.school/sdk/web/countly.min.js';
-          cly.onload = function(){Countly.init()};
+          cly.onload = function(){
+            Countly.init()
+            Countly.getViewUrl = function () {
+              return location.pathname + location.search + location.hash;
+            }
+          };
           var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(cly, s);
         }
       })();

src/components/Lesson.vue

@@ -109,6 +109,7 @@ import Info from './Info.vue'
 import Validator from './Validator.vue'
 import CID from 'cids'
 import marked from 'marked'
+import { EVENTS } from '../static/countly'
 
 const hljs = require('highlight.js/lib/highlight.js')
 hljs.registerLanguage('js', require('highlight.js/lib/languages/javascript'))
@@ -204,6 +205,7 @@ export default {
       parsedConcepts: marked(self.$attrs.concepts || ''),
       cacheKey: 'cached' + self.$route.path,
       cachedStateMsg: '',
+      tutorialPath: self.$route.path.split('/')[1],
       lessonKey: 'passed' + self.$route.path,
       lessonPassed: !!localStorage['passed' + self.$route.path],
       lessonTitle: self.$attrs.lessonTitle,
@@ -300,6 +302,9 @@ export default {
         this.lessonPassed = !!localStorage[this.lessonKey]
         this.isSubmitting = false
         this.clearPassed()
+        if (auto !== true) {
+          this.trackEvent(EVENTS.CODE_SUBMIT_WRONG)
+        }
         return
       }
       // Hide the solution
@@ -315,10 +320,17 @@ export default {
       }
       if (output.test.success) {
         localStorage[this.lessonKey] = 'passed'
+        if (auto !== true) {
+          // track lesson passed if it has an exercise (incl file ones)
+          this.trackEvent(EVENTS.LESSON_PASSED)
+          this.isTutorialPassed()
+        }
       } else {
         this.clearPassed()
+        if (auto !== true) {
+          this.trackEvent(EVENTS.CODE_SUBMIT_WRONG)
+        }
       }
-
       this.lessonPassed = !!localStorage[this.lessonKey]
       this.isSubmitting = false
     },
@@ -350,6 +362,7 @@ export default {
       this.clearPassed()
       delete this.output.test
       this.showUploadInfo = false
+      this.trackEvent(EVENTS.CODE_RESET)
     },
     resetFileUpload: function () {
       this.uploadedFiles = false
@@ -359,11 +372,35 @@ export default {
     clearPassed: function () {
       delete localStorage[this.lessonKey]
       this.lessonPassed = !!localStorage[this.lessonKey]
+      delete localStorage[`passed/${this.tutorialPath}`]
     },
     loadCodeFromCache: function () {
       this.code = localStorage[this.cacheKey]
       this.editor.setValue(this.code)
     },
+    isTutorialPassed: function () {
+      for (let i = 1; i <= this.lessonsInTutorial; i++) {
+        let lessonNr = i.toString().padStart(2, 0)
+        const lsKey = `passed/${this.tutorialPath}/${lessonNr}`
+        if (localStorage[lsKey] !== 'passed') {
+          return false
+        }
+      }
+      localStorage[`passed/${this.tutorialPath}`] = 'passed'
+      this.trackEvent(EVENTS.TUTORIAL_PASSED)
+      return true
+    },
+    trackEvent: function (event, opts = {}) {
+      window.Countly.q.push(['add_event', {
+        'key': event,
+        'segmentation': {
+          'tutorial': this.tutorialShortname,
+          'lessonNumber': this.lessonNumber,
+          'path': this.$route.path,
+          ...opts
+        }
+      }])
+    },
     onMounted: function (editor) {
       // runs on page load, NOT on every keystroke in editor
       this.editor = editor
@@ -405,8 +442,16 @@ export default {
       if (this.output.test.success) {
         localStorage[this.lessonKey] = 'passed'
         this.lessonPassed = !!localStorage[this.lessonKey]
+        if (result.auto !== true) {
+          // track multiple choice lesson passed if not on page load
+          this.trackEvent(EVENTS.LESSON_PASSED)
+          this.isTutorialPassed()
+        }
       } else {
         this.clearPassed()
+        if (result.auto !== true) {
+          this.trackEvent(EVENTS.CHOICE_SUBMIT_WRONG, { wrongChoice: result.selected })
+        }
       }
     },
     next: function () {
@@ -415,6 +460,11 @@ export default {
       } else {
         localStorage[this.lessonKey] = 'passed'
         this.lessonPassed = !!localStorage[this.lessonKey]
+        // track passed lesson if text only
+        if (!this.isMultipleChoiceLesson) {
+          this.trackEvent(EVENTS.LESSON_PASSED)
+          this.isTutorialPassed()
+        }
       }
       let current = this.lessonNumber
 

src/components/Quiz.vue

@@ -19,7 +19,7 @@ export default {
     }
   },
   mounted: function () {
-    this.handleRadioClick()
+    this.handleRadioClick(true)
   },
   computed: {
     correctChoice: function () {
@@ -36,13 +36,13 @@ export default {
     }
   },
   methods: {
-    handleRadioClick () {
+    handleRadioClick (auto = false) {
       let result = null
       if (this.selected !== '') {
         if (parseInt(this.selected) === this.correctChoice) {
-          result = { success: this.choices[this.selected].feedback, selected: this.selected }
+          result = { success: this.choices[this.selected].feedback, selected: this.selected, auto: auto }
         } else {
-          result = { fail: this.choices[this.selected].feedback, selected: this.selected }
+          result = { fail: this.choices[this.selected].feedback, selected: this.selected, auto: auto }
         }
         this.$emit('handleChoice', result)
       }

src/components/Tutorial.vue

@@ -16,6 +16,7 @@
           <template v-else>
             {{tutorial.title}}
           </template>
+          <span v-if="isTutorialPassed" class="ml1">🏆</span>
         </h2>
         <p class="f5 fw5 ma0 pt2 lh-copy charcoal-muted">{{tutorial.description}}</p>
         <ul class="mv4 pa0 f5" style="list-style-type: none; background: rgba(11, 58, 82, 5%)">
@@ -45,10 +46,11 @@ export default {
   components: {
     LessonLink
   },
-  data: () => {
+  data: self => {
     return {
       ipfsLogo: ipfsLogo,
-      libp2pLogo: libp2pLogo
+      libp2pLogo: libp2pLogo,
+      isTutorialPassed: !!localStorage[`passed/${self.tutorial.lessons[0].to.split('/')[1]}`]
     }
   },
   computed: {

src/main.js

@@ -108,7 +108,7 @@ const router = new VueRouter({
 // track page view via Countly when route changes
 router.afterEach((to) => {
   if (!window.Countly) return
-  window.Countly.q.push(['track_pageview', to.path])
+  window.Countly.q.push(['track_pageview', '/#' + to.path])
 })
 
 Vue.config.productionTip = false

src/static/countly.js

@@ -0,0 +1,7 @@
+export const EVENTS = {
+  CODE_RESET: 'resetCode',
+  CODE_SUBMIT_WRONG: 'submitWrongCode',
+  CHOICE_SUBMIT_WRONG: 'submitWrongChoice',
+  LESSON_PASSED: 'lessonPassed',
+  TUTORIAL_PASSED: 'tutorialPassed'
+}