Events

You can hook into the events below to track users and generate analytics that reveal how users are interacting with your images, spins and sliders.

List of events

Viewer events

Spin events

Zoom events

Video events

Image events

Sirv API event binding

Attach and remove event handlers with the Sirv API using Sirv.on() and Sirv.off() methods.

function viewerEventHandler(viewer) {
  console.log('Sirv Viewer event happened.');
}

// Attach an event handler for a Viewer event
Sirv.on('viewer:ready', viewerEventHandler);

// Remove an event handler for a Viewer event
Sirv.off('viewer:ready', viewerEventHandler);


// Attach an event handler for a Spin event
Sirv.on('spin:zoomIn', (spin) => {
  console.log('Spin frame is zoomed in.');
});

// Attach an event handler for a Zoom event
Sirv.on('zoom:zoomOut', (zoom) => {
  console.log('Zoom image is zoomed out.');
});

In more detail:

<div class="Sirv" id="test">
  <div data-src="https://demo.sirv.com/tshirt-blue.spin"></div>
  <div data-src="https://demo.sirv.com/tshirt-green.spin"></div>
  <div data-src="https://demo.sirv.com/tshirt-red.spin"></div>
</div>

<script type="text/javascript" src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>

<script type="text/javascript">
  Sirv.on('viewer:ready', (viewer) => {
    console.log('custom global event ready', viewer);
    if (viewer.id === 'test') {
      let child = viewer.child();
    }
  });
  Sirv.on('viewer:fullscreenIn', (viewer) => {
    console.log('custom global event fullscreenIn', viewer);
  });
  Sirv.on('viewer:fullscreenOut', (viewer) => {
    console.log('custom global event fullscreenOut', viewer);
  });
  Sirv.on('viewer:beforeSlideIn', (item) => {
    console.log('custom global event beforeSlideIn', item);
  });
  Sirv.on('viewer:beforeSlideOut', (item) => {
    console.log('custom global event beforeSlideOut', item);
  });
  Sirv.on('viewer:afterSlideIn', (item) => {
    console.log('custom global event afterSlideIn', item);
  });
  Sirv.on('viewer:afterSlideOut', (item) => {
    console.log('custom global event afterSlideOut', item);
  });
</script>

JavaScript event binding

Attach and remove event handlers with the standard DOM API by using the .addEventListener() and .removeEventListener() methods. Event names are namespaced with sirv:.

Attach an event handler for an event to a specific Sirv Media Viewer instance:

document.querySelector('.product-view .Sirv').addEventListener('sirv:viewer:beforeSlideIn', (e) => {
  console.log('Sirv Viewer event happened.', e.detail);
});

Attach an event handler for an event to a document element to watch events from all Sirv Media Viewer instances:

document.addEventListener('sirv:viewer:beforeSlideIn', (e) => {
});

jQuery event binding

Attach and remove event handlers with jQuery using its .on() and .off() methods. Event names are namespaced with sirv::

function eventHandler(e) {
  console.log('Sirv event happened.', e.detail);
}

Attach an event handler:

jQuery('.product-view .Sirv').on('sirv:viewer:beforeSlideIn', eventHandler);

Remove an event handler:

jQuery('.product-view .Sirv').off('sirv:viewer:beforeSlideIn', eventHandler);

Example event usage

Below shows the possible use of the spin:rotate event:

Sirv.on('spin:rotate', (spinInstance) => {

  /* Send a spin event to Google analytics */
  ga('event', {
    'Sirv',
	'Spin interaction',
	eventLabel: 'event.sirv.spin.interaction'
  });

  /* Send a custom spin event to Facebook */
  fbq('trackCustom', Sirv Spin Interaction');
});

Below shows two spins on a page, with different events applied per spin:

<div class="Sirv" id="viewer-id-1">
  <div data-id="spin-id-1" data-src="https://demo.sirv.com/boot.spin"></div>
</div>

<div class="Sirv" id="viewer-id-2">
  <div data-id="spin-id-2" data-src="https://demo.sirv.com/cap.spin"></div>
</div>

<script>
// first variant
Sirv.on('spin:ready', (spin) => {
    // const viewer = spin.parent().parent()
    // viewer.id === "viewer-id-1" || viewer.id === "viewer-id-2"
    // spin.id === "spin-id-1 || spin.id === "spin-id-2"
    display3dProductContent(spin);
});

Sirv.on('spin:rotate', (spin) => {
    // const viewer = spin.parent().parent()
    // viewer.id === "viewer-id-1" || viewer.id === "viewer-id-2"
    // spin.id === "spin-id-1 || spin.id === "spin-id-2"
    $('.slide-content').removeClass('show');
});

Sirv.on('spin:rotateEnd', (spin) => {
    // const viewer = spin.parent().parent();
    // viewer.id === "viewer-id-1" || viewer.id === "viewer-id-2"
    // spin.id === "spin-id-1 || spin.id === "spin-id-2"
    display3dProductContent(spin);
});

//second variant
document.querySelector("#viewer-id-2").addEventListener('sirv:spin:ready', (e) => {
    const spin = e.detail;
    // const viewer = spin.parent().parent();
    // viewer.id === "viewer-id-2"
    // spin.id === "spin-id-2"
});

document.querySelector("#viewer-id-2").addEventListener('sirv:spin:rotate', (e) => {
    const spin = e.detail;
    // const viewer = spin.parent().parent();
    // viewer.id === "viewer-id-2"
    // spin.id === "spin-id-2"
});

document.querySelector("#viewer-id-2").addEventListener('sirv:spin:rotateEnd', (e) => {
    const spin = e.detail;
    // const viewer = spin.parent().parent();
    // viewer.id === "viewer-id-2"
    // spin.id === "spin-id-2"
});
</script>

Event statistics

Sirv counts the views of your spins and shows the total on the Spin views page in your Sirv account. A "view" is counted each time the spin:ready event fires. The event fires once the images have downloaded and the spin is ready to interact with. Spins will lazy load by default, so the images will download only when the spin enters the viewport - if the spin is further down the page or if it is in a gallery and not shown on load, then no view will be counted until the user goes to the spin.

If the user navigates to another page and then comes back to the same page, another spin view will be counted (once the spin:ready event fires).