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

Size: px

Start display at page:

Download "Table of Contents. Overview... 2. Supported Platforms... 3. Demos/Downloads... 3. Known Issues... 3. Note... 3. Included Files..."

Barry Underwood
8 years ago
Views:

2 Table of Contents Overview... 2 Supported Platforms... 3 Demos/Downloads... 3 Known Issues... 3 Note... 3 Included Files... 5 Implementing the Block... 6 Configuring The HTML5 Polling Block... 6 Setting Up the Block in Sizmek MDX... 8

3 Overview The Sizmek HTML5 Polling Block allows you to create a poll in your HTML5 ad by leveraging an existing Rich Media ad and the Data Capture component. You can implement this feature by setting up a Rich Media ad in the Sizmek MDX platform and creating a form at the ad campaign level. The template works as follows: the user can answer one question, the data is saved in the campaign form and after the user answers the question the poll results are displayed in bar graph form. Copyright 2014 Sizmek. All rights reserved. 2

4 Supported Platforms Platform Windows Mac Supported Version Internet Explorer 9+, Firefox, Chrome, Safari Firefox, Chrome, Safari Supported Version Platform iphone ipad Android ios 5.0 and later ios 5.0 and later Android 2.3 and later( including tablets) Demos/Downloads To download the Block, view a demo of the Block 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 For the purpose of this demo, canvas was used and is not supported in IE8. Note To save data in the Data Capture form, the accompanying Rich Media ad must be published in a placement and served in ad tags. The data is only recorded after the campaign starts. No data will be recorded prior to the campaign start date. Copyright 2014 Sizmek. All rights reserved. 3

5 The polling results are in XML format, which is built in the Sizmek MDX platform (only for forms that have fields where the polling checkbox is checked). The XML file can take up to 1 hour to update. This Block requires an additional script file for bar graph and is included in template. Copyright 2014 Sizmek. All rights reserved. 4

6 Included Files Filename css/block_styles.css images/defaultimage300x250.gif js/chart.min.js js/polling_block.js index.html Description Sizmek Block Stylesheet Sizmek Block default backup Image and demo background Sizmek Block Javascript file that handles the bar graph construction. Sizmek Block Javascript file. Sizmek Block HTML file. Copyright 2014 Sizmek. All rights reserved. 5

7 Implementing the Block Before you begin, make sure you have the following resources available: Polling Banner Block files o Download the Polling Banner Block and follow the instructions to build a Rich Media Data Capture ad with working form. This is required for the HTML5 Polling Block. HTML5 Polling Block files o Once the above steps have been taken, proceed to the next section. Configuring The HTML5 Polling Block The HTML5 Polling Block allows the developer to query users, save responses to a database and display the results in the form of a bar graph. To implement the Polling Block, add the following code to your creative. The following is example code only and contains temporary ad_id and campaign_id data. <script type="text/javascript" src="js/chart.min.js"></script> <script type="text/javascript" src="js/polling_block.js"></script> <script type="text/javascript"> var fields = [ 'Rarely','Sometimes','Never' ]; var block_config = { options: { ad_id: ' ', campaign_id: '12345', form_name: 'html5_polling_block', reply_ 'your@ .com', fields: fields, fill: '#0d2a4d', stroke: '#0d2a4d', highlight_fill: '#bacae4', highlight_stroke: '#bacae4' } }; </script> var new_polling_block = new polling_block (block_config); Copyright 2014 Sizmek. All rights reserved. 6

8 Config object options: Method Name ad_id campaign_id form_name reply_ fields fill stroke highlight_fill highlight_stroke Description Ad id of the supporting Rich Media ad with Data Capture form attached. Campaign id of the supporting Rich Media ad with Data Capture form attached. Name of form attached to supporting Rich Media ad. Address for Poll Reply . Pass user address, from form field, to script. Does not apply for Polling Feature template. An array of the acceptable fields used in the poll. Color of the bar graph fill. Color of bar graph stroke. Color of bar graph fill during rollover. Color of bar graph stroke during rollover. Important Method names are listed below: Method Name updateform(_vote) loadxml handlexml buildchart(_mylabels, _mydata) Description Handles Data Capture form submission. Accepts the poll value of the survey. Loads the Poll Data XML file from the server. Parses the XML response. Accepts labels and values from the XML response and builds a bar chart. Copyright 2014 Sizmek. All rights reserved. 7

9 Setting Up the Block in Sizmek MDX Note: Make sure you have successfully created a Rich Media ad with Data Capture form before proceeding. It is also recommended that you create a unique Data Capture form to avoid duplicate data Open the index.html file in your HTML5 Workspace Folder. 2. Locate the options object with the block_config object and update the ad_id variable with the ad id from your supporting Rich Media ad. 3. Update the campaign_id with the campaign id your Rich Media ad is attached to. 4. Update form_name with a unique form name from your Rich Media ad. 5. Update the fields array to reflect the names of the fields used in your poll. 6. Update fill, stroke, highlight_fill and highlight_stroke if necessary optional. 7. Save index.html. 8. Zip and upload HTML5 Workspace Folder. 9. From the main menu, select Shortcuts > Create New Ad > Create a New Ad. 10. In the Ad Name field, enter the unique name of your ad. 11. From the Ad Format drop-down list, select HTML5 Polite Banner. 12. Choose the HTML5 Workspace Folder you uploaded to platform. 13. Choose Default Image. 14. Save. Copyright 2014 Sizmek. All rights reserved. 8

SizmekFeatures. HTML5JSSyncFeature

SizmekFeatures. HTML5JSSyncFeature Features HTML5JSSyncFeature Table of Contents Overview... 2 Supported Platforms... 2 Demos/Downloads... 3 Note... 3 For Tags Served in iframes... 3 Features... 3 Use Case... 3 Included Files... 4 Implementing