HTML5 Viewer SDK API Documentation 


Class Index

Classes in s7sdk

Class s7sdk.TrackingManager

The TrackingManager component emits user-initiated events that are suitable for tracking purposes. These events are meant to help understand user behaviors and are different from normal events that facilitate component interaction. For that reason there is a special event class called UserEvent that is used primarily for tracking. This event is not handled in SDK-based viewers unless lower level control over event processing is desired. Each component has predefined logic that guides the event transmission.

When a UI component is attached to the TrackingManager component, every time a component dispatches an instance of UserEvent the TrackingManager calls the s7ComponentEvent external API if the tracking of that particular track event type is enabled, unless the TrackingManager.setCallback() function has been called with an alternative callback function. The callback function is a JavaScript function with the following syntax:

s7ComponentEvent (objectID, component class, instance name, time stamp, event data)

The objectID is the id attribute of the object tag, or the name attribute of the embed tag. The component class is set to the type of the component that dispatched the UserEvent; the instance name is the name of the component instance that dispatched the event; the time stamp is a number of seconds since the beginning of the session. The event data is the value returned by the UserData.toString() API and differs for each UserData.trackEvent type. In addition to calling the external API function, every listed event is also traced in the console output when loglevel is config or higher.

Supported events and components emitting them:

LOADEmitted when the viewer starts.ParameterManager
SWAPEmitted when the asset is changed by the viewer.FlyoutZoomView, NavigationView, ZoomView, MediaSet, PageScrubber, PageView, SpinView, Swatches, ThumbnailGridView, VideoPlayer, CarouselView
SWATCHEmitted each time a swatch or thumbnail is selected.Swatches, ThumbnailGridView
PAGEEmitted for page turn events.PageView
PLAYEmitted when video begins to play.RecutPlayer, VideoPlayer
PAUSEEmitted when pause button is clicked.RecutPlayer, VideoPlayer
STOPEmitted when pause button is clicked.RecutPlayer, VideoPlayer
MILESTONEShould be emitted when the video has played to 25%, 50%, 75% and 100%.VideoPlayer
HREFEmitted when an image map is clicked and its href= attribute is executed.ImageMapEffect
ITEMEmitted when an image map has non-empty rollover_key= attribute and RolloverKeyEvent event is dispatched after it was activated.ImageMapEffect
TARGEmitted when a zoom target it selected.ZoomTargets
ZOOMEmitted when the zoom level changes.FlyoutZoomView, ZoomView, PageView, SpinView
SPINEmitted each time the view is changed to a different spin frame.SpinView
PANEmitted each time a view is panned.FlyoutZoomView, ZoomView, SpinView, PageView
BANNEREmitted each time image is changed inside the CarouselView component.CarouselView
INTERACTIVE_SWATCHEmitted each time when the user clicks an interactive swatch.InteractiveSwatches,CallToAction
See s7sdk.event.UserEvent for a list of events generated by each components.

Customizing Behavior Using Modifiers

For components that are attached to the TrackingManager, the following modifiers are supported:

disabletrackingevent1[,event2[,...]]Events not to track.

Class Summary
Constructor Attributes Constructor Name and Description
s7sdk.TrackingManager(containerId, settings, compId)
Method Summary
Method Attributes Method Name and Description
attach(component, handler)
Attach the component to the TrackingManager.
callTrackingHandler(component, instanceName, dataString)
Format the parameters and call the actual tracking function in the user code.
Detach the component from the TrackingManager.
Disposes the component.
setCallback(callbackFunction, callbackContext)
TrackingManager calls the global function s7ComponentEvent() unless TrackingManager.setCallback is used to provide an alternative callback function.
Class Detail
s7sdk.TrackingManager(containerId, settings, compId)
Example Code

