Track Additional Events in Mixpanel Using Event Hooks

Mixpanel is an advanced analytics platform for mobile and web. In this article, we’ll cover how to track additional events in Mixpanel using the Thinkific Event Hooks feature.

About Mixpanel

Installing Mixpanel on 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). Instead of measuring page views, Mixpanel helps you analyze the actions people take in an application.

Event Hooks

This article will 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.

This code can be placed in your site's Site Footer Code. You can access this as follows:

1. Go to Settings
2. Select Code & analytics
3. Scroll down to Site footer code

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:

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!

Important Considerations

• Mixpanel used to support an alternative way to track events using Autotrack. Mixpanel has retired Autotrack as of January 11th, 2021

If you have any questions, please don't hesitate to reach out to our Support team or the Mixpanel Support team.