Navigation

Related Articles

Google Studio • HTML5 creatives guide

Google Studio • HTML5 creatives guide


Wojtek Andrzejczak
Wojtek Andrzejczak
Google Studio • HTML5 creatives guide

Google Web Designer and Adobe Animate CC – Learn how you can prepare HTML5 creatives compatible with Google Studio for Google Marketing Platform campaigns.

About Google Studio

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.

But not Google Campaign Manager?

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.

Not a Google Campaign Manager creative

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.

Important elements

Let us discuss most common asked questions during the implementation of creatives.

What is Google Enabled SDK?

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>

Implement Enabler exit event

Continuing confusion topic. Enabler provides two existing types:

  • Enabler.exit(‘event_name’, ‘optional URL’) – defines the exit event name and allows us to define an example URL, which will be imported to Studio. In our case, you should always use this one.
  • Enabler.exitOverride(‘event_name’, ‘new URL’) – use only for Dynamic Creatives, never use in standard creatives. You will always overwrite the destination URL defined in Campaign Manager.

Can I use my fonts?

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.

3rd party libraries

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.

Creative border

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:

  • If the creative has a black background, add a light grey border.
  • If the creative has a white background, add a black border, and so on.

Google Web Designer

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.

How to prepare creative

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.

The Tap Area component

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.

Safari – common issues

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.

Google Studio / Creatives Rejected / Safari & iOS problem
Google Studio / Creatives Rejected / Safari & iOS problem

To fix this problem, please follow the description on the official forum.

Adobe Animate CC

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.

Animated HTML5 is not a creative

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.

Use the right template

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.

Adobe Animate CC / Publish Settings / HTML/JS
Adobe Animate CC / Publish Settings / HTML/JS

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.

Adobe Animate CC / Publish Settings / Basic
Adobe Animate CC / Publish Settings / Basic

Let Adobe optimize your images. But it is always better to use tools like tinypng.com.

Adobe Animate CC / Publish Settings / Image Settings
Adobe Animate CC / Publish Settings / Image Settings

HTML5 creative example

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>

Before upload

Backup image

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.

File structure

Google Studio does not allow uploading files with subfolders. If possible, make sure your creative files do not contain any.

Naming convention

To avoid confusion with the creative names, name your creative with a simple schema [language]-[width]x[height]-[topic] like:

  • DE-300×250-Kids
  • EN-300×600-Parents

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.

Backup image

Make sure you have the backup image. Upload JPG with the same resolution as the creative.

Google Studio, backup image
Google Studio, backup image

Events

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.

Google Studio Exit event
Google Studio Exit event

Preview

Check if your creative behaves, animates like expected. When you click on the creative, you should see Exit counter increased +1.

Check if your creative behaves, animates like expected. When you click on the creative, you should see Exit counter increased +1
When you click on the creative, you should see Exit counter increased +1

Publish creatives to QA

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.

Check the "Send a notification to Studio's QA team" option. And click "Publish to QA"
Check the “Send a notification to Studio’s QA team” option. And click “Publish to QA”

Note
You can select multiple creatives option so all creatives in the campaign will be sent to QA at the same time.

Links


  • Contact Me
    Contact me if you need advice or if you need help. Would you please choose the most suitable contact channel for you?
  • My Services
    If you need a technical specialist to technical support to fix your problems, you are in the right place.
  • Who I am
    Hello, my name is Wojtek, I’m an experienced Software Engineer, with many many years of experience in the advertising industry.

Subscribe to receive updates about new articles.

[newsletter_form button_color=”#E74C3C”]
Show Comments (4)

Comments

  • Tim
    Tim

    I needed this. Thanks.

    • Article Author
    • Reply

Related Articles

3 most common HTML5 creatives performance mistakes
Guidelines for creatives

3 most common HTML5 creatives performance mistakes

Learn how to improve HTML5 creatives loading performance and avoid common mistakes.

Posted on by Wojtek Andrzejczak
7 facts about sandbox attribute • HTML5 iFrame
Troubleshooting

7 facts about sandbox attribute • HTML5 iFrame

Learn three facts about the iframe sandbox attribute. What HTML5 IFrame tag is and how you can use the sandbox attribute.

Posted on by Wojtek Andrzejczak