Table of Contents. Overview Supported Platforms Demos/Downloads Known Issues Note Included Files...

Transcription

1

2 Table of Contents Overview... 2 Supported Platforms... 3 Demos/Downloads... 3 Known Issues... 3 Note... 4 Included Files... 5 Implementing the Block... 8 Configuring The HTML5 MouseTracker Basic Feature... 8 Configuring The HTML5 MouseTracker Eye Movement Feature... 9 Configuring The HTML5 MouseTracker Follower Feature Configuring The HTML5 MouseTracker Horizontal Pan Feature Configuring The HTML5 MouseTracker Vertical Pan Feature Configuring The HTML5 MouseTracker Hotspot Banner Feature Configuring The HTML5 MouseTracker Hotspot Site Feature Setting Up the Block in Sizmek MDX... 16

3 Overview The HTML5 MouseTracker Feature allows you to track mouse movements over an entire web page, and more importantly, outside of the ad iframe to the Parent page. You can use the MouseTracker Feature for basic use cases, for example when you want to create a compass or a hotspot in your ad, or you can use it for more advanced cases, for example when you want to create a mouse follower or a panning tool. The MouseTracker Feature requires the use of a custom script and comes with seven most-common scenario templates: 1. Basic 2. Horizontal Pan 3. Vertical Pan 4. HotSpot Site 5. HotSpot Banner 6. Mouse Follower 7. Eyes Movement Copyright 2014 Sizmek. All rights reserved. 2

4 Supported Platforms Platform Windows Mac Supported Version Internet Explorer 9+, Firefox, Chrome, Safari Firefox, Chrome, Safari Demos/Downloads To download the Feature, view a demo of the Feature or get the latest copy of the build guide, please visit the Formats & Blocks tab of the Creative Zone. For more information, contact your Creative Development Specialist. Known Issues Sizmek does not support HTML5 ads in IE browsers lower than version 9. Note This Feature requires the use of a custom script to allow the HTML5 ad to communicate with the parent page. The Feature will not work without this script. o sys.com/burstingres/customscripts/pl_html5_mousetracker.js Both the Horizontal and Vertical Pan templates require the use of Greensock Tween Library, 2 files. o Copyright 2014 Sizmek. All rights reserved. 3

5 o Copyright 2014 Sizmek. All rights reserved. 4

6 Included Files Basic Template Filename css/feature_styles.css images/defaultimage300x250.gif js/mousetracker.js index.html Sizmek Block Stylesheet Sizmek Block default backup Image and demo background Sizmek Block Javascript file that handles the bar graph construction. Sizmek Block HTML file. Eye Movement Template Filename css/feature_styles.css images/defaultimage400x300.gif images/bunny.jpg Sizmek Block Stylesheet Sizmek Block default backup Image and demo background Background Image of Bunny face. images/eye1.png Image for Eye 1 images/eye2.png Image for Eye 2 js/mousetracker.js index.html Sizmek Block Javascript file that handles the bar graph construction. Sizmek Block HTML file. Follower Template Filename css/feature_styles.css images/defaultimage400x300.gif Sizmek Block Stylesheet Sizmek Block default backup Image and demo background Copyright 2014 Sizmek. All rights reserved. 5

7 images/sizmek_logo.jpg js/mousetracker.js index.html Image used for the element that follows the mouse. Sizmek Block Javascript file that handles the bar graph construction. Sizmek Block HTML file. Horizontal Pan Template Filename css/feature_styles.css images/defaultimage400x300.gif images/sizmek_logo.gif js/mousetracker.js index.html Sizmek Block Stylesheet Sizmek Block default backup Image and demo background Image used for the element that pans with the mouse. Sizmek Block Javascript file that handles the bar graph construction. Sizmek Block HTML file. Vertical Pan Template Filename css/feature_styles.css images/defaultimage400x300.gif images/sizmek_logo.gif js/mousetracker.js index.html Sizmek Block Stylesheet Sizmek Block default backup Image and demo background Image used for the element that pans with the mouse. Sizmek Block Javascript file that handles the bar graph construction. Sizmek Block HTML file. Hotspot Banner Template Filename css/feature_styles.css Sizmek Block Stylesheet Copyright 2014 Sizmek. All rights reserved. 6

8 images/defaultimage400x300.gif images/target.jpg images/target_back.jpg js/mousetracker.js index.html Sizmek Block default backup Image and demo background Image used for both the element that acts as the hotspot target and that fades in relation to the mouse. Background image for target. Sizmek Block Javascript file that handles the bar graph construction. Sizmek Block HTML file. Hotspot Site Template Filename css/feature_styles.css images/defaultimage400x300.gif js/mousetracker.js index.html Sizmek Block Stylesheet Sizmek Block default backup Image and demo background Sizmek Block Javascript file that handles the bar graph construction. Sizmek Block HTML file. Copyright 2014 Sizmek. All rights reserved. 7

9 Implementing the Block Before you begin, make sure you have the following resources available: The HTML5 MouseTracker files The HTML5 MouseTracker Feature is accompanied by seven (7) templates: 1. The MouseTracker Basic This template allows you to retrieve mouse positions and calculate angles from two different points. 2. The MouseTracker Eye Movement This template allows you to add eye movement or to rotate an object according to the mouse position. 3. The MouseTracker Follower This template allows you to add an html element that follows after the mouse movement. 4. The MouseTracker Horizontal Pan This template allows you to add an html element that pans horizontally according to the mouse movement. 5. The MouseTracker Vertical Pan This template allows you to add an html element that pans vertically according to the mouse movement. 6. The MouseTracker Hotspot Banner The template allows you to set a hotspot within your banner and get the distance of the mouse to the hotspot. 7. The MouseTracker Hotspot Site This template allows you to set a hotspot on the publishers site and get the distance of the mouse from the hotspot. Configuring The HTML5 MouseTracker Basic Feature The HTML5 MouseTracker Basic Feature gives the developer access to the x and y position of the mouse and the x and y position of the banner in relation to the parent Usage: <script type="text/javascript" src="js/mousetracker.js"></script> <script type="text/javascript"> var new_mousetracker = new mousetracker (); </script> Important Methods within mousetracker.js: Copyright 2014 Sizmek. All rights reserved. 8

10 handlemousedata This method receives four parameters from the custom script: mousex, mousey, bannerx, bannery Important Parameters: Parameter mousex mousey bannerx bannery X Position of the mouse relative to the parent Y Position of the mouse relative to the parent X Position of the banner relative to the parent Y Position of the banner relative to the parent Configuring The HTML5 MouseTracker Eye Movement Feature The HTML5 MouseTracker Eye Movement Feature allows the developer to add eye movement or rotate an object according to the mouse position, in relation to the parent Usage: <script type="text/javascript" src="js/mousetracker.js"></script> <script type="text/javascript"> var feature_config = { options: { eye1: 'eye1', eye2: 'eye2', eye1x: 242 } }; var new_mousetracker = new mousetracker (feature_config); </script> Config options: Copyright 2014 Sizmek. All rights reserved. 9

11 Eye1 Eye2 String - The id of the first element (eye) you wish to rotate. String - The id of the second element (eye) you wish to rotate. Important Methods within mousetracker.js: handlemousedata This method receives four parameters from the custom script: mousex, mousey, bannerx, bannery, deg1, deg2 Important Parameters: Parameter mousex mousey bannerx bannery deg1 deg2 X Position of the mouse relative to the parent Y Position of the mouse relative to the parent X Position of the banner relative to the parent Y Position of the banner relative to the parent Degree of rotation relative to the first eye position. Degree of rotation relative to the second eye position. Configuring The HTML5 MouseTracker Follower Feature The HTML5 MouseTracker Follower Feature allows the developer to add a html element that follows after the mouse movement in relation to the parent Usage: Copyright 2014 Sizmek. All rights reserved. 10

12 <script type="text/javascript" src="js/mousetracker.js"></script> <script type="text/javascript"> var feature_config = { options: { sprite: 'sprite', rotate: true, speed: 25} }; var new_mousetracker = new mousetracker (feature_config); </script> Config options: sprite rotate Speed String - The id of the first element you wish to follow the mouse. Boolean true or false. Enter true if you want the Div to rotate towards the mouse as it follows its position. Number how fast you want the element to follow the mouse. Lower is faster. Important Methods within mousetracker.js: handlemousedata This method receives four parameters from the custom script: mousex, mousey, bannerx, bannery Important Parameters: Parameter mousex mousey bannerx X Position of the mouse relative to the parent Y Position of the mouse relative to the parent X Position of the banner relative to the parent Copyright 2014 Sizmek. All rights reserved. 11

13 bannery Y Position of the banner relative to the parent Configuring The HTML5 MouseTracker Horizontal Pan Feature The HTML5 MouseTracker Horizontal Pan Feature allows the developer to add a html element that pans left and right along the X axis according to the mouse movement, in relation to the parent Usage: <script type="text/javascript" src="js/mousetracker.js"></script> <script type="text/javascript"> var feature_config = { options: { pan: 'pan, speed: 25} }; var new_mousetracker = new mousetracker (feature_config); </script> Config options: pan speed String - The id of the first element you wish to pan with the mouse. Number how fast you want the element to pan with the mouse. Lower is faster. Important Methods within mousetracker.js: handlemousedata This method receives four parameters from the custom script: mousex, bannerx Important Parameters: Parameter Copyright 2014 Sizmek. All rights reserved. 12

14 mousex bannerx X Position of the mouse relative to the parent X Position of the banner relative to the parent Configuring The HTML5 MouseTracker Vertical Pan Feature The HTML5 MouseTracker Vertical Pan Feature allows the developer to add a html element that pans up and down along the Y axis according to the mouse movement, in relation to the parent Usage: <script type="text/javascript" src="js/mousetracker.js"></script> <script type="text/javascript"> var feature_config = { options: { pan: 'pan, speed: 25} }; var new_mousetracker = new mousetracker (feature_config); </script> Config options: pan speed String - The id of the first element you wish to pan with the mouse. Number how fast you want the element to pan with the mouse. Lower is faster. Important Methods within mousetracker.js: handlemousedata This method receives four parameters from the custom script: mousey, bannery Important Parameters: Copyright 2014 Sizmek. All rights reserved. 13

15 Parameter mousey bannery Y Position of the mouse relative to the parent Y Position of the banner relative to the parent Configuring The HTML5 MouseTracker Hotspot Banner Feature The HTML5 MouseTracker Hotspot Banner Feature allows the developer to set a hotspot within the banner and get the distance of the mouse to the hotspot in relation to the parent Usage: <script type="text/javascript" src="js/mousetracker.js"></script> <script type="text/javascript"> var new_mousetracker = new mousetracker ( target ); </script> Important Methods within mousetracker.js: handlemousedata This method receives four parameters from the custom script: mousex, mousey, bannerx, bannery, browserw, browserh Important Parameters: Parameter mousex mousey bannerx X Position of the mouse relative to the parent Y Position of the mouse relative to the parent X Position of the banner relative to the parent Copyright 2014 Sizmek. All rights reserved. 14

16 bannery browserw browserh Y Position of the banner relative to the parent Parent window width. Parent window height. Configuring The HTML5 MouseTracker Hotspot Site Feature The HTML5 MouseTracker Hotspot Banner Feature allows the developer to set a hotspot within the publisher s page and get the distance of the mouse to the hotspot. Usage: <script type="text/javascript" src="js/mousetracker.js"></script> <script type="text/javascript"> var new_mousetracker = new mousetracker ( target ); </script> Important Methods within mousetracker.js: handlemousedata This method receives four parameters from the custom script: mousex, mousey, bannerx, bannery, browserw, browserh, targetx, targety Important Parameters: Parameter mousex mousey bannerx X Position of the mouse relative to the parent Y Position of the mouse relative to the parent X Position of the banner relative to the parent Copyright 2014 Sizmek. All rights reserved. 15

17 bannery browserw browserh targetx targety Y Position of the banner relative to the parent Parent window width. Parent window height. X Position of the Target within the publisher s page. Y Position of the Target within the publisher s page. Setting Up the Feature in Sizmek MDX 1. Open the index.html file in your HTML5 Workspace Folder. 2. Update options parameters within the feature_config if applicable. 3. Save index.html. 4. Zip and upload HTML5 Workspace 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. From the Ad Format drop-down list, select HTML5 Polite Banner. 8. Choose the HTML5 Workspace Folder you uploaded to platform. 9. Choose Default Image. 10. Go to Set up > Advanced Features > Custom JS and add the custom script Save. Copyright 2014 Sizmek. All rights reserved. 16

18