+1-310-929-7392 info@springsoa.com

What we need:

  1. Salesforce instance where we will do the implementation.
  2. Mixpanel account where we will store all the analytics data.
  3. Tracking code to start logging the events into Mixpanel.
  4. Validate the integration.

 

Salesforce Instance:

For this if we don’t have any Salesforce org we can goto(https://developer.salesforce.com/signup). Sign up for a free developer instance.
Decide in which interfaces(Lightning Experience and/or Salesforce Classic) we want to do the installation.

Mixpanel account:

  1. Goto(https://mixpanel.com/) and Sign Up for new one or login to existing one if we have one.
  2. Click create new project button under default selected project on the top left corner.
Create new project Mixpanel

Create new project Mixpanel

  1. Enter project name and hit Create. Mixpanel will redirect us to the newly created project automatically.
Enter project name to create new project Mixpanel.

Enter project name to create new project Mixpanel.

 

Mixpanel tracking code:

  1. To get the Mixpanel tracking code open the project you want to use. We can open the project from the top left corner.
Get Mixpanel tracking code

Get Mixpanel tracking code

  1. Copy the JavaScript code from the first highlighted block.
Get installation code Mixpanel

Get installation code Mixpanel

 

  1. Salesforce Classic:
  1. 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. 6).
  2. We can log the events using the mixpanel.track(‘Event description here.’); (line no. 6).
mixpanel.page

1 <apex:page id="mixpanel" showHeader="false" controller="XXXCtlr" title="XXX">
2 
3  <apex:includeScript value="{!URLFOR($Resource.mixpanel, 'mixpanel.js')}" />
4   
5   <!-- more markup -->
6   <script> mixpanel.track('Someone visited this visualforce page.'); </script>
7 </apex:page>

 

  1. Lightning Experience:
  1. Create a static resource with the Mixpanel code and include in the lightning component using ltng:require(line no. 3&4). Now add  the logging code in the mixpanelController/Helper.js.
  2. Add the mxpnl.com to the Remote Site settings.
mixpanel.cmp
1 <aura:component >
2   <ltng:require 
3     styles="{!$Resource.mixpanel + '/mixpanel.js'}" />
4     
5   <!-- more markup -->
6   
7 </aura:component>

mixpanelController.js
1 ({
2   /* other methods */
3   track: function(component, event, helper){
4     mixpanel.track('Someone visited the lightning component controller.');
5   }
6 })

mixpanelHelper.js
1 ({
2   /* other methods */
3   track: function(component, event, helper){
4     mixpanel.track('Someone visited the lightning component helper.');
5   }
6 })

Validate:

After the installation when you go the project screen again. We must see the data there, instead of the Install Mixpanel button. If you still getting the Install Mixpanel then visit the cmp/vf page once so that it can send the data to Mixpanel.