WT.addEventHandler

Optimize has an internal events system, through which you can subscribe to receive acknowledgement of, and details above, various things that take place.

Importantly, you should note that these events are not called retroactively. If you wish to subscribe to events, ensure that your code runs before the events take place. For integrations, this is the reason why we subscribe to these events in preinit.

Subscription to the events system is handled through code similar to:

WT.addEventHandler("event_name", function(data){
    // parse data here
});

 

Available events

Pageview:

This is the most common event to hook into, as it’s the key moment at which one would run a 3rd party integration to send data to Analytics tools, Screen Recording tools, Heatmaps, etc., sending them details of which Experiment a user has fallen into.

WT.addEventHandler("pageview", function(data){
    // parse data here
});

Example of data passed into the callback:

{
    "name": "pageview",
    "params": {
        "eventID": 01234567890
    }
    "state": "success",
    "target": {
        "params": {
            
            "beacon": false,
            "controlCookieTimeout": 1210000000,
            "cookieConversionCheck": true,
            "cookieInspection": true,
            "cookiePath": "/",
            "cookiePrefix": "_wt",
            "crossAPI": false,
            "data": {
                "description": "Description from Meta tag",
                "documentTitle": "Document Title",
                "robots": "index,follow",
                "theme-color": "#ffffff",
                "viewport": "width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=0",
                "_wm_TimeOffset": 3600000
            },
            "guid": "0123456-ta_testAlias-0123456-0123456",
            "lightWeightMode": false,
            "r_experimentID": 0123456,
            "r_paused": false,
            "r_runID": 0123456,
            "r_runState": 0123456,
            "r_type": "AB",
            "testAlias": "ta_testAlias",
            "_wt_sessionID": "01234567890123456"
        },
        "z1382": {
            "body": {
                "cookies": { // a list of cookies passed along in the request 
                    "name": "value"
                },
                "data": {
                    // as above, data object passed along in request 
                }
            }
        },
        "z7715": {
            "process": {
                "body": {
                    "cookies": {
                        // as above, cookies passed along in request 
                    },
                    "factors": [
                        {
                            "name": "element_id",
                            "operation": 3,
                            "value": "WTOTest01.setLevel('F1', 'F1L1')"
                        }
                    ],
                    "postScript": "your postrender code",
                    "preScript": "your prerender code"
                },
                "opcode": "process",
                "opstatus": "success"
            }
        }
    }
}

Sample usage:

Let’s say you wanted to send some data to Google Analytics whenever pageviews take place. This code could go into your Pre-Init script:

WT.addEventHandler("pageview", function (e) {
    var p = e.target.params;
    var projectAlias = p.testAlias;
    var testID = p.runID;
    var experimentID = p.experimentID;
    
    window.dataLayer = window.dataLayer || [];
    
    dataLayer.push({
        event: "Optimize-View",
        eventCategory: projectAlias,
        eventAction: testID,
        eventLabel: experimentID
    });
});

 

Hide/Show

This event subscription relates to [page hide](loading process page) – the mechanism through which we ensure tests do not flicker. There are two times at which this event is triggered – when the page should hide, and when it should be revealed. The callbacks differ based on the context in whcih the event is called.

To subscribe to the hide_show event:

WT.addEventHandler("hide_show", function(data){
    // parse data here
});

Example of data passed into the callback:

{
    "name": "hide_show"
    "params": {
        "display": true
    }
    "state": "success"
}

Sample usage:

Let’s say you wanted to build your own page hiding mechanism. This code could go into your Pre-Init script:

WT.addEventHandler("hide_show", function(data){
    var action = data.params.display ? "show": "hide";
    var cssID = "wt_pageHide";
    
    if(action == "hide"){
        WT.helpers.css.add("body { opacity: 0.00001 !important; }", cssID);
    } else { /* action == "show" */
        WT.helpers.css.del(cssID);
    }
});

 

Conversion

For conversions which do not take place through a “fire and forget” method (REST, Beacon), you can subscribe to a event where the status of the conversion is confirmed by OTS. This is helpful as a generic hook for QA purposes, but also allows you to consider your own mechanism for delaying element redirection.

To subscribe to the conversion event:

WT.addEventHandler("conversion", function(data){
    // parse data here
});

Example of the data returned in the callback:

{
    "name": "conversion",
    "params": {
        "eventID": 1597567487466
    },
    "state": "success",
    "target": zf9ac
}