LIL-329. Add mixpanel events

apps/course/templates/course/course.html

@@ -14,7 +14,7 @@
 {% block ogdescription %}{{ course.short_description }}{% endblock ogdescription %}
 
 {% block content %}
-<div class="section section_border">
+<div class="section section_border course">
   <div class="section__center center center_sm">
     <div class="go">
       <a class="go__item" href="{% if next %}{{next}}{% else %}{% url 'courses' %}{% endif %}">
@@ -30,6 +30,7 @@
         class="go__btn btn{% if pending %} btn_gray{% endif %} btn_md"
         {% if user.is_authenticated %}
         {% if not pending %}
+        data-course-buy
         href="{% url 'course-checkout' course.id %}"
         {% endif %}
         {% else %}
@@ -394,6 +395,7 @@
         class="go__btn btn{% if pending %} btn_gray{% endif %} btn_md"
         {% if user.is_authenticated %}
         {% if not pending %}
+        data-course-buy
         href="{% url 'course-checkout' course.id %}"
         {% endif %}
         {% else %}

project/templates/lilcity/index.html

@@ -47,11 +47,12 @@
               viewportmeta.content = 'width=device-width, maximum-scale=1.6, initial-scale=1.0';
           }
       }
-
   </script>
   <script>
     LIL_SERVER_TIME = "{% now 'U' %}";
     LIL_SERVER_TIME_DIFF = Math.floor((new Date().getTime()) / 1000) - parseInt(LIL_SERVER_TIME);
+    USER_ID = "{{ request.user.id }}";
+    COURSE_ID = "{{ course.id }}";
   </script>
   {% block mixpanel %}
   <!-- start Mixpanel -->

web/src/js/app.js

@@ -13,5 +13,6 @@ import "./modules/courses";
 import "./modules/comments";
 import "./modules/password-show";
 import "./modules/profile";
+import "./modules/mixpanel";
 
 import "../sass/app.sass";

web/src/js/modules/mixpanel.js

@@ -0,0 +1,34 @@
+import $ from 'jquery';
+
+$(document).ready(function (e) {
+  mixpanel.identify(USER_ID);
+  let body = $('body'),
+    cource = $('.course');
+
+  if (cource.length) {
+    mixpanel.track(
+      'Open course',
+      { 'course_id': COURSE_ID }
+    );
+  };
+
+  body.on('click', '[data-popup]', function (e) {
+    let data = $(this).data('popup');
+    if (data === '.js-popup-buy') {
+      mixpanel.track(
+        'Open school buy popup'
+      );
+    }
+  });
+  body.on('click', '[data-course-buy]', function (e) {
+    e.preventDefault();
+    let href = $(this).attr('href');
+    let t = mixpanel.track(
+      'Click course buy button',
+      { 'course_id': COURSE_ID },
+      function () {
+        window.location = href;
+      }
+    );
+  });
+});