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

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

Overview

Effective campaigns no longer run on a single standard browser but run across multi-platform devices and environments. This requires multiple creatives for each campaign, including different sized banners, different assets including videos, images, and effects.

The Sizmek HTML5 Adaptive ad solution enables you to create a single tag for an ad to serve in different placements on desktop, mobile browsers, and mobile apps. This single ad contains multiple creative instances, each optimized for a specific target placement.

Note

Note: When you create multiple instances, the ad is automatically defined as an adaptive ad.

Sizmek single-tag adaptive HTML5 ads:

  • Serve to different sized placements using a single tag: A single tag is trafficked to placements of varying sizes. During serving, each creative is optimally served to its relevant placement. For example, the same tag would be used to traffic a 300 x 250 instance of the ad and a 160 x 600 instance of the ad.

  • Support device orientation: When an ad is served to a mobile device, it can have different creative instances for landscape and portrait orientations. Switching between the instances occurs according to the current device orientation without the need to re-serve the ad. This occurs unless the publisher page actively makes a new serving request.

For example, an adaptive single ad can contain a Medium Rectangle instance, a mobile Expandable banner and a Wide Sky Scraper banner. Each instance may use a different set of assets, optimized for size and purpose.

Medium Rectangle

Mobile Expandable

Banner

Wide Sky Scraper

medium_rectangle.png
responsive_mobile_expandable.png
sky_scraper_responsive.png

Adaptive Ads Workflow

The Sizmek workflow for creating, trafficking, and serving adaptive HTML5 ads is as follows:

  1. (Creative Developer) Create and upload the adaptive HTML5 ad in Ad Builder. This involves designing several creative instances for the ad.

  2. (Trafficker) Traffic the adaptive ad to campaigns and placements and produce ad tags.

  3. (Publishers) Place the tags on the publisher side in the relevant placements. There are two ways for the adaptive ad to determine placement dimensions:

    • Auto-detect dimensions: Place the tag in the container on the publisher page. The ad will auto-detect the container size and determine the required size to be served.

    • Pre-set by publishers: The publisher can add tokens to a script tag that defines the placement size for the served ad.

The following sections describe each step in detail.

(Creative Developer) Build an HTML5 Adaptive Ad

Ad Builder supports creating HTML5 adaptive ads. An adaptive ad is a single ad containing multiple creative instances. It usually includes instances that share the same creative theme or concept, since they are part of the same ad and will be trafficked identically using the same tag. The difference between instances may be sizes, proportions, and selective use of assets. You can create adaptive ads for Polite (Rich Media), Expandable and Single Expandable ad formats.

In Ad Builder, the first instance that you created for an adaptive ad is defined as the master instance, which is used as a fallback in case a suitable ad is unavailable or if the placement dimensions are not communicated to the Sizmekclient.

You can create multiple panels and banners for a single adaptive ad. For each instance, define the banner or panel, the dimensions - width and height, and the positioning type. To create an adaptive ad in Ad Builder, see Procedure.

We are going to use the following example to describe how to configure an adaptive HTML5 ad in by creating three instances within an ad.

DOC_singletag_responsivefirstimage.png

The example shows a Polite (Rich Media) ad. We will configure this ad with the following instances.

Ins.

Ad Type

Display

1

Medium Rectangle 300 x 250

medium_rectangle_for_responsive_sample.png

2

Leaderboard

728 x 90

leaderboard_responsive_ad.png

3

Mobile Banner

320 x 50

mobilebanner_repsonsive_sample.png

Recommended Practices

  • The first instance you create in the adaptive ad is defined as the master instance and serves the default banner. You cannot delete this instance and the master role and you cannot transfer the master role to another instance. It will be served in case the Sizmekclient cannot detect a placement size, or if no size was specified by the publisher in the tag. Therefore, ensure that your most commonly used instance size is set as the master instance.

  • When designing a creative set, it is recommended that you start with the largest and richest instance, design it in full, and then work on smaller and less-rich instances, gradually removing elements and simplifying the ad.

  • Provide an intuitive naming convention that allows you to differentiate between instances.

  • Assign a dedicated default image to each instance to match the associated instance dimensions.

Important

Important: Once you upload the adaptive ad to the platform, you cannot revert an adaptive ad to a non-adaptive ad.

The Medium Rectangle instance is the first instance in the example and is defined as the master instance. Once you create the first instance, the order by which you create the remaining instances is of no importance.

