Heap

Split + Heap is a community-supported integration. Community-supported integrations are not owned or maintained by the engineering teams at Split or Heap. We do our best to ensure that we share only high-quality community integrations and solutions but we do not work on these projects directly, nor can we guarantee that they’re consistently maintained.

To learn more about all our integrations check out our integrations page. If you’d like a demo of Split, or help to implement any of our integrations, contact support@split.io.

Split + Heap

Split impressions describe the treatment that each user receives when a split is evaluated. Attach split names and treatments as Heap events properties for a user's session.

Prerequisites

To connect Heap to Split, you will need,

• Split’s Javascript SDK evaluating split treatments client side
• Heap’s Web Javascript snippet

How to use

Implement both libraries

The code below implements both Split and Heap's Javascript libraries, assuming both libraries are loaded in the header section.

In this example, the Split SDK is wrapped with the class SplitIO. Be sure sure to update the key and authorizationKey fields in the factory initialization.

Split treatments are calculated for a list of Split names defined in an array variable splitNames. Be sure to update the array with the correct split names.

Evaluate treatments

Once the treatments are fetched, the script uses heap.addEventProperties to add the split names as a property name and the respective treatments as the value.

Add a prefix

A prefix of "split." is added to each split name in the below example to make it easier to filter in Heap.

Verify Split treatments as Heap event properties

Click on a pageview event and view event properties.

Analyze Heap data by Split treatments

Simply create a graph of the count of page views filtering by Split names and treatments. Group by the split name to see the count by treatment.

Code

The source code referenced above can be found below.

<script>
userId="bob";
heap.identify(userId);
class SplitIO {
    constructor() {
        this.isSDKReady=false;
        this.factory = splitio({
            core: {
                authorizationKey: 'BROWSER API KEY',
                key: userId,
            },
            storage: {
            type: 'LOCALSTORAGE'
            },
        });
        this.client = this.factory.client();
        this.client.on(this.client.Event.SDK_READY, () => {
            this.isSDKReady=true;
        });
    }
    applyFeatureFlags(featureNames) {
        return this.client.getTreatments(featureNames);
    }
    destroySplit() {
        this.client.destroy();
        this.client=null;
    }
}

function calculateTreatments() {
    splitNames=["sample_feature", "show_coupon", "enable_search"];
    treatments = mySplit.applyFeatureFlags(splitNames);

    var split_treatments ={};
    for (var i = 0; i < splitNames.length; i++) {
        console.log(splitNames[i]+": "+treatments[splitNames[i]]);
        split_treatments["Split."+splitNames[i]] = treatments[splitNames[i]];
    }
    heap.addEventProperties(split_treatments);
}

var mySplit = new SplitIO();
if (!mySplit.isSDKReady) {
    console.log("Split not ready yet");
    mySplit.client.on(mySplit.client.Event.SDK_READY, () => {
        calculateTreatments();
    });
} else {
    calculateTreatments();
}
</script>