About creatives that use HTML5
HTML5 creatives can be either display or rich media creatives. Learn more about each type below.
Display creatives are non-rich media creatives that can use image or HTML5. Display creatives offer:
- Click tag reporting on individual exits
- Polite loading
- Support for responsive HTML5 assets
Rich media creatives are HTML5 creatives that can include in-banner videos, expand to a larger size, or include interactive elements such as games. Rich media creatives offer:
- Reporting on multiple exits, counters, and timers to get data on interactions
- Can expand to a larger size or to full screen
- Support for in-banner video and audio
- Polite loading
Prepare and upload HTML5 display creative assets
To set up display creatives with HTML5, upload your HTML5 creative to Campaign Manager 360 in the form of a .zip file. The .zip should consist of an HTML file plus any files referenced by the HTML file.
-
Create a folder.
-
Add your HTML file plus any assets referenced by the file. Don’t include any other files. You may organize your assets into subfolders, but do not compress these subfolders.
What to include
-
HTML file: The primary asset of your HTML5 display creative is the HTML file. This is the entry point for your creative. It must be a complete HTML document that includes at least one click tag and can load into an iFrame. Campaign Manager 360 serves the iFrame along with your assets. See below for click tag help.
-
Other files: Include any other files that are referenced by the HTML file. Do not include any files that are not referenced.
What not to include
-
No .zips within .zips: Do not include any .zip files within your HTML5 .zip file. However, if you have several separate HTML5 .zip files for several separate HTML5 creatives, you can zip these files together and batch upload them to Campaign Manager 360.
-
No unreferenced files: As noted above, only include files if they referenced by the HTML file.
-
No local or session storage: Campaign Manager 360 does not accept HTML5 assets that use local storage or session storage.
-
No % in the name: Do not include a percent symbol (%) in the names of any of the files in your asset.
-
No backup assets
-
(Optional) The trafficker can upload a separate backup image to Campaign Manager 360. A backup image is used if Campaign Manager 360 cannot use your primary assets because they are not supported. Do not include a backup image in your HTML5 .zip file.
-
-
Supported file types: HTML, HTM, JS, CSS, JPG, JPEG, GIF, PNG, JSON, XML, SVG, EOT, OTF, TTF, WOFF, WOFF2
-
Maximum number of files per .zip: 100
-
Maximum size: 10 MB
Campaign Manager 360 also accepts HTML5 creatives in the form of an .adz file. Just treat the .adz file exactly as you would a .zip file. For your purposes, there is no difference between .adz and .zip.
-
-
Compress the folder into a .zip file. Need help compressing folders? Try the Windows or Apple help centers.
-
The trafficker can now upload this .zip file to Campaign Manager 360.
Learn more about trafficking:
Upload issues
-
This issue may be that your file is not in .zip or .adz format. Compress your HTML file (and any other files it references) into a single .zip and try again.
-
If you think you do have an .zip file, check the file extension just to be sure: right-click the file and check its properties to confirm the extension is
.zip. -
If you still can't select your file, you may need to contact support.
If you have problems uploading your file: The issue may be that your file did not contain valid HTML5 assets or contained more than 100 files (the maximum). Another issue may be that your HTML5 asset uses JavaScript APIs for local storage or sessions storage. To help protect user privacy, Campaign Manager 360 does not allow these APIs.
To help protect user privacy, Campaign Manager 360 does not accept HTML5 assets that use local storage or session storage. If your upload is rejected for this reason, work with your developer to remove the forbidden APIs. Then try uploading the asset again. Specifically, you cannot upload HTML5 assets with the following JavaScript APIs:
- indexedDB
- localStorage
- openDatabase
- sessionStorage
If your advertising goals depend on these APIs, try using Campaign Manager 360 settings instead. For example, some advertisers use these APIs for ad targeting and frequency caps, but this isn’t necessary: you can use Campaign Manager 360 to set up many kinds of targeting, and to set frequency caps. Ask support for help implementing workarounds. (Just keep in mind that regardless of how you set up your asset, you should only attempt to capture data that meets the privacy requirements in your contract with Google Marketing Platform.)
What is local storage and session storage? These are two kinds of HTML5 Web Storage. They are ways to store data on a browser. Local storage stores a file on the browser across browsing sessions. It remains on the browser permanently, unless the user clears the browser cache or deletes the file manually. Session storage only stores data on the browser during a particular browsing session. Once you close and restart the browser, all the session-stored data will be cleared.
Why isn't this type of storage allowed? The stored file can potentially include code designed to capture Personally Identifiable Information (PII), track cross-session browser activity, or send other data to third parties that may violate the terms of your Google Marketing Platform contract. This kind of data collection is certainly not the only use of local and session storage, but it's one possible use, because the file can include any type of code.
Developer guidelines
Resources
How to set a creative's size
Unlike images or videos, HTML documents don't have dimensions on their own. For this reason, use the size meta tag to indicate the intended size for your creative. The size meta tag is an optional parameter in your HTML document. It's the best way to be sure your creative renders at the right dimensions. You can enter the dimensions as shown below:
meta name="ad.size" content="width=300,height=250">Click tags
Click tags define landing pages for each exit on your creatives with HTML5 assets. An exit is any area that can be clicked that directs the browser to a landing page. Each click tag defines the landing page for a different exit.
When an exit gets a click, the creative calls Campaign Manager 360 for the landing page associated with that exit. You can set this landing page in your creative or your ad, depending on your needs.
Campaign Manager 360 detects click tags when you upload your assets. You can change the landing page your click tag uses anytime, even after you export tags. That's because the click tag is a standard variable, a placeholder for the landing page rather than a hardcoded value.
There are some best practices for setting up your click tags since the ad-level overrides the creative-level settings in display creatives:
- Make sure your creative uses the click tag variable as the click destination.
- The click tag should be easy for the ad server to read—no minification or obfuscation, though you can use minifers in the rest of your code and in other files.
- We do not recommend hard-coded URLs in your asset because that prevents Campaign Manager 360 from tracking clicks and prevents traffickers from updating the URL. After upload, Campaign Manager 360 will warn you if there are hardcoded URLs in the asset.
Here's an example of a click tag inserted in an HTML document:
<head>
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
var clickTag = "http://google.com"; </script>
</head>
[The rest of your creative code goes here.] </html>
Make sure your creative uses the click tag variable as the landing page URL:
<img src="images/dclk.png" border=0>
</a>
Google Web Designer's Tap Area component is fully compatible with Campaign Manager 360. No custom code is required.
To add a click tag using a Tap Area:
- Be sure your ad has a button or other clear visual call-to-action element for the user to click or touch.
- Drag the Tap Area component from the Interaction folder of the Components panel to the stage, and position it over the call to action.
- Click the new event button
in the Events panel.
- In the event dialog, select the following options:
Target The Tap Area component ( gwd-taparea_1)Event Tap Area > Touch/Click Action Google Ad > Exit ad
Note: A similar action, Exit ad (overrides URL), doesn't allow you to modify the URL outside of the creative, such as within Studio or Campaign Manager 360, and should only be used for dynamic ads.
Receiver gwd-adConfiguration - Metrics ID - A label (e.g., "CTA") to make reports easier to understand.
- URL - The exit URL.
- Collapse on exit - For expandable ads, check to collapse the ad when the user closes the ad.
- Pause media on exit - Check to stop video and audio playback when the user closes the ad.
- Collapsed page on exit - For expandable ads, the page to show when the user closes the ad.
in the Events panel.
Sample files
Here's an example of a complete HTML document for an HTML5 creative. The click tag and size meta tag are shown in bold.
Because this creative is so simple, no other assets are needed. If this were your HTML5 creative, you'd compress it into either a .zip or .adz file and send it to your Campaign Manager 360 trafficker.
Document
<head>
<title>sample html page</title>
<meta name="ad.size" content="width=300,height=250">
<style>
html, body {background-color: blue;}
p { color:white; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
var clickTag = "http://google.org";
function resizeWindow()
{
$('p').css({ 'width':'100%', 'text-align':'center' });
var h1 = $('h1').height();
var h = h1/2;
var WinHeight = $(window).height();
var w = WinHeight/2;
var m = w - h;
var WinWidth=$(window).width();
$('p').css("margin-top",m + "px");
$("p").text("Size="+WinWidth+"x"+WinHeight);
}
$(document).ready(function () {
resizeWindow();
});
$(window).resize(function () {
resizeWindow();
});
</script>
</head>
<body>
<a href="javascript:window.open(window.clickTag)"><p>Page loading...</p></a> </body> </html>
These HTML5 files are used to dynamically change URLs and record clicks with the Campaign Manager 360 ad servers.
Simple
Calls a click tag upon a click.
Including Parameter
Calls clickTag when the button is clicked. This example demonstrates passing a parameter to the destination URL (e.g., a zip code).
Calling a URL with a hashtag
HTML5 file with code to break up the tracking call to Campaign Manager 360 and the landing page URL of the button. This needs to be done for any creative that clicks through to a destination URL that contains the number sign (#).
Multiple click tags
HTML5 file with more than one click tag.
Loader
A .zip file containing two .zip files, the parent file and the child file. The parent loads the child file.
This is a sample of an HTML5 file that is used for recording user interactions in non-rich media creatives.
1x1 tracking pixel
Calls a Campaign Manager 360 1x1 tracking pixel when it loads.