diff --git a/apps/course/templates/course/course.html b/apps/course/templates/course/course.html
index 4426225e..0a3c2ce4 100644
--- a/apps/course/templates/course/course.html
+++ b/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 %}
diff --git a/project/templates/lilcity/index.html b/project/templates/lilcity/index.html
index 440b460d..9a69a42d 100644
--- a/project/templates/lilcity/index.html
+++ b/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 -->
diff --git a/web/src/js/app.js b/web/src/js/app.js
index 81888f5c..9d0023d9 100644
--- a/web/src/js/app.js
+++ b/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";
diff --git a/web/src/js/modules/mixpanel.js b/web/src/js/modules/mixpanel.js
new file mode 100644
index 00000000..d6c0626f
--- /dev/null
+++ b/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;
+      }
+    );
+  });
+});