Integrate with Mixpanel

You might want to send data from Flagship to Mixpanel, to push experiments and features information and combine them with all your analytics dashboard. Hopefully, the method we're providing will help you reach that goal.

📘 Reminder

The following custom integration isn’t under maintenance. It has been design to be generic, to work on the largest set of cases and codebase. As a Yoda Master developer, you are the king of your own code.

The following code example takes into account that you already started your Flagship SDK and synchronized your user to get the flag (the modification) he should be assigned to. The user is now seeing the flag, and you need to activate it, to alert us and count one more user in the corresponding report. When activating it with our Flagship method, you will trigger the Mixpanel method at the same time and send the information you need to, like in the code example below.

It also implies that you imported the Mixpanel library before calling their method.

JavaScript

//... some other codes

Flagship.start(ENV_ID, API_KEY, {
  onVisitorExposed: ({ exposedVisitor, fromFlag }) => {
    mixpanel.track('flagship_event', {
      distinct_id: exposedVisitor.id,
      ...fromFlag.metadata
    })
  }
})

//... do some stuff

// Then Calling flag.getValue() or flag.visitorExposed() anywhere will trigger onVisitorExposed callback

React

<FlagshipProvider 
   onVisitorExposed={({ exposedVisitor, fromFlag }) => {
    mixpanel.track('flagship_event', {
      distinct_id: exposedVisitor.id,
      ...fromFlag.metadata
    })}
>
 //... do some stuff

// Then Calling flag.getValue() or flag.visitorExposed() anywhere will trigger onVisitorExposed callback
</FlagshipProvider>

PHP

<?php

require_once __DIR__.'/vendor/autoload.php';

use Flagship\Config\DecisionApiConfig;
use Flagship\Enum\CacheStrategy;
use Flagship\Flagship;
use Flagship\Model\ExposedFlagInterface;
use Flagship\Model\ExposedVisitorInterface;
use Segment\Segment;

// callback
function onVisitorExposed(ExposedVisitorInterface $visitorExposed, ExposedFlagInterface $fromFlag)
{
    // Forward the information to your third party
    // This block is excuted each time the visitorExposed is called and sucess

    // Get metadata of exposed flag
    $trackProperties = json_decode(json_encode($fromFlag->getMetadata()), true);
    
    // Set visitor id
    $trackProperties["distinct_id"] = $visitorExposed->getId();

    // Send information to Mixpanel
    $mp = Mixpanel::getInstance("MIXPANEL_PROJECT_TOKEN");
    $mp->track("flagship_event", $trackProperties);
}

// Start SDK
Flagship::start("your_env_id", "your_api_key", DecisionApiConfig::decisionApi()
        ->setCacheStrategy(CacheStrategy::BATCHING_AND_CACHING_ON_FAILURE)
        ->setOnVisitorExposed('onVisitorExposed')); // set the callback

// Create visitor
$visitor = Flagship::newVisitor('visitorId')->build();

//Fetch flags
$visitor->fetchFlags();

// Ex: get flag for vip feature
$flag = $visitor->getFlag("displayVipFeature", false);

// Use this flag value to enable displaying the vip feature.
$flag->getValue();

// You should keep in mind by default on getting the flag value ,the SDK expose the visitor.

// batch and send all hits in the pool 
Flagship::close();

// when the expose sucess ==>  the callback defined in the "setOnVisitorExposed" config will be triggered

.NET

//... some other codes

//Define the function that should be called when the OnVisitorExposed event is triggered
void Config_OnVisitorExposed(Flagship.FsVisitor.IExposedVisitor exposedVisitor, Flagship.FsFlag.IExposedFlag exposedFlag)
{
    var props = new Value();
    props["distinct_id"] = exposedVisitor.Id;
    props["CampaignId"] = exposedFlag.Metadata.CampaignId;
    props["VariationGroupId"] = exposedFlag.Metadata.VariationGroupId;
    props["VariationId"] = exposedFlag.Metadata.VariationId;

    Mixpanel.Track("flagship_event", props);
}

//Create sdk config object
var config = new Flagship.Config.DecisionApiConfig();

//Add OnVisitorExposed event
config.OnVisitorExposed += Config_OnVisitorExposed;

// Start the SDK
Flagship.Main.Fs.Start("your_env_id", "your_api_key", config);

//... do some stuff

// Then Calling flag.GetValue() or flag.VisitorExposed() anywhere will trigger onVisitorExposed event

Android

Flagship.start(
	getApplication(),
  _ENV_ID_,
  _API_KEY_,
  FlagshipConfig.DecisionApi()
    .withOnVisitorExposed { visitorExposed : VisitorExposed, exposedFlag: ExposedFlag<*> ->
    // Get Flagship campaign information, map it, and send it to Mixpanel
  	mixpanel.track("flagship_event", exposedFlag.metadata.toJson())
  }

//Later in your app, trigger a visitor flag exposition:
val myFlag = visitor.getFlag("myFlag", "defaultValue")
myFlag.visitorExposed()



        

Java

// Flagship campaign activation

        Flag<String> myFlag = flagshipVisitor.getFlag("myFlag", "defaultValue");
        myFlag.userExposed();

// Get Flagship campaign information, map it, and send it to Mixpanel

        MessageBuilder messageBuilder = new MessageBuilder("MIXPANEL_TOKEN");
        MixpanelAPI mixpanel = new MixpanelAPI();
        ClientDelivery clientDelivery = new ClientDelivery();

        JSONObject campaignMetadata = myFlag.metadata().toJSON();
        if (properties != null) {
            clientDelivery.addMessage(messageBuilder.event("distinctId", "flagship_event", campaignMetadata));
            mixpanel.deliver(clientDelivery);
        }

iOS

// We assume you created visitor and fetched flags

// Retrieve the current visitor

if let currentVisitor = Flagship.sharedInstance.sharedVisitor{
    
    // Get the flag object
    let myFlagObject = currentVisitor.getFlag(key: "my_flag", defaultValue:"defaultValue")
    
    // Expose the campaign
    myFlagObject.userExposed()
    
    // Get flagship campaign information and send it to Mixpanel
    if let campaign_metadata =  myFlagObject.metadata().toJson() as? [String:MixpanelType]{
        
        Mixpanel.mainInstance().track(event: "flagship_event", properties:campaign_metadata)
    }
}

Flutter

//////////////////////////////////////////////
/////// Start SDK with custom options  ///////
//////////////////////////////////////////////

    // Create configuration otptions
    FlagshipConfig customConfig =
        ConfigBuilder().withOnVisitorExposed((visitorExposed, fromFlag) {
      // Forward the information to your third party
      // This block is excuted each time the visitorExposed is called and sucess

      // Send visitor information to Mixpanel
      mixpanel?.track("flagship_event", properties: visitorExposed.toJson());

      // Send flag information to Mixpanel
      mixpanel?.track("flagship_event", properties: fromFlag.toJson());
    }).build();

    // Start SDK
    await Flagship.start("envId", "apiKey", config: customConfig);
    // Create visitor
    var currentVisitor = Flagship.newVisitor("visitorId").build();

    // Fetch flags
    currentVisitor.fetchFlags().whenComplete(() {
      // Ex: get flag for vip feature
      Flag flag = currentVisitor.getFlag("displayVipFeature", false);

      // Use this flag value to enable displaying the vip feature.
      bool shouldDisplayVipFeature = flag.value();
      // You should keep in mind by default on getting the flag value ,the SDK expose the visitor.
      // when the expose sucess ==>  the callback defined in the "withOnVisitorExposed" config w'll be triggered.
    });

Any feedback? We would be really happy to have a quick chat!