PRODUCT
Follow
  • MDX: Manage > Ads > New > Design New HTML5 Ad

  • Sizmek Advertising Suite: Creative > Ads > New Ad > Ad Builder

Overview

The Ad Builder authoring tool enables you to build HTML5 ads directly in the Sizmek platform. The interface is easy to use and does not require any knowledge of HTML code. You can build your HTML5 ad from scratch or create a new ad using our built-in templates which are based on the most commonly used ad formats in the industry. After you finish building your ad, you can test, preview, and save your ads to one location in the platform.

Rules and Guidelines

  • Saving your HTML5 ad in Ad Builder automatically uploads the ad to the platform in form of an HTML5 Workspace.

  • The size of an HTML5 ad is the total size of all assets in the ad’s Workspace, at the compressed size. This includes images, the largest video, fonts, JavaScript files, HTML files, and any other files. We do not count additional assets for dynamic creative or videos. Compression is automatically applied which reduces the size of each asset type to the compressed size.

  • A Standard ad is a lightweight ad that can include the following components: Image, Text, Hotspot, HTML, Button, and Shape and is limited to 200k.

  • It is mandatory to configure a default image per ad prior to uploading the ad. The default image is limited to 200k.

  • Ad Builder is compatible with the following browsers: Google Chrome, Mozilla Firefox, and Apple Safari.

Feature List

Feature

Description

Adaptive AdsBuild a Single-Tag Adaptive HTML5 Ad

The Sizmek HTML5 Adaptive ad solution enables you to create a single HTML5 ad to be served in different placements on mobile web, mobile in-app and desktop browsers.

Smart VersioningAdd a Smart Version Item to Your Ad

You can add Smart Versioning functionality to your HTML5 ads by assigning smart items to your components in Ad Builder.

Built-in HTML5 Templates vs. building ads from scratchWork with HTML5 Templates

Ad Builder templates allow you to easily and quickly create your HTML5 ads. All that is required is to select a template and customize the different aspects of the ad to your needs.

Mobile Preview

Provides a dedicated integrated ad preview interface that allows you to preview your ads and generate QR codes to preview the ads on mobile devices.

Video Auto-Play on Mobile Device

Allows advertisers to deliver a richer ad experience on mobile ads, by playing a segment of the video automatically when the ad loads.

Components

Component

Description

Button

Adds a button to your ads

Facebook Feed

Adds social feeds to your HTML5 ads.

Facebook ShareFacebook Share Component

Shares advertiser content on their personal Facebook accounts and add a personalized message before publishing the share.

HotspotHotspot Component

Adds a hotspot to your ads.

HTMLHTML Code Component

Adds HTML5 code to your ads using an embedded HTML5 code editor.

Image

Adds images to your ads.

Media Gallery

Creates a slideshow that displays slides that can include either images, video, or HTML5 code.

PinterestPinterest Component

Shape

Adds a shape to your ad without having to prepare or upload an image.

TextText Component

Supports adding text with a wide range of fonts and text settings.

Twitter

Adds the Tweet button, with the Tweet Text contains the default "check out this ad" text.

Twitter FeedTwitter Feed Component

Adds a customizable widget that displays a list of Tweets from a user's timeline or a custom timeline.

VideoVideo Component

Adds a video to your ad.

Youtube

Add the YouTube video to your ad.

Store Locator

Add the Store Locator feature to your ad.

Actions

Actions

Action Types

URL Actions

  • Clickthrough

  • Custom ClickThrough

  • Custom Interaction

  • Got URL

Mobile Actions

  • Call Number

  • SMS Number

  • Email

Custom Actions

Video Actions

  • Play, Stop Pause, Replay, Mute, Unmute

Animations

  • Slide In, Slide Out, Motion, Fade In, Fade Out

    Show, Hide, Rotate, Scale

Sequence

  • Pause

  • Start

  • Stop

Social Actions

  • Get Feed Data

Gallery Actions

  • Show Next Slide

  • Show Previous Slide

  • Go To Slide

  • Stop Slideshow

  • Play Slideshow

Getting Started

The Ad Builder user interface elements are described.

Accessing Ad Builder

Ad Builder is accessible directly from the platform and does not require to be download or installed. Access Ad Builder by navigating to these paths in our platforms:

  • MDX: Manage > Ads > New > Design HTML5 Ad

  • Sizmek Advertising Suite: Creative > Ads > New Ad > Ad Builder.

Welcome Page

Based on your platform login credentials, a personalized Welcome Page opens when accessing Ad Builder from the platform. From your personalized welcome window, you can get straight into HTML5 and:

  • Access your recently created ads.

  • Create new ads from scratch or using templates.

  • Access a Template Gallery.

DC_welcome_window.png

HTML5 Templates Gallery

We've put together a few of the most common creative type to help you get started. For more information, see Work with HTML5 Templates.Work with HTML5 Templates

DOC_welcomepage_templategallery.png

Canvas

The canvas is your creative work space, use the Properties pane to adjust the ad dimensions. Embedded rulers and guides allow you to accurately manage the space.

