Overview

Introduction and Screenshots

The 360 Viewer Ad Feature is meant to provide a simple, lean player with which developers can upload & view 360 images or video in an ad with an interface that allows them to navigate the full experience of the content.

The feature will provide the developer the ability to apply their content, be it properly formatted images or video, to the 360 Viewer script and view that content in a 360° simulated environment. Additionally, this Ad Feature provides video reporting and viewing events. The setup provides the developer with control over where the viewer will be placed, the positioning of the camera, look controls both drag and pan and much more. 

The below documentation provides detailed documentation on how to set up and customize your 360 experience. 

360 Image and Video

   

360 Image and Video in VR Mode

   

Platform	Supported Version
Windows	Edge, Firefox, Chrome
Mac	Firefox, Chrome, Safari
iPhone	iOS 10.0 and later
iPad	iOS 10.0 and later
Android	Android 6 and later( including tablets)

Assets

Workspaces Available

The 360 Viewer Ad Feature includes one Workspace directory built using the HTML5 Deluxe Banner. File listed below do not include files specific to the Deluxe Banner. 

Included Workspace Files

Filename	Description
config.js	Sizmek Ad Manifest file
images/background.jpg	360 Viewer Demo background image
images/default.jpg	Default image file
images/down.png, left.png, right.png, up.png	Pan controls images
images/fullscreen.png, fullscreen2.png	Fullscreen open and close button images
images/logo_white.svg	360 Viewer Demo logo images
images/mute.png, unumute.png	Mute/UnMute Button images for video
images/pano.jpg	360 Viewer Demo Example 360 image
images/play.png, pause.png	Play/Pause Button images for video
images/reset.png	Reset Button Image
index.html	360 Viewer demo HTML file
scripts/aframe-min.js	360 Viewer AFrame Library Javascript file
scripts/bluebird.min.js	360 Viewer Bluebird Polyfill Javascript file
scripts/threeSixtyViewer.js	360 Viewer Javascript file
styles/style.css	360 Viewer CSS Stylesheet
videos/pano.mp4	360 Viewer Demo example video

 

Implementing the Ad Feature

Adding the Ad Feature to Your Workspace Code

Prerequisite

Before you begin, make sure you have the following resources available:

• 360 Viewer Ad Feature Files from Showcase.
• 360 formatted image or video (photosphere or videosphere)

Procedure

The following steps illustrate how to add the 360 Viewer Ad Feature to your creative Workspace.

1. Add the EB API and Video Module include to the head of your index.html file. This must be added before the adkit include
   

   Note: File paths have been shortened for simplification.

    <script> EBModulesToLoad = ['Video', 'EBAPI']; </script>
 

2. Include the three 360 Viewer JavaScript includes for the Bluebird polyfill (only needed for IE11), AFrame and the 360 Viewer Feature script.

    <script type="text/javascript">
        if(/MSIE d|Trident.*rv:/.test(navigator.userAgent))
        document.write('<scr' + 'ipt src="scripts/bluebird.min.js"></scr' + 'ipt>');
    </script>
    <script src="scripts/aframe.min.js"></script>
    <script src="scripts/threeSixtyViewer.js"></script> 

3. Include the Adkit JavaScript include after the feature script.

    <script type="text/javascript" src="http://ds.serving-sys.com…/adkit.js"></script>
 

4. Include the 360 Viewer Ad stylesheet. 

    <link type="text/css" rel="stylesheet" href="styles/styles.css"/>

5. Add and edit the following code to your HTML file's body element. For a full list of options, see the 360 Viewer Configurations table below: 

    <script type="text/javascript">

        var config = {
            container: 'container',
            initSource: 'image',
            videoSource: 'videos/pano.mp4',
            imageSource: 'images/pano3.jpg'
        };
 
         var my360Viewer = new ThreeSixtyViewer(config); 
 
    </script>

5. Add Event Listeners to subscribe to 360 Viewer events. For a full list of events, see the Available Events table below: 

    <script type="text/javascript">

        var my360Viewer = new ThreeSixtyViewer(config); 
        
        my360Viewer.addEventListener("onPlay", handleOnPlay, false);
        
        function handleOnPlay(e) {
            console.log('Play Video Event', e.threeSixtyViewerAPI);
        }
 
    </script>

6. Add any API methods to necessary. For a full list of methods, see the Available Methods table below: 

    <script type="text/javascript">

        var my360Viewer = new ThreeSixtyViewer(config);

        my360Viewer.loadImage();
 
    </script>

360 Viewer Configurations

var	type	Description	Default
container	String -  *required	The element id of the div you wish to place the 360 Viewer object
initSource	String	Determines whether you load 360 Image or Video on Initial Load	'image'
videoSource	String or Array	String - file path to singular video file. ex: 'videos/pano.mp4' Array - array of file path and type  ex: [ [ 'videos/pano2.webm', 'video/webm' ], [ 'videos/pano.mp4', 'video/mp4' ], ]	if no entry, 360 Video will not be loaded
enableVideoControls	Boolean	true/false - if set to true, play, pause and mute buttons will be added to the video	false
videoAutoPlay	Boolean	true/false - if set to true, the video will autoplay when autoplay is available	false
videoLoop	Boolean	true/false - if set to true, the video will loop upon completion	false
videoMuted	Boolean	true/false - if set to true, audio for video will start muted	false
imageSource	String	file path to the singular image file	if no entry, 360 Image will not be loaded
rotateTo	String	Coordinates for the initial rotation position ex: "0.126 -0.189 4.99"	"0.126 -0.189 4.99"
enableAutoPan	Boolean	true/false - if set to true or left it will pan left if set to right it will pan right and if set to false or undefined it will not pan. Interacting with the scene disables auto pan	false
enablePanControls	Boolean	true/false - if set to true, pan controls will show	false
enableKeyControls	Boolean	true/false - if set to true, the user can use keyboard arrows to control panning	false
fieldofView	Integer	30-120, sets the depth of the field of view, 30 is closer and 120 is zoomed out further from the scene	75

