Ocavu Reference Guide

Installation - How do I use the Ocavu Web SDK event system?

The Ocavu Web SDK event system is a typical "event listener" interface.

Using the event system is simple:

ocavu.addEventListener(‘experienceReady’, function (event) {
    gtag(‘event’, ‘view_item’, {
       items: [{
            ‘id’: event.session.context.model.key,
           ‘name’: event.session.context.model.name,
       }]
    });
});

The above example listens for the experienceReady event, then handles the event by proxying it to Google Analytics using the view_item category.

The following event names are available:

  • webSDKReady
  • experienceLaunched
  • experienceLaunchFailed
  • experienceReady
  • experienceLoadFailed
  • startExperience
  • modelLoadFinished*
  • modelLoadError*
  • modelLoadProgress*
  • ctaClicked
  • viewARButtonClicked
  • endExperience

*only available for WebGL experiences

The event handler is passed a single argument: event

The event object utilizes the following format:

{
    "event_name": "experienceReady",
    "session": {
        "context": {
            "model": {
                "name": "Example Name",
                "key": "example-key"
            }
        }
    }
}

Note: the webSDKReady event is not associated with an experience session and will not contain the session attribute

Example Google Analytics Usage:
function proxyToGtag (event) {
    if (!window.dataLayer) {
        return;
    }
    var data = {
        'event': 'ocavu-event',
        'ocavu-event-type': event.event_name,
    };
    if (event.event_name !== 'webSDKReady') {
        data['ocavu-model-key'] = event.session.context.model.key;
    }
    window.dataLayer.push(data);
}

ocavu.addEventListener('webSDKReady', proxyToGtag);
ocavu.addEventListener('experienceLaunched', proxyToGtag);
ocavu.addEventListener('experienceLaunchFailed', proxyToGtag);
ocavu.addEventListener('experienceReady', proxyToGtag);
ocavu.addEventListener('experienceLoadFailed', proxyToGtag);
ocavu.addEventListener('endExperience', proxyToGtag);