Sending Data to MixPanel

  • Updated

You can send training data from Skilljar such as Student sign-ups, Course Enrollments, and Completions directly to MixPanel.

Skilljar sends data to MixPanel via our Javascript-based events engine (available in the Theming section of your Skilljar dashboard). Once configured, Skilljar will call MixPanel’s Analytics Javascript tracking software development kit (SDK) to track Student sign-ups and associated training events in real time. You can do this without any developer involvement by following the below guide.

  • Note: You will need an active MixPanel account and MixPanel API key to use this integration. Skilljar doesn't maintain MixPanel. For specific MixPanel product support, please visit their help center

What is MixPanel?

MixPanel is a third-party analytics platform that allows you to track activity data from events within your Skilljar training platform and forward them along to downstream systems. You can use MixPanel to extract insights and analyze user behavior to improve the user experience of your training program. 

You can learn more about MixPanel and receive specific product support for their platform via their website.

Installing MixPanel Javascript & Tracking Anonymous Users

To install MixPanel analytics javascript, you’ll first need to generate the javascript code via your MixPanel platform. After you have that, follow these steps:

  1. From your Skilljar dashboard, expand the Theming header on the left and select Themes. Alternatively, select Theming from your dashboard home page. 
  2. Select the theme that you’re using for the domain to open the settings. 
  3. Scroll down and expand the Code snippets header.
  4. Scroll down to the Analytics Tracking Code Snippet box and add the MixPanel analytics javascript code snippet to load their tracking library (see below). The code within the Analytics Tracking Code Snippet loads on every page.
    • IMPORTANT: Before adding the snippet below, you’ll need to replace YOUR_API_KEY with your MixPanel API key.
  5. When you’re finished, select Save to apply the changes.

Example MixPanel Analytics Javascript - Add to Analytics Tracking Code Snippet:

<!-- START Load MixPanel Tracking -->

<script type="text/javascript">

(function(f,b){if(!b.__SV){var e,g,i,h;window.mixpanel=b;b._i=[];b.init=function(e,f,c){function g(a,d){var b=d.split(".");2==b.length&&(a=a[b[0]],d=b[1]);a[d]=function(){a.push([d].concat(Array.prototype.slice.call(arguments,0)))}}var a=b;"undefined"!==typeof c?a=b[c]=[]:c="mixpanel";a.people=a.people||[];a.toString=function(a){var d="mixpanel";"mixpanel"!==c&&(d+="."+c);a||(d+=" (stub)");return d};a.people.toString=function(){return a.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" ");
for(h=0;h<i.length;h++)g(a,i[h]);var j="set set_once union unset remove delete".split(" ");a.get_group=function(){function b(c){d[c]=function(){call2_args=arguments;call2=[c].concat(Array.prototype.slice.call(call2_args,0));a.push([e,call2])}}for(var d={},e=["get_group"].concat(Array.prototype.slice.call(arguments,0)),c=0;c<j.length;c++)b(j[c]);return d};b._i.push([e,f,c])};b.__SV=1.2;e=f.createElement("script");e.type="text/javascript";e.async=!0;e.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?

MIXPANEL_CUSTOM_LIB_URL:"file:"===f.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";g=f.getElementsByTagName("script")[0];g.parentNode.insertBefore(e,g)}})(document,window.mixpanel||[]);

// Enabling the debug mode flag is useful during implementation,
// but it's recommended you remove it for production
mixpanel.init('YOUR_API_KEY'); 

</script>

<!-- END Load MixPanel Tracking -->

Tracking Student Events

Student Sign Up - Add to Conversion Code Snippet

In your Skilljar dashboard, go to your Theme, scroll down and expand the Code Snippet header. Add this code to the Global Code Snippet:

<!-- START MixPanel Track User -->
<script>
$('document').ready(function(){
if(typeof skilljarUser !== 'undefined'){
mixpanel.identify(skilljarUser.id);
mixpanel.people.set({ "$email": skilljarUser.email, "name": skilljarUser.name});
}
});
</script>
<!-- END MixPanel Track User -->

Course Enrollments - Add to Conversion Code Snippet

In your Skilljar dashboard, go to your Theme, scroll down and expand the Code Snippet header. Add this code to the Conversion Code Snippet:

<!-- START MixPanel Course Enrollment Tracking -->
<script>
mixpanel.track('Course Enrollment', {
 'courseName': skilljarCourse.title,
 "publishedCourseId": skilljarCourse.publishedCourseId,
 "courseId": skilljarCourse.id
});
</script>
<!-- END MixPanel Course Enrollment Tracking -->

Course Completion - Add to Course Completion Code Snippet

In your Skilljar dashboard, go to your Theme, scroll down and expand the Code Snippet header. Add this code to the Course Completion Code Snippet:

<!-- START MixPanel Course Completion Tracking -->
<script>
mixpanel.track('Course Completion', {
 'courseName': skilljarCourse.title,
 "publishedCourseId": skilljarCourse.publishedCourseId,
 "courseId": skilljarCourse.id
});
</script>
<!-- END MixPanel Course Completion Tracking -->

Viewing Custom Event Data in MixPanel

Now that the MixPanel event tags have been installed in Skilljar, it’s time to confirm they are being received in MixPanel. Generate some test data by signing up as a new student on your Skilljar domain, enrolling in a course, and then completing the course to make sure everything has worked.

Next, in MixPanel go to the Users tab. Here you will see a stream of site visitors being sent to MixPanel by Skilljar if everything was set up correctly:

image__3_.png

Note: If you don't see any data in this table, you may need to wait a few minutes for MixPanel to update or carefully check each configuration step above for errors.

Was this article helpful?

0 out of 0 found this helpful