Adobe Experience Viewers HTML5 SDK API Documentation 

Namespaces

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:

EventDescriptionComponents
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, Video360Player, SmartCropVideoPlayer
CURRENT_TIMEEmitted each time the current video time is changed.RecutPlayer, VideoPlayer, Video360Player, SmartCropVideoPlayer
PAUSEEmitted when pause button is clicked.RecutPlayer, VideoPlayer, Video360Player, SmartCropVideoPlayer
STOPEmitted when stop method is invoked programattically.RecutPlayer, VideoPlayer, Video360Player, SmartCropVideoPlayer
MILESTONEShould be emitted when the video has played to 25%, 50%, 75% and 100%.VideoPlayer, Video360Player, SmartCropVideoPlayer
MUTEEmitted when mute button is clicked.VideoPlayer, Video360Player, SmartCropVideoPlayer
UNMUTEEmitted when unmute button is clicked.VideoPlayer, Video360Player, SmartCropVideoPlayer
REPLAYEmitted when play button is clicked after video has ended.VideoPlayer, Video360Player, SmartCropVideoPlayer
PLAYBACK_COMPLETEEmitted when video playback is completeVideoPlayer, Video360Player, SmartCropVideoPlayer
PLAYBACK_ERROREmitted when error occurs during video playbackVideoPlayer, Video360Player, SmartCropVideoPlayer
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
SOCIAL_SHARINGEmitted each time when the user clicks an social share button.Share
FULLSCREENEmitted each time when the user clicks an fullscreen button.Container
UN_FULLSCREENEmitted each time when the user clicks an un-fullscreen button.Container
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:

ModifierSyntaxDescriptionDefault
disabletrackingevent1[,event2[,...]]Events not to track.
enabletrackingevent1[,event2[,...]]Events to track.LOAD,SWAP,SWATCH,PAGE, PLAY,PAUSE,STOP,MILESTONE, HREF,ITEM,TARG,ZOOM,SPIN,PAN,BANNER, INTERACTIVE_SWATCH

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(component)
Detach the component from the TrackingManager.
 
dispose()
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 Adobe Experience Viewers HTML5 SDK is linked to the page and the required s7sdk components are included in the document head.
    2. 

  2. CSS Styles are defined in the document head to control the appearance of the ZoomView and button components.
    3. 

  3. The s7sdk.Util.init() method is called to initialize the SDK.
    4. 

  4. A ParameterManager object is created to handle component modifiers for the viewer.
    5. 

  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. 

  6. A required s7ComponentEvent() handler function is defined to respond to all TrackingManager events.
    7. 

  7. Additional handler functions are defined to respond to the component event listeners added in the initViewer() function.
    8. 

  8. An event listener is added to the ParameterManager object that designates the initViewer() function as the handler
to call when the Adobe Experience Viewers HTML5 SDK is loaded and ready.
    9. 

  9. Finally, the init() method is called on the ParameterManager object to start the viewer.
    10. 


<!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 Adobe Experience Viewers HTML5 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", "https://s7d1.scene7.com/is/image");
                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 Dynamic Media Classic, 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>
Parameters:
{String} containerId
Not used by TrackingManager.
{s7sdk.ParameterManager} settings
A parameter manager instance that represents the desired configuration.
{String} compId
Not used by TrackingManager.
See:
s7sdk.event.UserEvent
Method Detail
attach(component, handler)
Attach the component to the TrackingManager. It is necessary to attach() a component before TrackingManager can track it.
Parameters:
component
handler
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.
Parameters:
component
UIComponent, such as ZoomView or SpinView.
instanceName
Instance name passed to component constructor. Used to correlate results.
dataString
Event data in a comma-separated string format.
detach(component)
Detach the component from the TrackingManager. Turn off all event listeners.
Parameters:
component
dispose()
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.
Parameters:
callbackFunction
{function} Callback function to be called for each event.
callbackContext
{Object} Optional object containing callbackFunction.
Documentation generated by JsDoc Toolkit 2.4.0 on Wed May 15 2024 09:55:10 GMT-0000 (UTC)