Follow

 

  • Manage > Ads > New > Design New HTML5 Ad
  • Shortcuts > Design New HTML5 Ad

This video provides an overview of creating an adaptive ad using a single tag in Ad Builder for HTML5.

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.

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
 

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 for HTML5. This involves designing several creative instances for the ad.
  2. [Trafficker] Traffic the adaptive ad to campaigns and placements and produce ad tags.
  3. [Publisher] 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 for HTML5 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 for HTML5, 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 Sizmek client.

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 for HTML5, see Procedure.

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

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
2 Leaderboard
728 x 90

3

Mobile Banner
320 x 50

 

                                      

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 Sizmek client 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: Once you upload the adaptive ad to the platform, you cannot revert an adaptive ad to a non-adaptive ad.

Procedure

The Medium Rectangle instance is 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.

  1. To access Ad Builder for HTML5, click Manage > Ads > New > Design New HTML5 Ad.
  2. To create Instance 1 - Medium Rectangle 300 x 250:
    1. In the Welcome page, click Medium Rectangle ad format.
      Ad Builder for HTML5 opens and the banner is defined as the master instance. 
    2. To set the ad as adaptive, click  on the taskbar and select the Adaptive Ad check box in the Ad Settings dialog.


      The Instances pane automatically opens in the left pane on the canvas.
    3. Set the Max Width to 319. This determines the widest placement width on which the ad can be served. Setting the maximum width to 319 means that the instance is served when the placement size on the publisher page is equal to or less than 319.
    4. Assign a default image to this instance measuring 300 x 250 pixels.
    5. To create Instance 2 - Leaderboard 728 x 90:
      1. In the Instance pane, click New.
        Banner_1 is created in the Instances pane.
      2. In the Properties pane, provide an intuitive name, for example, LeaderboardAd.
      3. Set the dimensions to 728 x 90 pixels.
      4. Set the orientation to Portrait. This will display the ad only in devices that are in portrait orientation.
      5. Set the Max Width to 1000.
      6. 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:
      1. In the Instance pane, click New.
        Banner_1 is created in the Instances pane.
      2. In the Properties pane, provide an intuitive name, for example, Mobilebanner_ad.
      3. Set the dimensions to 320 x 50 pixels.
      4. 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.
      5. Set the Max Width to 727.
        The three instances are created in the ad. Proceed to preview and upload the ad to the platform.
    7. Click Preview.
      Preview in Ad Builder for HTML5 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.
    8. Click Upload 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 icon 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?

The following workflow shows how placement size dimensions are detected on the publisher’s page.

Once the required publisher placement size has been determined, the platform performs the following workflow to determine which instance to serve.

 

During serving, if none of the predefined creatives are exactly suitable for the target placement, the platform selects the closest matching instance according to the placement maximum width. It then centers the instance in the container within a padded border. The border color derives from the ad's background color. 

For example, if the publisher placement dimensions are detected as 400  x400, the Sizmek client looks for instances whose maximum width is equal to or larger than 400, and whose banner width is closest to 400. An instance  with a size of 300 x 250 whose maximum width is 700, could be served in this case to the 400x400 placement. It will be centered in the 400 x 400 placement.

Serving Adaptive Ads in Delivery Groups and Placements

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?

The process of serving adaptive ads in the platform is identical to serving In-Banner ads and requires no additional actions or configurations on behalf of the trafficker. The trafficker can view a list of adaptive ads, in the Filter By list in the platform.

 

You can preview the instances in the preview platform.

(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>
       
    </div>

  • 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?
1 out of 2 found this helpful
Have more questions? Submit a request

Comments