This example demonstrates how to use the TrackingManager component in a simple viewer. In this example a Container object, a ZoomView object, a ZoomInButton object, a ZoomOutButton object, and a TrackingManager object are created. When a user interacts with the ZoomView object or the zoom buttons, all tracked events are added as text to a div and appear on the page below the viewer (for example purposes). Modify the code in the s7ComponentEvent() function as necessary to enable event tracking on your site. The code below does the following:

  1. The Scene7 HTML5 SDK is linked to the page and the required s7sdk components are included in the document head.
  2. CSS Styles are defined in the document head to control the appearance of the ZoomView and button components.
  3. The s7sdk.Util.init() method is called to initialize the SDK.
  4. A ParameterManager object is created to handle component modifiers for the viewer.
  5. An initViewer() function is defined. This function initializes a couple of modifiers (hard coded for example purposes), then creates the component objects required for this simple example. The initViewer() function also adds event listeners that designate functions to handle relevant component events (which might be dispatched by the components as a result of user interactions, changes in a component's state, etc.).
  6. A required s7ComponentEvent() handler function is defined to respond to all TrackingManager events.
  7. Additional handler functions are defined to respond to the component event listeners added in the initViewer() function.
  8. An event listener is added to the ParameterManager object that designates the initViewer() function as the handler to call when the Scene7 SDK is loaded and ready.
  9. Finally, the init() method is called on the ParameterManager object to start the viewer.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width" /> <title>TrackingManager Component</title> <!-- To run this example locally you need to replace this with an absolute SDK path. For more information check the HTML5 Viewers SDK User Guide or the examples included in the package. --> <script language="javascript" type="text/javascript" src="../js/s7sdk/utils/Utils.js"></script> <script language="javascript" type="text/javascript"> s7sdk.Util.lib.include('s7sdk.image.ZoomView'); s7sdk.Util.lib.include('s7sdk.common.Container'); s7sdk.Util.lib.include('s7sdk.common.Button'); </script> <style type="text/css"> .s7zoomview { top: 0px; left: 0px; height: 400px; width: 280px; } .s7zoominbutton{ position: absolute; top: 375px; left: 10px; width: 25px; height: 25px; z-index: 5000; } .s7zoomoutbutton { position: absolute; top: 375px; left: 250px; width: 25px; height: 25px; z-index: 5000; } </style> </head> <body> <div style="position:absolute;top:440px;left:0px;height:200px;width:600px;"> <code> <h4>Events</h4> <div id="trackingDiv"></div> </code> </div> <script language="JavaScript" type="text/javascript"> var params, container, zoomView, zoomInButton, zoomOutButton, trackingManager; // Initialize the SDK s7sdk.Util.init(); // Create ParameterManager instance to handles modifiers params = new s7sdk.ParameterManager(); // Define the function that initializes the viewer function initViewer(){ // Set hardcoded modifiers (not required when values are specified on the url) params.push("serverurl", ""); params.push("asset", "demo/bedroom.tif"); params.push("disabletracking", "PAN"); // do not track PAN events // Create the TrackingManager object trackingManager = new s7sdk.TrackingManager(null, params, null); // Create the Container component object container = new s7sdk.Container(null, params, "s7container"); // Create the ZoomView component object zoomView = new s7sdk.image.ZoomView( container, params, "zoomView"); // Create the ZoomInButton component object zoomInButton = new s7sdk.common.ZoomInButton(container, params, "zoomInButton"); // Create the ZoomOutButton component object zoomOutButton = new s7sdk.common.ZoomOutButton(container, params, "zoomOutButton"); // Add event listener for zoom capability state changes zoomView.addEventListener(s7sdk.event.CapabilityStateEvent.NOTF_ZOOM_CAPABILITY_STATE, onZoomStateChange); // Add an event listener for zoom button click events zoomInButton.addEventListener("click", onZoomIn); zoomOutButton.addEventListener("click", onZoomOut); // Attach the ZoomView object to TrackingManager to enable tracking trackingManager.attach(zoomView); } // s7ComponentEvent function handles all the output from the SDK viewers. The user can directly access // the tracking events if lower level control is desired - see UserEvent documentation. function s7ComponentEvent(objID, compClass, instName, timeStamp, eventData) { // To demonstrate the data available, pass event data to a div var element = document.getElementById("trackingDiv"); var trackingMessages = element.innerHTML; element.innerHTML = eventData + "<BR>" + trackingMessages.substr(0, 1000); // Call the tracking support code at this point. For instance, for SiteCatalyst tracking // enabled through SPS, calling s7track would transmit the data to the tracking servers. //s7track(eventData); } // Define an event handler function to enable/disable the zoom buttons when the ZoomView state changes function onZoomStateChange(event){ if(event.s7event.state.hasCapability(s7sdk.ZoomCapabilityState.ZOOM_IN)){ zoomInButton.activate(); }else{ zoomInButton.deactivate(); } if(event.s7event.state.hasCapability(s7sdk.ZoomCapabilityState.ZOOM_OUT)){ zoomOutButton.activate(); }else{ zoomOutButton.deactivate(); } } // Define an event handler function to update the ZoomView when zoomIn is clicked function onZoomIn(event){ zoomView.zoomIn(); } // Define an event handler function to update the ZoomView when zoomOut is clicked function onZoomOut(event){ zoomView.zoomOut(); } // The ParameterManager will dispatch SDK_READY when all modifiers have been processed // and it is safe to initialize the viewer params.addEventListener(s7sdk.Event.SDK_READY, initViewer, false); // Now it is safe to process the modifiers, the callbacks have been defined // this will trigger the SDK_READY event params.init(); </script> </body> </html>
{String} containerId
Not used by TrackingManager.
{s7sdk.ParameterManager} settings
A parameter manager instance that represents the desired configuration.
{String} compId
Not used by TrackingManager.
Method Detail
attach(component, handler)
Attach the component to the TrackingManager. It is necessary to attach() a component before TrackingManager can track it.

callTrackingHandler(component, instanceName, dataString)
Format the parameters and call the actual tracking function in the user code. Unless it is necessary to track events that are not emitted by the SDK framework, this function is not needed.
UIComponent, such as ZoomView or SpinView.
Instance name passed to component constructor. Used to correlate results.
Event data in a comma-separated string format.

Detach the component from the TrackingManager. Turn off all event listeners.

Disposes the component.

setCallback(callbackFunction, callbackContext)
TrackingManager calls the global function s7ComponentEvent() unless TrackingManager.setCallback is used to provide an alternative callback function. The callback takes the same parameters that s7ComponentEvent take.
{function} Callback function to be called for each event.
{Object} Optional object containing callbackFunction.

Documentation generated by JsDoc Toolkit 2.4.0 on Thu Jan 30 2020 16:40:37 GMT+0200 (EET)