Using Mixpanel with Inline Manual enables you to see how users are interacting with your Topics. You can track what Topics are launched and the Steps that have been seen.


Prerequisites

  1. A Mixpanel account
  2. An Inline Manual Site
  3. Beta player
  4. A Topic with content


Instructions


1) Activate the Beta player


In your Inline Manual account, go to Sites > Settings > Player version. Check the box next to "Beta version" to enable it. To save the changes, click the "Save" button.



2) Activate Mixpanel in Inline Manual


In your Inline Manual account, navigate to Sites > Settings > Player integrations > Mixpanel. For Mixpanel, check the "Enabled" box. Check the boxes for "Topic Start," "Topic End," "Nps Scale," "Feedback Scale," "Step Show", "Topic Done", "Nps Comment", and "Feedback Comment". When finished, click the "Save" button at the bottom of the page.



3) Create a Mixpanel project

You can go to step 8 if you already have Mixpanel implemented within your product.



You must first create a new project in your Mixpanel account. Click the "Create project" button to begin.



4) Enter project information


Enter the project name (such as "Staging"), the location where you want to keep your data, and the time zone. Then select the "Create" option.



5) Implement Mixpanel


Click the "Implement Mixpanel" button in the Mixpanel dashboard to access the installation page.



6) Choose installation method


Copy the API Token and save it somewhere for later use, then select the "JavaScript" option.



7) Copy the JavaScript code


Copy the JavaScript implementation code from "Installation Option 2: HTML" and paste it into your application's "<head>" section.



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World!</title>

    <!-- Mixpanel implementation -->
    <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('13a0ffcafcc902cd32abf49517ddc074', {debug: true}); 
        mixpanel.track('Sign up');
</script>

</head>

<body>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque pariatur recusandae tenetur quis veritatis id,
        repellat dicta vero ratione! Sequi fugiat molestias illum commodi aut fuga ducimus, error velit et.</p>
</body>

</html>


Make sure to save your changes.


8) Test the player events


Visit your app, launch a Topic and play it all the way through. Then, go to your Mixpanel account and select "Events" from the top menu to see the Inline Manual player events.


Please keep in mind that the data may take a few moments to appear in the "Events" dashboard.



You can expand on any Mixpanel event to see more information about it. Inline Manual player events such as "eventAction", "topicId", "eventCategory", "eventLabel", "stepTitle" and "stepIndex" will be visible.



To simplify the information, click on "Your properties" in the same event.



Outcome
Now you should be able to see the Inline Manual events in your Mixpanel account.