Procedure
  1. Open Ad Builder.

  2. In the Welcome page, click Medium Rectangle ad format.

    Ad Builder opens and the banner is defined as the master instance.

  3. Select the Responsive Banner check box. This ensures that the instance will automatically enlarge or decrease, while maintaining the aspect ratio, in response to the placement size on which the instance is served.

  4. Assign a default image to this instance to and set it to 300 x 250 pixels.

  5. To create Instance 2 ( Leaderboard 728 x 90), do the following actions:

    1. In the Instance pane, click New.

    2. In the Properties pane, provide an intuitive name, for example, LeaderboardAd.

    3. Set the dimensions to 728 x 90 pixels.

    4. Select the Responsive Banner check box.

    5. Set the orientation to Portrait. This will display the ad only in devices that are in portrait orientation.

    6. Set the maximum width to 1000. This determines the widest placement width on which the ad can be served. Setting the maximum width to 1000 means that the instance is served when the placement size on the publisher page is equal to or less than 1000.

    7. Assign a default image to this instance to and set it to 728 x 90 pixels.

  6. To create Instance 3 (Mobile Banner 320 x 50), do the following actions:

    1. In the Instance pane, click New.

    2. Select the Custom Size check box and set the custom dimensions to 320 x 50.

    3. In the Properties pane, provide an intuitive name, for example, Mobilebanner_ad.

    4. Select the Responsive Banner check box.

    5. Set the orientation to Both. This is the default value and enables the instance to be available for serving regardless of the device's orientation.

    6. Set the maximum width to 400.

    7. Assign a default image to this instance to and set it to 320 x 50 .

    8. The three instances are created in the ad.

  7. The three instances are created in the ad.

    DOC_singletag_instances_banners.png
  8. Click Preview.

    Preview in Ad Builder displays the master instance and an option to preview each of the instances. A list of viewable instances is displayed on the left bottom corner of Preview.

  9. Click Save to upload the ad to the platform. Ensure that you have a default image assigned to each instance.

    The adaptive ad is uploaded to the platform and the adaptive responsive_ad_icon.png is added to the ad and displayed in the Ads list. The adaptive ads is displayed as a regular HTML5 ad in the Ads list.

(Trafficker) Traffic and Serve Adaptive Ads

Adaptive ads appear as regular ads in the platform with the following exceptions:

  • Ad Preview can display the different creative instances.

  • You can filter adaptive ads in the main ads list.

All other visible attributes of adaptive ads are identical to regular MDX ads. On the ad level, an adaptive ad does not display the sizes of each instance. Placements and delivery groups still show one size, even if they include adaptive ads that have more than one instance. Placements and delivery groups do not change their behavior, when serving adaptive ads because instance dimensions are not included in the serving logic.

How are Adaptive Ads Served?

Serving Adaptive Ads in Delivery Groups and Placements

Important

Important: It is the trafficker’s responsibility to know which instance sizes are included in the ad and to traffic this information to placements and delivery groups that share the same instance sizes.

Placements or delivery groups retain their existing behavior, and do not take ad dimensions into account in their serving logic. Therefore, it is therefore highly recommended that a placement or delivery group containing adaptive ads, should only include adaptive ads, and that those ads support the same set of creative instances.

For example, if an adaptive ad with the following three creative instances - 300 x 250, 320 x 50, and 728 x 90 is trafficked to a placement, all other ads trafficked to that placements should be adaptive ads with these dimensions. This ensure that a tag from this placement can be placed in publisher placements of these three sizes. During serving, the correct instance size will be included disregarding which ad is selected.

What do you want to do?

(Publishers) Add Instance Dimension Data to Publisher Pages

To ensure that the best-fit instance is served to the publisher's page, the publisher should communicate the instance dimensions to the adaptive ad. This occurs using one of the following methods:

  • Include the resWidth and resHeight tokens in the Sizmek tag that is placed on the publisher's page: The publisher can add two specific tokens to the ad request, which determines the requested instance dimensions. This is done by inserting the tokens into the ad tag. In the following example, the tokens are marked in red and request an instance sized 1000 x 300.

    Sample Code: Setting the Instance Dimensions in the Sizmek Tag

    <script src="http://bs.serving-sys-int.com/BurstingPipe/adServer.bs? &c=28&pli=722284&PluID=0&ord=[timestamp]&ucm=true&pc=[TPAS] &resWidth=1000&resHeight=300"></script>
  • Define the container <div> size to guide auto-detection: The publisher should add width and height properties to the container div. During the placement size, the auto-detection process scans this to determine the requested ad size.

    Sample Code in Container

    <div id="container" style="width:100%; height:250px; border: 1px solid black"></div>

View Adaptive Data in Sizmek Reports

Reporting for adaptive ads is similar to reporting regular Sizmek ads with one exception. A custom interaction is sent to the Sizmek server, for every creative instance served, stating the name of the instance. This enables users to view a custom report displaying the impression count per each instance.

In order to generate this report, simply generate a custom interactions report for the required campaign or ad.

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

Comments