Follow

Overview

Use this workflow to make a Tumult Hype HTML5 Single Expandable ad Sizmek compatible.

If you are building a special format, please contact your creative account manager, or local Sizmek Creative support office before proceeding.

Note: This guide is targeted for creating an HTML5 Singel Expandable ad. To build a Standard or Polite ad, see Standard and Polite banners.

The workflow is:

  1. Create banner and panel scenes.
  2. Position banner and calculate EB.initExpansionParams.
  3. Create expand and collapse buttons.
  4. Add click-through and/or custom interactions.
  5. Setup Sizmek delivery system.
  6. Prepare a Workspace folder.

Important: We have created a Hype template to help you get started quickly. To download it, click Sizmek_expandable.hypetemplate.zip.

Step 1: Create Banner and Panel Scenes

In our example, we'll start with a 300x250 banner that expands from the top left to a 600x350 panel.

  1. Let's start by creating the banner, 300x250.
  2. Create the Expandable panel, 600x350. 

Step 2: Position Banner and Calculate EB.initExpansionParams

Positioning

Position the banner and/or panel by dragging them within the stage to where you want them to sit relative to each other in an expanded state.

EB.initExpansionParams

Once the positions are set, the EB.initExpansionParams can be calculated based on the x and y coordinates of the banner.

Example call:
EB.initExpansionParams(x-offset, y-offset, totalWidth, totalHeight);

The Parameters are:

  • x-offset: Number in pixels of x offset of banner.
  • y-offset: Number in pixels of y offset of banner.
  • totalWidth: Number in pixels of Stage width.
  • totalHeight: Number in pixels of Stage height.

The x and y offset can be easily determined by the value of the (x,y) of the banner.

In our example, if we wanted the expansion to start from bottom right and expand toward top left, the params would be:
EB.initExpansionParams(300, 100, 600, 350);

We'll add the EB.initExpansionParams call in step 6.

Step 3: Create Expand and Collapse Buttons

Expand button

  1. Open the Banner scene, add a new image element, and choose your expand button graphic.
  2. With focus on the expand button, move to right hand column, and switch to Actions panel.
  3. Add a new action for On Mouse Click (Tap), then set it to Run Javascript...:
  4. Add a new function.
  5. In new function add the following code:
    Code
    EB.expand();

    This will let Sizmek know that when user clicks the button it should take necessary steps to expand, like bust out of iframe, etc.

  6. Add one more action so the ad knows what to do to expand.

    Choose Jump to Scene..., then pick the Panel scene:

Collapse button

  1. Open the Panel scene, add a new image element, and choose your collapse button graphic.
  2. With focus on the close button, move to the right hand column, and switch to Actions panel.
  3. Add a new action for On Mouse Click (Tap), then set it to Run Javascript....
  4. Add a new function.
  5. In new function add the following code:
    Code
    EB.collapse();

    This will let Sizmek know that when user clicks the button it should take necessary steps to collapse, like shrink expanded area, etc.

  6. Add one more action so the ad knows what to do to collapse.

    Choose Jump to Scene..., then pick the Banner scene:

Step 4: Add Click-through and/or Custom Interactions

Click-through

  • Create an element/button to trigger the click-through. Select the element, and add a JavaScript action as in previous steps.
  • In the code window, add the following code:
    Code
    EB.clickthrough();

Custom Interaction

  • Create an element/button to trigger custom interaction. Select the element, and add a JavaScript action as in previous steps.
  • In the code window, add the following code:
    Code
    EB.userActionCounter("myCustomInteraction");

Available Functions

Important: Because Hype bakes any JavaScript calls into its minified JavaScript output, the MDX Platform's scanner cannot read the interactions you've defined. To work around that problem, you'll need a dummy function which makes calls to these EB functions. See the attached template for more details (look in the index.html file's head section).

The EB interaction functions that can be used are:

Function Name EB Function Code
ClickThrough EB.clickthrough();
Custom ClickThrough EB.clickthrough("nameOfCustomClickthrough", "http://myclickthroughurl.com");
User Action Counter EB.userActionCounter("nameOfUserActionCounter");
Automatic Event Counter EB.automaticEventCounter("nameOfUserActionCounter");
For more information, see Sizmek HTML5 API.

Step 5: Setup Sizmek Delivery System

Hype allows you to edit the Head HTML in Document tab of right hand column. We'll use this feature to set up Sizmek's delivery system, Adkit.

EB.initExpansionParams

  1. Open the Head HTML editor:
  2. Copy and paste the following code into the Head HTML editor as shown:
    Code
    <script>
    EBModulesToLoad = ['EBCMD']; 
    function initSizmek() {
        EB.initExpansionParams(0, 0, 600, 350);
    } 
    </script>
    

    Note: When the ad is uploaded, the Sizmek platform will scan this function call from the index.html file and register the expansion parameters. The ad doesn't actually have to call the function during runtime, which is why we've wrapped it in a function that won't get called.

Adkit

  1. In the Head HTML editor, copy and paste the following code into the Head HTML editor as show below

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

Step 6: Prepare the Workspace Folder

There are a few manual steps necessary to get the ad packaged up into a workspace.

Note: For more information on how to upload Workspaces, see Overview: HTML5 Workspaces.

Export Project

  • From file menu, navigate to Export as HTML5 -> Folder...
  • Select a place to save the export
  • Name the export index.html in the Save as dialog

    It is very important to name the export file as index.html for the Sizmek platform to recognize it as the ad's starting point HTML file.

Default Image

All ads served on Sizmek must have a default image within the workspace folder.

Important: The default image must be the exact dimensions of your ad. Once uploaded to the platform, the dimensions of the ad are determined by the dimensions of the default image.

  • Navigate to your export directory
  • Copy your default image into the directory:

Zip and Upload

  1. Zip the exported directory.
  2. Create a new ad with format HTML5 Single Expandable.
  3. Use your zip file for the ad's Workspace.
  4. After creating your ad, preview it and make sure expansion works and clickthrough/custom interactions work.
Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request

Comments