Listening for these page transition events requires writing JavaScript functions that can be called by syncAccess when a particular page transition occurs.  These handlers must be gathered up in a single JavaScript file and made available via a public-facing URL to the Syncronex Support team.  Syncronex will take care of binding that file to your specific instance of syncAccess. 

Note, if you can’t support a public-facing JavaScript file (or don’t want to), you can also just provide the file to Syncronex so that it can be hosted for you.  The disadvantage to this approach is that every change you make to the handler file will require you to re-submit the changed file to Syncronex so that it can be re-posted.  If you use your own public file, then you can make changes to that file at your convenience without having to notify Syncronex.

The Syncronex-SyncAccess custom event returns different payloads depending on the context. In each case the object that is returned from the customEvent and passed to the handler that you create is a Custom Event. You can find more information on JavaScript Custom Events at https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events.

The ‘detail’ property of the custom event contains the Syncronex page transition event object. This ‘event’ property and the ‘data’ property within the ‘detail’ object contains the SyncAccess data that is reported on a page transition.

{
       event: [string],     // Name of specific syncronex event
       data: [object]       // event-specific payload data
}

Page Transition Event Object

The following example code shows how to listen for the page transition events and then just write some information to the browser’s developer tool’s console. The example is deliberately simplistic in order to highlight the mechanics of connecting to the events. In a real-world event handler, more complex logic would be employed to, for instance, notify an analytics service of the user’s actions.

/*
 * Helper functions
 */
function getLogPrefix() {
    return '>>> sa-evt >>>';
}
function getLogNewLine() {
    return '\n' + getLogPrefix();
}
function logEventDataPart(eventDataPart) {
    console.log(getLogPrefix() + ' ' + eventDataPart);
}
function getEventNameForLog(eventName) {
    return 'event fired: ' + eventName;
}
function getUserDataPartForLog(userData) {
    var userId = userData.userId || 'anonymous';
    var anonId = userData.anonymousUserId;
    var workflowId = userData.workflowId;
    return 'UserId: ' + userId 
                      + '\tAnonymousId: ' + anonId 
                      + '\tworfklowId: ' + workflowId;
}
function getNavigationPartForLog(navigationData) {
    var referrer = navigationData.referringUrl || 'no referrer';
    var currentUrl = navigationData.currentUrl;
    var returnUrl = navigationData.returnUrl || 'no return url provided';
    var trackingOrigin = navigationData.origin || 'no origin provided';
    return 'current page url:\t' +
        currentUrl + getLogNewLine() +
        ' referring page:\t\t' +
        referrer + getLogNewLine() +
        ' return url:\t\t\t' +
        returnUrl + getLogNewLine() +
        ' tracking origin:\t\t' +
        trackingOrigin;
}
function getOffersPartForLog(offerData) {
    var offerGroupId = offerData.offerGroup;
    var plans = offerData.planList;
    var logPart = '';
    var planPart = '';
    if(offerGroupId){
        logPart = 'user saw offer group ' + offerGroupId.toString();
        planPart = getLogNewLine() + ' which contained the following offers:';
        for (var i = 0; i < plans.length; i++) {
            planPart += getLogNewLine() + '\t\t' 
                 + plans[i].TestName + ' (' 
                 + plans[i].Type + '-'
                 + plans[i].planId + ')';
        }
    }
    return logPart + planPart;
}
/*
 * Output event details to console
 */
function logEvent(customEvent) {
    var eventName = customEvent.detail.event;
    var eventData = customEvent.detail.data;
    
    var navigationData = eventData.navigation;
    var userData = eventData.user;
    var offerData = eventData.offer || null;
    logEventDataPart('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>');
    logEventDataPart(getEventNameForLog(eventName));
    logEventDataPart(getUserDataPartForLog(userData));
    logEventDataPart(getNavigationPartForLog(navigationData));
    if (offerData) {
        logEventDataPart(getOffersPartForLog(offerData));
    }
    logEventDataPart('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>');
}
/*
 * Main wire-up of the Page Transition Events
 */
window.document.addEventListener('Syncronex-SyncAccess', function(customEvent) {
    logEvent(customEvent);
});

When this code is added to your custom event handling file (and once Syncronex has associated your file to your application instance), the developers console would display something like this when the user visits the offers page:

>>> sa-evt >>> >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>> sa-evt >>> event fired: syncacceses-login-page-entering
>>> sa-evt >>> UserId: anonymous  AnonymousId: 3372c198-5f97-4dd3-924a-21d7d6ee3817      worfklowId: g859uMTmJE2azamMBpjORg
>>> sa-evt >>> current page url:  https://syncaccess-acme-testpage.dev.syncronex.com/portal/#/offers/?origin=offers
>>> sa-evt >>> referring page:           no referrer
>>> sa-evt >>> return url:               no return url provided
>>> sa-evt >>> tracking origin:          offers
>>> sa-evt >>> >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>> sa-evt >>> >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>> sa-evt >>> event fired: syncacceses-offers-page-entering
>>> sa-evt >>> UserId: anonymous  AnonymousId: 3372c198-5f97-4dd3-924a-21d7d6ee3817      worfklowId: g859uMTmJE2azamMBpjORg
>>> sa-evt >>> current page url:  https://syncaccess-acme-testpage.dev.syncronex.com/portal/#/offers/?origin=offers
>>> sa-evt >>> referring page:           no referrer
>>> sa-evt >>> return url:               no return url provided
>>> sa-evt >>> tracking origin:          offers
>>> sa-evt >>> user saw offer group 9
>>> sa-evt >>> which contained the following offers:
>>> sa-evt >>>             Qualified Plan (Plan-5)
>>> sa-evt >>>             SA-Only Plan (Plan-14)
>>> sa-evt >>>             Circ Pro Print (Plan-13)
>>> sa-evt >>>             Monthly Digital (Plan-3)
>>> sa-evt >>>             24-Hour Pass (Plan-9)
>>> sa-evt >>>             DM Plan (Plan-7)
>>> sa-evt >>> >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

The data that is provided for each page transition event differs, depending on the context of the particular event.

{
       event: [string],     // Name of specific syncronex event
       data: {
              user: [object],
              navigation: [object],
              offer: [object],
              voucherLookup: [object]
       }
}

Here’s a list of the data objects that are provided with each event:

The Syncronex-SyncAccess custom event has been tested against Google Chrome, Firefox, Microsoft Edge, and Microsoft Internet Explorer versions 11, 10, and 9.

Important Note! Microsoft Internet Explorer is not supported in versions before 5.2.11.5 of syncAccess.