DOC_canvasview.png

Rulers and Guides

Ad Builder provides rulers and guides, which help you accurately and easily place, measure, and adjust your ad and its related components on the canvas. Dedicated ruler and guide buttons are located on the right bottom area of the canvas and allow you to show and hide the rulers and guides. Rulers and guides are preserved when saving the ad.

Working with Rulers

Rulers are located on the top and left sides of the canvas.

The following notes apply to rulers:

  • When you open Ad Builder, rulers appear by default

  • Rulers display measurements in pixels.

  • The rulers on the canvas are calculated in relation to the ad on the canvas. The top left corner of the ad is considered the start point (0,0). All additional components added to the ad are measured according to their relation to the base ad.

  • Zooming in and out preserves the ratio between the ad's height and width.

  • Expanding the Instance pane hides the Vertical left pane.

Working with Guides

An instance is an ad element including a banner or a panel. Guides are viewable lines on the canvas that you can see for each instance. Guides allow you to align the different ad components in the instance. You can perform a set of guide-related actions including adding, deleting, and viewing the pixel value.

Note

Note The Show/Hide Guides button is disabled by default, and is enabled when you add a guide to the canvas.

The following illustration displays different components centered according to x: 162 pixels on the ad.

DOC_guides.png

What do you want to do?

Add a Guide

  • Click and drag from ruler axis to create a guide on the canvas.

View the Guide Pixel Value

  • Select the guide, click and hold the left mouse button.

Delete a Guide

  • Double-click the guide or drag the guide back to the ruler.

Ad Settings

DOC_adbuilder_adsettings.png

Contains general ad settings. The fields vary depending on the platform and the ad formats or features that have been selected:

  • Adaptive Ad (MDX2.0 only): Sets the ad as an adaptive ad. For more information, see Build a Single-Tag Adaptive HTML5 Ad.Build a Single-Tag Adaptive HTML5 Ad

  • Update all placement ad settings (Sizmek Advertising Suite only): Once the ad is saved to the platform, all the changes to the master ad are propagated to the attached placement ads.

  • Disable the MRAID Native Close Button When serving in In-App: Certain advertisers may want a bit more control over the Close button look-and-feel, position, or behavior. This field allows the designer to disable the MRAID native Close button so that they can customize their own.

  • Format: Enables you to change the ad format. For more information, see Change the Ad Format of an Existing Ad .Change the Ad Format of an Existing Ad

  • Format Settings: The Sizmek custom development team embeds variables in the Ad Builder templates. The Format settings section displays these variables and the default values. These values can be edited.

Instances Manager

This pane displays the ad parts including the banner and panels on an expandable ad. The interfaces serve as the building blocks for responsive ads.

DOC_InstancesManager1.png

The Instances Manager displays the different ad elements including banner and panels for Expandable and Polite Banner Ads.

Each responsive ad "version" is considered an instance and all the instances configured for the ad are displayed in the pane. The first instance created is labeled the Master instance and is used if other instances are not applicable. When uploading an ad, all the instances are uploaded to the platform as part of the ad.

The component located at the top of list is displayed in the foreground whereas the lowest in the list is located in the background. This is useful if your ad includes many components.

You can perform the following actions to components:

  • Hide selected components.

  • Lock a component on the stage.

  • Rearrange layers.

  • Identify smart components.

Note

Note DOC_asterix_doc.png indicates that a Smart Item is assigned to the component. For more information on Smart Versioning in Ad Builder, see the Adding Smart Versioning to your Component section.Add a Smart Version Item to Your Ad

Adding Multiple Banners and Panels to Your Ad Is Easier Than Ever

You can now add up to 20 panels or banners in the Create New Panel dialog box. This dialog box provides a set of predefined industry banners or panels.

DOC_adbuilder_addbanner.png

Components View

DOC_adbuilder_components.png

Access the Components view by clicking DOC_accesscomponents.png on the taskbar. Click a component to place on the canvas and proceed to configure the component using the Properties pane on the right

Properties Pane

DOC_propertiespane.png

The properties pane displays the settings for the selected component.

Actions and Animations

DOC_AA.png

To animate, define an event and then add actions. You can add multiple actions to your event and sequence them using a timeline. You can also preview the actions here for a quick preview. For more information, see Ad Builder: Events, Actions and Animations.

Save

The Save option is located on the menu bar. Saving your ad in Ad Builder automatically uploads and saves your ad directly to the platform.

Note

Note Ad Builder in the Sizmek Advertising Suite platform has an embedded autosave feature that saves a draft of your ad every five minutes. Autosave is activated after you perform the initial process of saving your ad to the platform. When you open Ad Builder or if for any reason your ad crashes, a message appears allowing you to select the platform version of your ad or the latest draft version

Preview

The Preview option is located on the menu bar. Ad Builder provides a basic internal Preview tool and access to the advanced Sizmek Advertising Suite Preview tool. You can also preview on a mobile device using our handy QR code feature. For more information, see Previewing Your HTML5 Ads.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments