Spotify Homepage Takeover

Transcription

1 Formats Spotify Homepage Takeover Build Guide

2

3 Table of Contents Overview... 2 Supported Platforms... 3 Known Issues... 3 Implementing a Spotify Homepage Takeover... 3 Included Template Files... 3 HTML... 3 Styles... 3 Scripts... 4 Images... 4 Videos (when applicable)... 4 Customizing an Spotify Homepage Takeover... 4 EB Video Module... 5 Testing Your Spotify Homepage Takeover... 5 Setting Up a Spotify Homepage Takeover in the Sizmek Platform... 5 Interactions... 6 General... 6 Video... 6 Change Log... 6

4 Overview The Spotify Homepage Takeover is an interactive banner ad that works within the Spotify desktop application for Windows and Mac. The ad loads an image and a video as well as UserAction and ClickThrough Banner Size 800x235 Video Yes buttons. The template can be customized and extended to include a wide array of interactive features. Clicking the UserAction button sends a custom interaction that is tracked in reports. Clicking on the ClickThrough button opens up an advertiser s site. The following image shows the template: Here is a sample of the template in the Spotify app: The blue background image surrounding the ad is controlled by Spotify. Copyright 2014 Sizmek, Inc. All rights reserved. 2

5 Supported Platforms Platform Windows Mac OS X Supported Versions 7 and 8, desktop application only Latest, desktop application only Demos/Downloads To download a template, view a demo of the Spotify Homepage Takeover template or get the latest copy of the build guide, please visit the Sizmek Template Portal in Quickbase. In the future, it may be added to the Formats & Features tab of the Creative Zone. For more information, contact your Creative Development Specialist Known Issues The full screen video button is hidden because it is not supported in the Spotify application Implementing a Spotify Homepage Takeover Before you Begin Make sure you have the following resources available: A Spotify Homepage Takeover format workspace. Download the workspace from Creative Zone and extract it, preserving the directory structure. Included Template Files HTML The following HTML5 template files are included: index.html The ad HTML file. Styles The following CSS template files are included: style.css The style sheet for the ad and its elements. Copyright 2014 Sizmek, Inc. All rights reserved. 3

6 Scripts The following JavaScript files are included: script.js Code required for the format. Images The following image template files are included: images/backup.jpg images/logo.png images/poster.jpg The image if the ad is not displayed. The Sizmek logo. The poster image for the video (video template only) Videos (when applicable) The following video template files are included: videos/video.ogv videos/video.webm The ogv video The webm video Note that the Spotify desktop application only supports ogv and webm formats. Only one of these formats is required. You do not need to supply both. Customizing an Spotify Homepage Takeover All of the Spotify Homepage Takeover functionality is programmed in the template files. At minimum, the only changes you will need to make are to the loaded image and video assets and their respective styles. Note: When updating or replacing images or videos, make sure to also update references to their filenames and dimensions found in index.html and style.css as necessary. To update the layout and design of a template, open the index.html and style.css files in a text editor. The functions available include: Function Name checkifa startad Ensures EB is initialized before starting the ad. Starts the ad. Copyright 2014 Sizmek, Inc. All rights reserved. 4

7 clickthrough useraction Handles the click-through button click. Handles the user-action button click. EB Video Module Templates that contain video load a video module. This module allows the video player to track video interactions and metrics. The code that loads this module looks like the code below. <script type="text/javascript">ebmodulestoload = ['Video'];</script> This module already exists in the Spotify Homepage Takeover templates with video. If you do not need this functionality, you can remove video module by deleting Video from the EBModulesToLoad array. Testing Your Spotify Homepage Takeover To test your ad locally, open index.html in a web browser and walk through the ad experience. You can use a webdebugging tool to view the source code and any data being sent or received by the ad. Setting Up a Spotify Homepage Takeover in the Sizmek Platform To set up a Spotify Homepage Takeover in the Sizmek platform: 1. Archive the workspace into a new ZIP file, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program. 1. In the Sizmek platform, under Creative Assets, create a new Workspace by uploading the ZIP file. 2. Under the Ads section, create a new ad. 3. Fill out the form. Set Ad Format to Spotify Homepage Takeover. Note: On the Sizmek Platform, your user account will need access to the Spotify Homepage Takeover format in the list of available custom formats. If you do not have access to this format, please reach out to Support to gain permissions for this format 4. Save the ad. 5. Create a new placement for the ad. Fill out the form. Set the Placement type to In Banner and the Banner size to the size of your ad. After you ve saved your placement, you can then generate preview tags to test on your web site. Copyright 2014 Sizmek, Inc. All rights reserved. 5

8 Interactions General Name ebadduration ebuserinteraction ebabovethefold ebabovethefoldduration Total time that the ad was shown in the current impression User interacted with the ad (unique per impression) Ad was displayed on screen without scrolling (unique per impression) Time that the ad was above the fold Video Name ebuniquevideostarted ebvideostarted eb25per_played eb50per_played eb75per_played ebvideofullplay ebvideounmuted ebvideopause ebvideoreplay ebvideoplayduration ebuserinitiatedvideo ebvideoassetduration Video playback has started (unique) Video playback has started (sent every time) Video has played up to the 25% position Video has played up to the 50% position Video has played up to the 75% position Video has played up to completion Sent when video playback begins if video is unmuted User has paused the video playback Video is being replayed after being played at least once before Total time all videos played within the ad User has initiated viewing the video Total reported playback time for each individual video Change Log Release: September 22, 2014 First release Copyright 2014 Sizmek, Inc. All rights reserved. 6

9 Notice The information contained in this document is proprietary and confidential to Sizmek and/or any of its affiliated companies. Disclosure, copying, reproduction, storing or any use of this document or any part thereof without the express prior, written consent of Sizmek or its authorized representatives is strictly prohibited. The information furnished in this document is believed to be accurate and reliable. However no responsibility is assumed by Sizmek for the use of this information. Sizmek reserves the right to make changes to the information included in this document at any time and without notice. Copyright 2014 Sizmek. All rights reserved. Flash is either a registered trademark or trademark of Adobe Systems Incorporated in the United States and/or other countries. Trademark Note: Sizmek, the Sizmek logo, Sizmek Rich Media, Sizmek Mobile, Sizmek Video, Sizmek Channel Connect, Sizmek Workshop, etc. are trademarks and/or registered trademarks of Sizmek. All other trademarks are the property of their respective owners.