Filter by Category
Filter by Author
Learn how you could optimize video files for Rich Media Creatives to avoid problems on mobile devices. What is HandBrake? HandBrake is a free software for Mac, Windows, and Linux...
Rich Media Creative is an HTML5 creative which contains advanced features like audio or video components. It can also be used for expandable creatives and allows tracking multiple user events.
Learn how to improve HTML5 creatives loading performance and avoid common mistakes.
Google Web Designer and Adobe Animate CC – Learn how you can prepare HTML5 creatives compatible with Google Studio for Google Marketing Platform campaigns.
While preparing HTML5 creatives that contain an embedded video file, we face a few common problems, mostly on mobile devices.
Google Web Designer and Adobe Animate CC – Learn how you can prepare HTML5 creatives compatible with Google Studio for Google Marketing Platform campaigns.
Contents
Google Studio is a platform where we can build interactive creatives like expandable, interstitial ads, and also Dynamic Creatives. Creatives uploaded to Google Studio are transferred to the linked Campaign Manager advertiser, where they can be assigned to the campaigns.
Campaign Manager does not provide any creative verification/validation functionality. In Google Studio we have Google QA team which checks our creatives if everything works in popular browsers and different devices.
And we need to remember that AdOps are not developers skilled to check creatives’ compatibility with certain Google requirements and standards. That’s why it is better for the media agency to relly on the Google QA verification to avoid unnecessary problems.
Very often, when the creative agency is asked to prepare creatives, they prepare them with Google Campaign Manager specification, instead of Google Studio specification. And I don’t blame them, and Google has made this part a bit confusing and it is hard to find simple answers in their documentation.
Let us discuss most common asked questions during the implementation of creatives.
It is a JavaScript library that allows track events that happened in the creative with Google Studio. Use of this library is mandatory; without it, you will not be able to trigger click event when the user clicks on the creative.
To add Enabler, just paste the script below in the HEAD section of your HTML document.
<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>Continuing confusion topic. Enabler provides two existing types:
Yes, you can, you can embed them in the Asset section in Google Studio. But you need to make sure your fonts do have a Web license.
It is also not mentioned in the documentation but embedding Google Fonts, or Adobe Fonts is allowed, I’ve never had any problems using them.
The Studio hosted JavaScript libraries offer multiple JavaScript libraries that not only are served via Google CDN network but also speed up the loading time of your creative. I highly recommend using them.
Most publishers require all creatives to have a solid border around the creative to better separate it from page content. Add a 1-pixel solid border that contrasts with the creative’s background color.
For example:
The most recommended way to build and upload creatives is Google Web Designer. It has compatibility modes for creatives with Google Ads, Studio, and DV360. Since it is developed by Google you are sure that it follows the latest creatives changes within the Google environment.
To learn what Google Web Designer can be used to build your creative, please check the official YouTube channel. As the starting point, I’d recommend checking how the timeline works since it is an essential element.
Very often forgotten to add to the creative. This component should be added to the full size of the creative with a defined exit event, which will allow Google Campaign Manager to pass the destination landing page.
You can learn more about the Tap area here.
Nothing is perfect. There are some irritating issues that Google is trying to fix with its Google Web Designer. If you see a similar error like one below, you can easily fix this.
To fix this problem, please follow the description on the official forum.
Adobe Animate CC is a software made by Adobe, which also contains a similar interface and timeline as Google Web Designer. The main difference is that Google Web Designer is used to build interactive creatives, and Adobe Animate CC is designed to build vector graphics and animation for television programs, online videos, and websites.
HTML5 animation builds using Adobe Animate CC is, by default, not creative. It is a simple animated HTML5 page, nothing more. That’s why it can not be used in advertising as a creative.
Adobe Animate allows you to change the main template.
To do that you need to first download
Then, you need to import the new template.
If you are doing mobile creatives and you would like to make them “retina ready,” you can, instead of 300×250 change the document size to 600x500px, and then select “Make responsive” option enabled.
Let Adobe optimize your images. But it is always better to use tools like tinypng.com.
As an example for developers, you can find below a basic template of how to start building HTML5 creative for Google Studio.
<!DOCTYPE html>
<html>
<head>
<!-- Other meta tags -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<!-- Studio Enabler Required -->
<script src="http://s0.2mdn.net/ads/studio/Enabler.js" type="text/javascript"></script>
</head>
<body>
<div id="creative">
<!-- creative content -->
</div>
<script language="javascript">
// your function to call: Enabler.exit('ExitEvent');
function creativeExitHandler(e) {
//Call Exits
Enabler.exit('ExitEvent');
}
//Initialize Enabler
if (Enabler.isInitialized()) {
init();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, init);
}
//Run when Enabler is ready
function init(){
//politeInit();
//Load in Javascript
if (Enabler.isPageLoaded()) {
politeInit();
} else {
Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, politeInit);
}
}
function politeInit() {
var creative = document.getElementById('creative');
// attach exit event
creative.addEventListener('click', creativeExitHandler, false);
// bellow creative logic / animation
}
</script>
</body>
</html>It is required to upload with the size of the uploaded creative, so 300×250, 300×600, or other. Use JPG with a max 40-60KB size.
Google Studio does not allow uploading files with subfolders. If possible, make sure your creative files do not contain any.
To avoid confusion with the creative names, name your creative with a simple schema [language]-[width]x[height]-[topic] like:
You will not only organize your assets, but it will be also much easier for AdOps to connect creatives with the placements in the campaign.
Make sure you have the backup image. Upload JPG with the same resolution as the creative.
Never add any exit event manually, if you implement Enabler.exit() event properly, your exit event will appear on the list automatically. You can set “Destination” with an example URL, and check if a click on the creative in the Preview will open a new browser tab with the selected URL. If the URL is not the same, you need to fix your creative.
Check if your creative behaves, animates like expected. When you click on the creative, you should see Exit counter increased +1.
After checking the creative check, navigate to Publish step. Now you can send the creative to the QA team to check your creative.
Checking usually takes up to 24h.
Note
You can select multiple creatives option so all creatives in the campaign will be sent to QA at the same time.
Subscribe to receive updates about new articles.
I needed this. Thanks.