Statistics

You can hook into statistics sent by Sirv JS when users interact with a gallery or a spin.

If you open your browser console, you will see all stats request as they are triggered in the "Console" section. Each statistic is sent to stats.sirv.com and you can also collect that data.

GTM integration

An easy way to collect the data is via Google Tag Manager. Read the article to track 360 spins with Google Tag Manager and import them to analytics platform.

Custom integration

You can listen for stats events by adding this script to your page:

document.addEventListener('sirv:viewer:stats', e => {
    console.log(e.detail.statsData);
});

Example of the data returned in the sessionStart stats event:

e.detail.statsData = {
    browser: {
        width: 892,
        height: 823
    },
    screen: {
        width: 1512,
        height: 982,
        availWidth: 1512,
        availHeight: 950,
        colorDepth: 30,
        pixelDepth: 30
    }
    name: "sessionStart",
    origin: "///sirv.sirv.com/website/demos/vivo/vivo-hotspots.spin",
    sessionId: 3415941547,
    ts: 1757498189424,
    type: "spin"
};

List of statistics

sessionStart

sessionStart - returns information about the browser, screen and session.

statsData: {
    data: {
        browser: {
            width: Number,
            height: Number
        },
        screen: {
            availHeight: Number,
            availWidth: Number,
            width: Number,
            height: Number,
            colorDepth: Number,
            pixelDepth: Number
        },
    },
    name: String, // sessionStart - statistics type name
    origin: String, // url path of spin
    sessionId: Number,
    ts: Number, // timestamp Date.now()
    type: String // spin - component type
}

sessionEnd

sessionEnd - when the Sirv Media Viewer instance is destroyed.

statsData: {
    data: {
        message: String // Stopped
    },
    name: String, // sessionEnd - statistics type name
    origin: String, // url path of spin
    sessionId: Number,
    time: Number, // time in milliseconds from start of session to current moment
    type: String // spin - component type
}

framesPreloaded

framesPreloaded - the initial 360 spin images have loaded (spin can be used, whilst remaining images load seamlessly in background).

statsData: {
    data: {
        duration: Number // time in milliseconds from start of session to current moment
    },
    name: String, // framesPreloaded - statistics type name
    origin: String, // url path of spin
    sessionId: Number,
    time: Number, // time in milliseconds from start of session to current moment
    type: String // spin - component type
}

viewerReady

viewerReady - the Sirv Media Viewer instance is ready for interaction.

statsData: {
    data: {
        columns: Number,
        rows: Number,
        viewerSize: {
            width: Number,
            height: Number
        }
    },
    name: String, // viewerReady - statistics type name
    origin: String, // url path of spin
    sessionId: Number,
    time: Number, // time in milliseconds from start of session to current moment
    type: String // spin - component type
}

framesLoaded

framesLoaded - all images have loaded.

statsData: {
    data: {
        duration: Number // time in milliseconds from start of session to current moment
    },
    name: String, // framesLoaded - statistics type name
    origin: String, // url path of spin
    sessionId: Number,
    time: Number, // time in milliseconds from start of session to current moment
    type: String // spin - component type
}

dragStart

dragStart - the user grabbed the spin to start rotation - triggered by drag, mouse-scroll or API rotate.

statsData: {
    data: {
        clientX: Number,
        clientY: Number,
        pageX: Number,
        pageY: Number
    },
    name: String, // dragStart - statistics type name
    origin: String, // url path of spin
    sessionId: Number,
    time: Number, // time in milliseconds from start of session to current moment
    type: String // spin - component type
}

rotate

rotate - the spin is rotating.

statsData: {
    data: {},
    name: String, // rotate - statistics type name
    origin: String, // url path of spin
    sessionId: Number,
    time: Number, // time in milliseconds from start of session to current moment
    type: String // spin - component type
}

dragEnd

dragEnd - the user released the spin.

statsData: {
    data: {
        clientX: Number,
        clientY: Number,
        pageX: Number,
        pageY: Number,
        duration: Number // time in milliseconds from start of session to current momentThis is the time in milliseconds from the dragStart to the current moment.
    },
    name: String, // dragEnd - statistics type name
    origin: String, // url path of spin
    sessionId: Number,
    time: Number, // time in milliseconds from start of session to current moment
    type: String // spin - component type
}

fullscreenOpen

fullscreenOpen - when user opens fullscreen mode.

statsData: {
    data: {},
    name: String, // fullscreenOpen - statistics type name
    origin: String, // url path of spin
    sessionId: Number,
    time: Number, // time in milliseconds from start of session to current moment
    type: String // spin - component type
}

fullscreenClose

fullscreenClose - when user closes fullscreen mode.

statsData: {
    data: {
        duration: Number // time in milliseconds from start of session to current moment
    },
    name: String, // fullscreenClose - statistics type name
    origin: String, // url path of spin
    sessionId: Number,
    time: Number, // time in milliseconds from start of session to current moment
    type: String // spin - component type
}

zoomIn

zoomIn - when user zooms in to an image.

statsData: {
    data: {
        clientX: Number,
        clientY: Number,
        pageX: Number,
        pageY: Number,
        frame: {
            row: Number,
            column: Number
        }
    },
    name: String, // zoomIn - statistics type name
    origin: String, // url path of spin
    sessionId: Number,
    time: Number, // time in milliseconds from start of session to current moment
    type: String // spin - component type
}

zoomOut

zoomOut - when user zooms out of an image.

statsData: {
    data: {
        clientX: Number,
        clientY: Number,
        pageX: Number,
        pageY: Number,
        duration: Number, // time in milliseconds from start of session to current moment
        frame: {
            row: Number,
            column: Number
        }
    },
    name: String, // zoomOut - statistics type name
    origin: String, // url path of spin
    sessionId: Number,
    time: Number, // time in milliseconds from start of session to current moment
    type: String // spin - component type
}

Page Unload

Page Unload - when the user closes the page.

statsData: {
    data: {
        message: String // Stopped
    },
    name: String, // Page Unload - statistics type name
    origin: String, // url path of spin
    sessionId: Number,
    time: Number, // time in milliseconds from start of session to current moment
    type: String // spin - component type
}