Confirmation Page Integration on Single Page Applications

If you have integrated or are integrating the Web SDK, you can skip this guide, as this function will be covered in the Web SDK.

If your website is a single-page application (SPA) or has single-page flows, the information you pass to the Insider Object on a page might persist after the page changes. For example, if a user completes a transaction and visits the After Payment (success) page, you will pass the page type as Confirmation. If this user refreshes the After Payment page, this act will be considered a new transaction. In this case, the conversions will be duplicated.

To prevent such cases, you must pass the page type information only once on the After Payment page and delete it.

The following example shows how you can implement such an update.

The following code snippet listens to Insider requests and checks the page type when the request is successful. Then it assigns the page type as Other once the user visits the confirmation page. This helps eliminate duplicated conversions.

window.insider_object = {
    page: {
        type: 'Confirmation'
    }
};

ajaxListenerConfirmation = function (callback) {
    'use strict';

    var oldOpen = XMLHttpRequest.prototype.open;

    XMLHttpRequest.prototype.open = function (method, url) {
        this.addEventListener('readystatechange', function () {
            if (this.responseType !== 'arraybuffer' && this.responseType !== 'blob' &&
                this.readyState === 4 && this.status === 200 && typeof callback === 'function') {
                callback(url, this.response, method);
            }
        });

        oldOpen.apply(this, arguments);
    };
};

ajaxListenerConfirmation(function (url, response, method) {
    if (method.toLowerCase() === 'post' && url.indexOf('/hit') > -1 &&
        window.insider_object.page.type === 'Confirmation') {
        window.insider_object = {
            page: {
                type: 'Other'
            }
        };
    }
});