Menu

How to track additional events in Mixpanel using Event Hooks

Applicable plans Starter Essentials Business Advanced

Mixpanel is an advanced analytics platform for mobile and web. Instead of measuring page views, it helps you analyze the actions people take in an application. 


Integrating Mixpanel with your Thinkific site can help you to get more detailed information about what users are doing within your course (e.g. complete a course or lesson).


In this article, we’ll cover how to track additional events in Mixpanel using the Thinkific feature, Event Hooks.


Please note, you will need to be on our new Course Player to use this feature. Information on upgrading can be found here.

 

To provide some context, Event Hooks allows you to write your own custom javascript and use it to interact with our Course Player. You can use this to send data on student course navigation, and course and lesson completion, to Mixpanel and other analytics tools.


If you do not feel comfortable writing code, there is an alternative way to track events in Mixpanel using Autotrack. Instructions can be found here.


This code can be placed in your site's "Site Footer Code", which is under Advanced Settings > Site Footer Code in your Thinkific admin dashboard.




\We allow you to hook into 5 different events. All 5 events pass the same data:


var data = {        
   lesson: {} //object containing lesson attributes,
   chapter:  {} //object containing chapter attributes,
   course:  {} //object containing course attributes,
   enrollment:  {} //object containing enrollment attributes,
   user: {} //object containing student attributes
}


Below are the hooks currently available:

  1. hooks:contentDidChange - this is fired after a student has navigated to a new lesson.
  2. hooks:contentWillChange - this is fired just before a student navigates to a new lesson. You function will receive a second parameter call abortTransactionCallback. If you choose to, you can call this function with a boolean value. If you call it with true, the transition to the new lesson will be canceled. If you call it with false, the transition will continue. If you do not call it, the transition will continue.
  3. hooks:contentWasCompleted - this is fired when the student clicks the "Next" button and completes the lesson.
  4. hooks:contentWasMarkedIncomplete - this is fired when the student clicks the 'Mark Incomplete' button on a previously completed lesson.
  5. hooks:enrollmentWasCompleted - this is fired when the student completes the entire course and their enrollment percentage complete reaches 100%.


Below is an example of a script which would fire when a student clicks the "Next" button and completes the lesson:


HTML


<script>
    $(function() {
        if(typeof(CoursePlayerV2) !== 'undefined') {
            CoursePlayerV2.on('hooks:contentWasCompleted', function(data) {
                data["user"] = Thinkific.current_user;
                ThinkificAnalytics.track("Custom Content Completed", data);
            });
        }
    });
</script> 


Enter in the script you want then select 'Save Changes'.



Now, either wait for new students to join your courses or create a fake student account and cross-reference the data in your Mixpanel account, ensuring that Mixpanel is recording your student's data. 


Here's an example of the information that you should see within your Mixpanel: 


image


You can see here, the Event Hook sends information on "chapter" and "enrollment". This format can be customized in your code but by default, it does send "course_id" and "percentage_completed". 


And now you have your events set up!


If you have any questions, you are welcome to reach out to our Support team or the Mixpanel Support team

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.