Campaign Manager HTML5 banner setup

Use this guide to learn how to set up non-rich HTML5 banner creatives for Campaign Manager. Campaign Manager HTML5 banners are basic creatives that use click tags, not Rich Media exits. To learn how to build HTML5 Rich Media creatives for Studio, use the Rich Media HTML5 guides instead.

Create an HTML5 banner and upload assets

Use the steps below to create a single HTML5 banner and upload assets.

  1. Make sure your HTML5 creative is in the form of a .zip file (.adz is also acceptable). If you need help getting your creative ready, see these guidelines.

  2. In your campaign, click New > HTML5 banner. You can also do this on your advertiser-level "Creatives" tab.

  3. Under Creative assets, click Add asset.

  4. Select your .zip file.

Set dimensions in Campaign Manager

The HTML file in your .zip should specify dimensions for Campaign Manager. If needed, you can override these dimensions and choose your own in the "Creative assets" section. But you should check with your developer first.

  1. Choose dimensions in the "Dimensions" menu. If you don't see your dimensions, type them into the search field in the menu.

  2. Click the preview icon to preview your creative in these dimensions

Set feature dependencies

  1. View the "HTML5 asset" section of your creative properties, under "Creative assets."

  2. Click the feature dependencies list. Feature dependencies are features that a browser must be able to support in order to render your HTML5 creative correctly.

  3. If needed, manually add or remove features.

    • To add features, click Add features. Select the features you wish to add and click Apply. Remember that Campaign Manager will not serve your HTML5 creative to a browser unless it detects that the browser can support all the features in this dependency list.

    • To remove features, click the x next to each feature you wish to remove.

    • To clear all the features in your list, click Clear. Note that with 0 feature dependencies, your HTML5 creative will always serve with your ad.

    • To revert to the list Campaign Manager detected, click Restore detected.

  4. Make sure your list includes all the features that your browser actually needs to display your creative correctly. If you remove a feature, Campaign Manager won't confirm that a browser can support it before sending the HTML5 creative.

How do feature dependencies work?
  1. When you upload your .zip (or .adz) file, Campaign Manager detects any HTML5 or CSS3 features in your HTML5 creative that your browser needs to be able to support.

  2. You can add or remove features from this list manually.

  3. When Campaign Manager serves your ad to a browser, it checks whether the browser can handle the features in your list of feature dependencies.

    • If the browser can handle all the features in your list, Campaign Manager delivers the HTML5 creative.

    • If the browser can't handle all the features in your list, Campaign Manager delivers the backup image instead.

    Note that if your list contains 0 feature dependencies, Campaign Manager will always use your HTML5 creative, because it will not check whether the browser can handle any dependencies.

How do browsers handle feature dependencies?

Here are the ways that feature dependencies can play out in Campaign Manager.

Feature dependencies If a browser can handle all the features... If a browser can't handle all the features...
You set 0 feature dependencies in Campaign Manager. ...then the HTML5 creative serves.

...the HTML5 creative still serves. If you set 0 feature dependencies, Campaign Manager serves your HTML5 creative no matter what.

Note that some HTML5 creatives are coded to use their own backup assets if a feature can't be handled.

You set 1 or more feature dependencies in Campaign Manager. ...then the HTML5 creative serves.

...then the HTML5 creative doesn't serve.

When Campaign Manager detects that the browser can't handle one or more features, it serves the backup image with your ad instead.

When should I remove feature dependencies?

Remove feature dependencies if they aren't required. Campaign Manager may detect a feature that isn't actually necessary for your creative to render properly on a browser. Here are two common cases:

  1. If an HTML5 creative is simple and doesn't require any special features, you may need 0 feature dependencies. For example, a creative that only uses an image tag shouldn't have any feature dependencies, because any browser can handle a standard image tag.

  2. Some HTML5 creatives are set up to handle browser issues on their own. They check whether the browser can support their features and then make adjustments if needed: it may use render with simpler features, or use an image that was included in your .zip (or .adz) file.

    In this case, you don't need Campaign Manager to check whether a browser can handle every feature detected in the creative. Remove feature dependencies from your list if you want to let the creative decide how to handle them.

Check with your developer to make sure your creative doesn't have feature dependencies. Otherwise, the user may see browser errors or oddly formatted media. Using the list Campaign Manager detects may be your best option if you're not sure which features are absolutely necessary.

Set click-through URLs

  1. Under "Creative events," view the click tags table.

  2. Each click tag here corresponds to an exit in your creative. The URLs for these click tags are used for the creative in every ad. However, you can disable them and use URLs at the ad level instead.

    • If you want to use these URLs: Enter them here. If you see "Uses ad-level click-through URL," that means the URL is disabled. To enable it, click the field and uncheck the "Uses ad-level click-through URL" box. This will enable the URL so that it can be used for all assigned ads.

    • If you want to use different URLs for each ad: Disable the URLs here and set them in each ad. To disable a URL, click it and check the "Uses ad-level click-through URL" box. Then set your URLs for each ad under "Creative assignments," in the Landing page column.

Set up a backup image

  1. Under "Backup image" in your creative properties, click Add asset.

  2. Choose a .gif or .jpg. Make sure the extension is lowercase: e.g., backup.gif or example.jpg.

  3. Click the menu next to "Backup image target window" and choose a target window. This is the kind of frame or window that displays the backup image: a new window, the current window, the current frame (the frame in which the creative is clicked) or the parent frame (the frame that contains the current frame).

  4. Set the click-through URL for your backup image (under "Backup image").

    • If you want to use the same URL for all ads, check the checkbox that says Override ad-level click-through URL and enter a URL.

    • If you want to use a different URL for each ad, uncheck the checkbox and Campaign Manager will use the URL in the assigned ad (ad > creative assignments > landing page column).

The right size for your backup image: Any size is fine. If your backup image is too small for the placement, Campaign Manager centers it in the placement. If the backup image is too large for the placement, Campaign Manager crops the margins so that it will fit.

For this reason, we recommend you develop your creatives with a "content safe" area: For mobile creatives, it's a best practice to develop creatives that look okay even if they lose some content on the edges. That way, your backup image can work for a wider variety of placements (and a wide variety of mobile screen sizes).

When your backup image is delivered: Campaign Manager delivers the backup image when a user's browser can't render your HTML5 asset properly. Each time your ad serves, Campaign Manager checks the browser for compatibility with the features it detects in your asset. For example, a browser must have JavaScript enabled to handle any HTML5 creative. When a browser doesn't have JavaScript enabled, Campaign Manager delivers the backup image instead.

Was this article helpful?
How can we improve it?