Available Methods

Method Name	Description
playVideo	Start Video Player
pauseVideo	Pause Video Player
mute	Mute the Video Player
unMute	unMute the Video Player
resetViewer	Reset the camera to the initial viewing position
enterFullscreen	Instructs 360 Viewer to go fullscreen
exitFullscreen	Instructs 360 Viewer to exit fullscreen
loadImage	Loads 360 Image into the viewer
loadVideo	Loads 360 Video into the viewer
initVR	Instructs 360 Viewer to enter VR mode when on mobile devices. On desktop, 360 Viewer will enter fullscreen mode
exitVR	Instructs 360 Viewer to exit VR mode when on mobile devices. On desktop, 360 Viewer will exit fullscreen mode
panViewLeft	Instructs Camera to pan 1 degree to the left
panViewRight	Instructs Camera to pan 1 degree to the right
panViewUp	Instructs Camera to pan 1 degree to up
panViewDown	Instructs Camera to pan 1 degree to down
add360Viewer	Add new 360 Viewer to the container div
remove360Viewer	Removes existing 360 Viewer from DOM
resetViewPercent	Resets all viewed quadrants to false

Available Events

Event Name	Description
notSupported	Fired when viewed in browsers that do not support this feature
onEnterFullscreen	Fired when 360 Viewer enters fullscreen mode
onExitFullscreen	Fired when 360 Viewer exits fullscreen mode
onEnterVR	Fired when 360 Viewer enters VR mode
onExitVR	Fired when 360 Viewer exits VR mode
onPlay	Fired when 360 Viewer starts playing video
onPause	Fired when 360 Viewer pauses the video
onEnded	Fired when 360 Viewer video reaches the full duration
onError	Fired when 360 Viewer video fails to play
onTimeUpdate	Fired when 360 Viewer video playhead updates.
onResize	Fired when 360 Viewer is resized
onPanLeft	Fired when 360 Viewer is panned left
onPanRight	Fired when 360 Viewer is panned right
onPanUp	Fired when 360 Viewer is panned up
onPanDown	Fired when 360 Viewer is panned down
onStartDrag	Fired when the user starts to drag the 360 Viewer to a new camera position
onStopDrag	Fired when the user stops dragging the 360 Viewer to a new camera position
onView25Percent	Fired when the user has viewed at least one quadrant
onView50Percent	Fired when the user has viewed at least two quadrants
onView75Percent	Fired when the user has viewed at least three quadrants
onView100Percent	Fired when the user has viewed all quadrants
onReset	Fired when camera position has been reset to the initial position

 

Setting Up the 360 Viewer Ad Feature in the Sizmek Platform

Sizmek MDX Setup

Archive the 360 Viewer Workspace into Zip files, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.

1. Zip and upload the HTML5 Workspace Folder found in the template folder.
2. Log into the MDX2.0 Platform.
3. Click on Manage > Creative Assets, and upload your Workspace to the appropriate asset folder.
4. (Optional) Rename the folder.
5. From the main menu, select Shortcuts > Create New Ad > Create a New Ad.
6. In the Ad Name field, enter the unique name of your ad.
7. Choose a format from the format type drop-down.
8. Choose the HTML5 Workspace Folder you uploaded to the platform.
9. Save. 

Sizmek Advertising Suite Setup

1. Zip the HTML5 Workspace Folder found in the template folder.
2. Log in to the Sizmek Advertising Suite.
3. Click the Creative menu item > Asset Library, and upload your Workspace to the appropriate asset folder.
4. (Optional) Rename the folder.
5. Click the Creative menu item > Ads and click the New Ad button and select Blank Ad.
6. In the Ad Name field, enter the unique name of your ad.
7. Choose a format from the Ad Format drop-down.
8. Under Main Assets select the Workspace folder and default image.
9. Save. 

 Known Issues

• Secure protocol is required when using device orientation
• 360 Viewer is not supported in IE11
• 360 Viewer may blink white before rendering the scene as the canvas is created
• 360 Viewer may blink on resizing on slower devices as the canvas is redrawn
• iOS does not support fullscreen functionality 
• Samsung native browsers on Android incorrectly calculate height and can lead to positioning issues when in fullscreen mode
• iOS 12.1 and above by default restrict access to device orientation data. This setting can be turned off in Safari settings.
• iOS 13 does not support 360 Video play and it's shown the video in black
• The newest Chrome browser on Android does not support VR feature
• Local preview is not supported because it's blocked by CORS policy​
• This feature uses A-frame v0.8.2, and will not contain any updates/changes added in newer releases of A-frame.

Change Log

October 12, 2018

Initial Release

 

July 27, 2020  v1.0.3

- Hotfix: The Feature was not loaded correctly

- Adding userInteractionsCounters to track some events