# 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.

{% hint style="info" %}
📘 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.
{% endhint %}

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.

{% tabs %}
{% tab title="JavaScript" %}

```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
```

{% endtab %}

{% tab title="React" %}

```jsx
<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>
```

{% endtab %}

{% tab title="PHP" %}

```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
```

{% endtab %}

{% tab title=".NET" %}

```csharp
//... 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
```

{% endtab %}

{% tab title="Android" %}

```kotlin
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()



        
```

{% endtab %}

{% tab title="Java" %}

```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);
        }
```

{% endtab %}

{% tab title="iOS" %}

```swift
// 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)
    }
}
```

{% endtab %}

{% tab title="Flutter" %}

```dart
//////////////////////////////////////////////
/////// 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.
    });
```

{% endtab %}
{% endtabs %}

Any feedback? [We would be really happy to have a quick chat!](mailto:product.feedback@abtasty.com?subject=Flagship%20Mixpanel%20Integration%20Feedback)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.abtasty.com/server-side/integrations/analytics/integrate-with-mixpanel.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.