What is an HTML ad template?
An HTML ad template is a set of HTML files that define the layout and structure of a dynamic display ad. Each file represents a different ad size and supports assets like CSS, JavaScript, images, and fonts. These templates are used to render dynamic creatives based on the layout defined in each HTML file.
HTML ad template specifications
Use the following specifications to ensure your HTML template ads are built and served correctly.
Browser
Google Chrome is required.
Sizes
There are a few ways to define the ad dimensions for an html file.
The file name contains a width x height pattern (e.g., index_300x250.html)
The file is inside a directory named with a width x height pattern. (e.g., index.html is inside a folder named 300x250)
The body tag inside the HTML has a style attribute that defines height and width in pixels. Example:
<body style="width: 300px; height: 250px;">After uploading a file, you can manually set a width and height.
Dynamic values
Inside the HTML body, any text, imagery, color, etc., that will change from account to account should use a dynamic value. These are represented by a variable name inside curly braces.
Establish your own variable names, and when an html file is uploaded, Fluency automatically scans for dynamic values and lets you map each one to a Blueprint tag.
Examples:
<h1>{accountName}</h1>
<span style="color: {primaryColor}">Hello</span>
<style type="text/css">
:root {
--cta-color: {ctaColor};
}
</style>
External references
To ensure that an ad displays exactly as intended, any supporting CSS, javascript, images, fonts, etc., should be included in the uploaded template files. If there are references to externally hosted files, Fluency will attempt to download them when bundling the ad, but they may not always work.
File structure
Files can be organized in any way. Use relative paths to reference one file from another.
Links
If the goal is to have the whole ad click through to a single URL, do not include any links in the template. The entire ad will automatically link to a URL that is set up outside the template, attaching everything needed for tracking.
Important:
All click URLs must share a common domain. Failure to comply will result in rejected creatives.
YES: https://mydomain.com/12345/ and https://mydomain.com/5678
NO: https://differentdomain.com/12345/ and https://mydomain.com/12345/
All click URLs must be prefixed with
https://. Failure to comply will result in broken click and conversion reporting.
YES: https://mydomain.com/12345
NO: http://mydomain.com/12345/
If an ad needs multiple links (e.g., different products in a carousel linking to different pages), use the standard href attribute and add the onClick event shown in the example below:
Example:
<a href="{product1Link}" onclick="fluencyClicktag.redirect(event)">
Buy {product1}
</a>
<a href="{product2Link}" onclick="fluencyClicktag.redirect(event)">
Buy {product2}
</a>
Important: If you are using dynamic click-through URLs, you must use the onClick event shown above. Failure to do so will result in unreported clicks (cannot be tracked by Fluency, the DSP, or any third-party click-trackers)
Dynamic images
Just like text values, images can be included dynamically. Examples of how dynamic values can be used for images:
Examples:
<img src="{logo}" alt="brand logo" />
<div style="background-image: url('{image}');">
These dynamic values can be mapped to media collections. When previewing the ad on the HTML Template page, the first image in the media collection will be used. When the template is being used in a Blueprint, use data filters to choose a specific image that fits the campaign and ad group from the mapped media collection.
Dynamic product ads
Fluency offers a solution for Dynamic Ad units that allows you to update the content of live ads without needing to recreate them from scratch or republish the Blueprints. These dynamic ads leverage Fluency’s inventory catalogs and your account data, scoped to the inventory you want to advertise and publish content directly to our in-house ad-server. The content can then be consumed by your ad’s javascript and used to update any imagery, fonts, colors, or styling in your ad.
Important: In order for your product catalog content to be accessible to your ads when the ad is served, it will be made publicly accessible on Fluency’s ad-servers.
Setting up dynamic product ads
Set up an inventory catalog, and choose the DSP Products type.
To test your HTML ad template, manually connect the inventory catalog to an account and create some product scopes. Note: You won’t have to do this for every account.
In the HTML file for your ad or in the javascript file that is included in your ad, use the following global variables to access inventory objects. The objects you consume will have keys that match the mapping you set up in step 1.
fluencyHelpers.productManifest.recordsPerPage: Integer; number of records on each inventory page
fluencyHelpers.productManifest.recordCount: Integer; total number of records
fluencyHelpers.productManifest.pageCount: Integer; number of pages
fluencyHelpers.fetchProductPage: Integer; Function that takes an index as a parameter and returns a Promise that resolves with a list of inventory objects for the given page index
Use the controls at the top of the HTML Ad Template Builder to select an account and product scope to preview your template.
In the Blueprint, create the product scope outlined at the ad group level. When an account launches on the Blueprint, Fluency wires up everything needed at the account and provides the helper methods (above) to the ads on our ad server.
Click URLs
You may use dynamic click-through URLs in your product catalog, but you must leverage Fluency’s click-handler correctly. Please see Links above.
Important: If you are using dynamic click-through URLs, you must use the onClick event shown above. Failure to do so will result in unreported clicks (cannot be tracked by Fluency, the DSP, or any third-party click-trackers)
Content localization
All remote content (i.e., https://mydomain.com/image_for_ad.jpg) referenced inside your html or stored in your product catalog will attempt to be “localized” onto Fluency’s ad-server to be compliant with our DSP partners, allowing the content to load quickly for ad-rendering. To facilitate this, ensure that assets that need to be included in the ad should be uploaded as part of the template. Remote assets being referenced in your product catalog should not be nested inside structured data.
Examples:
YES:
{
"my_image": "https://mydomain.com/image_for_ad.jpg"
}
NO:
{
"my_object": {
"my_image": "https://mydomain.com/image_for_ad.jpg"
}
}
NO:
{
"my_images" : [
]
}
NO:
{
}