+1-310-929-7392 info@springsoa.com
  1. What we need:

    • Get Salesforce instance where you want to do this integration.
    • Get Mixpanel account where you want to store all the analytics data.
    • Get the Mixpanel tracking code to start logging the events.
    • Validate the integration.

     

    Salesforce Instance:

    1.  

      For this if we don’t have anything we can goto(https://developer.salesforce.com/signup) and sign up for a free developer instance, which is enough for this integration.
    2.  

      Decide in which interfaces(Lightning Experience and/or Salesforce Classic) you want to do this integration.

     

    Mixpanel account:

    1.  

      Goto(https://mixpanel.com/) and Sign Up for new one or login to existing one if you have one.
    2.  

      Click create new project button under default selected project on the top left corner.

     

    1.  

      Enter project name and hit Create, Mixpanel will redirect you to the newly created project automatically.

     

    Mixpanel tracking code:

    1.  

      To get the Mixpanel tracking code open the project you want to use for this integration, you can open the project from the top left corner.
    1.  

      Copy the JavaScript code from the first highlighted block.
    1.  

      Salesforce Classic:
      So either we can directly paste this code in the Visualforce page or we can put in a static resource and include in the Visualforce page(line no. 8).
    2.  

      And we can log the events using the mixpanel.track(‘Event description here.’); (line no. 8).
    1
    2
    3
    4
    5
    6
    7
    8
    9
    mixpanel.page<apex:page id=mixpanel showHeader=false controller=XXXCtlr title=XXX><apex:includeScript value={!URLFOR($Resource.mixpanel, mixpanel.js)} /><!– more markup –>
    <script> mixpanel.track(‘Someone visited this visualforce page.’); </script>
    </apex:page>

     

    1.  

      Lightning Experience:
      Create a static resource with the Mixpanel code and include in the lightning component using ltng:require(line no. 3&4) and put the logging code in the mixpanelController/Helper.js.
    2.  

      Add the mxpnl.com to the Remote Site settings.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    mixpanel.cmp
    <aura:component >
    <ltng:require
    styles="{!$Resource.mixpanel + '/mixpanel.js'}" />
    <!– more markup –></aura:component>mixpanelController.js
    ({
    /* other methods */
    track: function(component, event, helper){
    mixpanel.track(‘Someone visited the lightning component controller.’);
    }
    })mixpanelHelper.js
    ({
    /* other methods */
    track: function(component, event, helper){
    mixpanel.track(‘Someone visited the lightning component helper.’);
    }
    })

     

    Validate:

    1.  

      After the installation when you go the project screen again, you will see the data there, instead of the Install Mixpanel button.