Segmentation example

Using segmentation we can identify important events in the web application. This example shows how to build custom ones.

Note

The SDK starts up automatically.

Intervals need to have 'type', but 'content id', 'timeout', 'started', 'ended' are optional parameters. Timeout defaults to 43200 seconds, which is 12 hours.

Important

If an interval is not closed, data won't appear on the Dashboard for the given source (participant), until the interval is closed manually or times out automatically.

Segmentations are key-value informations of an interval. The 'type', 'key' and (value)'type' are required.

Add interval

Interval type:

Interval content id:

Interval timeout:

Interval started:

Interval ended:

Add segmentation

Segmentation interval type:

Segmentation key:

Segmentation value:

Segmentation type:

String
Boolean
Number

The important code lines are these:

/* Starting an interval */
 window.Realeyesit.experienceSdk.markIntervalStart(intervalType, intervalContentId, intervalStarted, intervalTimeout);
 /* Ending an interval */
 window.Realeyesit.experienceSdk.markIntervalEnd(intervalType, intervalEnded);
 /* Adding string information to the interval */
 window.Realeyesit.experienceSdk.setIntervalInfoString(intervalType, segmentationKey, segmentationValue);
  /* Adding bool information to the interval */
 window.Realeyesit.experienceSdk.setIntervalInfoBoolean(intervalType, segmentationKey, segmentationValue);
  /* Adding number information to the interval */
 window.Realeyesit.experienceSdk.setIntervalInfoNumber(intervalType, segmentationKey, segmentationValue);

<div id="divIntervalControls">
    <b>Add interval</b><br />
    <br />
    <div style="display: inline-block; min-width: 210px">Interval type:</div>
    <input type="text" id="tbIntervalType" /><br />
    <div style="display: inline-block; min-width: 210px">Interval content id:</div> <input type="text"
        id="tbIntervalContentId" /><br />
    <div style="display: inline-block; min-width: 210px">Interval timeout:</div> <input type="text"
        id="tbIntervalTimeout" /><br />
    <div style="display: inline-block; min-width: 210px">Interval started:</div> <input type="time"
        id="tbIntervalStartedTime" /><br />
    <div style="display: inline-block; min-width: 210px">Interval ended:</div> <input type="time"
        id="tbIntervalEndedTime" /><br />
    <br />
    <input type="button" id="btIntervalStart" onclick="startInterval()" value="Start"></input><input
        style="margin-left: 60px;" type="button" id="btIntervalEnd" value="End" onclick="endInterval()"></input>
</div>
<div id="divSegmentationControls">
    <br />
    <b>Add segmentation</b><br />
    <br />
    <div style="display: inline-block; min-width: 210px">Segmentation interval type:</div><input type="text"
        id="tbSegmentationIntervalType" /><br />
    <div style="display: inline-block; min-width: 210px">Segmentation key: </div><input type="text"
        id="tbSegmentationKey" /><br />
    <div style="display: inline-block; min-width: 210px">Segmentation value: </div><input type="text"
        id="tbSegmentationValue" /><br />
    <div style="display: inline-block; min-width: 210px">Segmentation type: </div><br />
    <input type="radio" id="rbSegmentationTypeString" name="segmentationType" value="string" checked>
    <label for="rbSegmentationTypeString">String</label><br>
    <input type="radio" id="rbSegmentationTypeBool" name="segmentationType" value="boolean">
    <label for="rbSegmentationTypeBool">Boolean</label><br>
    <input type="radio" id="rbSegmentationTypeNumber" name="segmentationType" value="number">
    <label for="rbSegmentationTypeNumber">Number</label><br />
    <input type="button" id="btAddIntervalInfo" onclick="addIntervalInfo()" value="Add">
</div>
<script src="https://codesdwncdn.realeyesit.com/experience-sdk/xp/release/1/reExperienceSdk.min.js"></script>
<script>
    /* Control initialization */
    var divIntervalControls = document.getElementById('divIntervalControls');
    var tbIntervalType = document.getElementById('tbIntervalType');
    var tbIntervalContentId = document.getElementById('tbIntervalContentId');
    var tbIntervalTimeout = document.getElementById('tbIntervalTimeout');
    var tbIntervalStartedTime = document.getElementById('tbIntervalStartedTime');
    var tbIntervalEndedTime = document.getElementById('tbIntervalEndedTime');
    var btIntervalStart = document.getElementById('btIntervalStart');
    var btIntervalEnd = document.getElementById('btIntervalEnd');
    var tbSegmentationIntervalType = document.getElementById('tbSegmentationIntervalType');
    var tbSegmentationKey = document.getElementById('tbSegmentationKey');
    var tbSegmentationValue = document.getElementById('tbSegmentationValue');
    /* End of Control initialization */
    function startInterval() {
        var intervalType = tbIntervalType.value;
        var intervalContentId = tbIntervalContentId.value;
        var intervalStarted = tbIntervalStartedTime.value;
        var intervalTimeout = tbIntervalTimeout.value;
        var datePart = "";
        if (intervalStarted) {
            intervalStarted = new Date((new Date()).toISOString().split('T')[0] + ' ' + intervalStarted);
        }
        window.Realeyesit.experienceSdk.markIntervalStart(intervalType, intervalContentId, intervalStarted, intervalTimeout);
        clearIntervalForm();
    }
    function endInterval() {
        var intervalType = tbIntervalType.value;
        var intervalEnded = tbIntervalEndedTime.value;
        var datePart = "";
        if (intervalEnded) {
            intervalEnded = new Date((new Date()).toISOString().split('T')[0] + ' ' + intervalEnded);
        }
        window.Realeyesit.experienceSdk.markIntervalEnd(intervalType, intervalEnded);
        clearIntervalForm();
    }
    function clearIntervalForm() {
        var intervalControls = document.querySelectorAll('#divIntervalControls input[type="text"]');
        for (let index = 0; index < intervalControls.length; index++) {
            const element = intervalControls[index];
            element.value = '';
        }
    }
    function addIntervalInfo() {
        var intervalType = tbIntervalType.value;
        var segmentationKey = tbSegmentationKey.value;
        var segmentationValue = tbSegmentationValue.value;
        const intervalInfoValueTypeRadioGroup = document.querySelectorAll('input[type="radio"]');
        let intervalInfoValueType;
        intervalInfoValueTypeRadioGroup.forEach(radioButton => {
            if (radioButton.checked) {
                intervalInfoValueType = radioButton.value;
            }
        });
        switch (intervalInfoValueType) {
            case 'string':
                window.Realeyesit.experienceSdk.setIntervalInfoString(intervalType, segmentationKey, segmentationValue);
                break;
            case 'boolean':
                window.Realeyesit.experienceSdk.setIntervalInfoBoolean(intervalType, segmentationKey, segmentationValue);
                break;
            case 'number':
                window.Realeyesit.experienceSdk.setIntervalInfoNumber(intervalType, segmentationKey, segmentationValue);
                break;
            default:
                break;
        }
        clearSegmentationForm();
    }
    function clearSegmentationForm() {
        var segmentationControls = document.querySelectorAll('#divSegmentationControls input[type="text"]');
        for (let index = 0; index < segmentationControls.length; index++) {
            const element = segmentationControls[index];
            element.value = '';
        }
    }
    var reConfig = {
        accountHash: 'YOUR_ACCOUNT_HASH',
        autoStart: true,
        autoPreLoad: true,
    };
    window.Realeyesit.experienceSdk.init(reConfig);
</script>