Last updated

Integrating VWO with MixPanel allows you to push VWO test data into Mixpanel reports.

The end-to-end process of integrating MixPanel with VWO involves the following steps:

  1. Adding tracking code to test pages
  2. Viewing your VWO Test ID

Adding Tracking Code to Test Pages

  1. Add the following code snippet before the Mixpanel integration code to the pages where VWO test is running. Also, ensure that you add this code only after the VWO smart code on the page.
    <script type="text/javascript">
    var _vis_opt_queue = window._vis_opt_queue || [], _vis_counter = 0, mixpanel = window.mixpanel || [];
    _vis_opt_queue.push(function() {
    try {
    if(!_vis_counter) {
    var _vis_data = {},_vis_combination,_vis_id,_vis_l=0;
    for(;_vis_l<_vwo_exp_ids.length;_vis_l++) {
    _vis_id = _vwo_exp_ids[_vis_l];
    if(_vwo_exp[_vis_id].ready) {
    _vis_combination = _vis_opt_readCookie('_vis_opt_exp_'+_vis_id+'_combi');
    if(typeof(_vwo_exp[_vis_id].combination_chosen) != "undefined")
    _vis_combination = _vwo_exp[_vis_id].combination_chosen;
    if(typeof(_vwo_exp[_vis_id].comb_n[_vis_combination]) != "undefined") {
    _vis_data['VWO-Test-ID-'+_vis_id] = _vwo_exp[_vis_id].comb_n[_vis_combination];
    // Use the _vis_data object created above to fetch the data,
    // key of the object is the Test ID and the value is Variation Name
    if(_vis_counter) {
    mixpanel.track("VWO", _vis_data);
    catch(err) {};
  2. After adding the code snippet, check the Mixpanel properties for VWO-Test-ID-# (where # is the test ID number). You will see the name of the variation shown to the visitor.
    For example, VWO-Test-ID-125.mixpanel1

Viewing Your VWO Test ID

To view the test ID in the VWO dashboard:

  1. Select the test for which you want to view the ID.
  2. In the Test Details page, select the Settings tab and then click Summary.kissmetrics-vwo
  3. To view the Test ID, go to the Other Information section of the page.kissmetrics-vwo1

SPA Integration

For any SPA integration with VWO, you must add the following code snippet to the website, anywhere between <head> </head> elements, but before the second code snippet. This code is common for all SPA integration and must be installed only once even if you have multiple tools to integrate. For example, you may want to integrate both Omniture and Mixpanel.

The first code snippet is common to all SPA integrations, while the second snippet is specific to the tool you want to integrate.

<script type="text/javascript">
!function(v,w,o){var e=[],t=[],z=function(n,a){a.e===n[0]&&a.c.apply(this,[n])},u=function(n,a){a.e&&a.e!==n[1]||a.v&&a.v!==n[2]||a.c.apply(this,[n])},c=function(n){for(var a=0;a<t.length;a++)z(n,t[a]);if("rH"===n[0]||"vS"===n[0])for(a=0;a<e.length;a++)u(n,e[a])},r=w.push;w.push=function(){var n=arguments[0];c(n),r.apply(w,[].slice.call(arguments))},v.onVariationApplied=function(n,t,s){"function"==typeof n&&(s=n,n=null,t=null),s=s||o;var c={e:n,v:t,c:s};e.push(c);for(var r=0;r<w.length;r++)("rH"===w[r][0]||"vS"===w[r][0])&&u(w[r],c)},v.onEventReceive=function(n,e){e=e||o;var s={e:n,c:e};t.push(s);for(var c=0;c<w.length;c++)u(w[c],s)}}(window.VWO=window.VWO||[],window._vwo_evq=window._vwo_evq||[], function(){});

In Addition to the code above, you must add the following additional code for Mixpanel.

<script type="text/javascript">
(function () {
var vwoMpData = {},
window._mpq = window._mpq || [];
window.VWO.push(['onVariationApplied', function (data) {
if(!data) {
var expId = data[1],
variationId = data[2];
if(typeof(_vwo_exp[expId].comb_n[variationId]) !== 'undefined' ['VISUAL_AB','VISUAL','SPLIT_URL','SURVEY'].indexOf(_vwo_exp[expId].type) >-1) {
vwoMpData['VWO-Test-ID-' + expId] = _vwo_exp[expId].comb_n[variationId];
dataSendingTimer = setTimeout(function () {
mixpanel.track("VWO", vwoMpData);
vwoMpData = {};
}, 100);

Contact Us / Login

Resources Home