Google Studio

You can export banners to prepare them for subsequent upload to Google Studio.

We recommend applying Google Fonts in your banners to optimize the content size after export.

Build structure

The exported banners for Google Studio are organized in banner-specific directories, each containing all assets and configuration files for a specific banner size. The sample build structure is as follows:

├── <bannerId>/
│   ├── index.html
│   ├── backup.jpg
│   ├── common/
│   │   └── media/
│   │       └── fonts/
│   ├── css/
│       ├── index.css
│       └── *.css
│   ├── js/
│       ├── index.js
│       ├── exits.js
│       └── *.css
│   └── themes/
│       └── theme1/
│           └── media/
│               └── images/

Path	Description
`<bannerId>/`	Root directory for the specific banner format (e.g., `skyscraper_extracted`, `wide-skyscraper_extracted`). Each format contains a self-contained, buildable banner.
`<bannerId>/index.html`	Main HTML entry point for the banner. Contains the complete markup structure, including meta tags for Google Studio compatibility, linked stylesheets, and script references.
`<bannerId>/backup.jpg`	Backup image file used as a static fallback image for the banner when JavaScript is unavailable.
`<bannerId>/common/`	Directory containing common shared assets and resources used across the banner.
`<bannerId>/common/media/`	Media assets directory containing fonts and other common resources.
`<bannerId>/common/media/fonts/`	Web fonts directory. Contains `.woff2` font files used for typography.
`<bannerId>/css/`	Stylesheets directory containing compiled CSS files for the banner.
`<bannerId>/css/index.css`	Main stylesheet containing global banner styles, typography, layout, and component-specific CSS rules.
`<bannerId>/css/*.css`	Hashed/minified CSS chunk, typically containing component-specific or theme-specific styles. The hash ensures cache-busting on updates.
`<bannerId>/js/`	JavaScript code directory containing all scripting logic.
`<bannerId>/js/index.js`	Main entry point JavaScript file containing the Vue.js application bootstrap, state management, and component initialization. Compiled and minified with webpack.
`<bannerId>/js/exits.js`	Exit handler script that manages click tracking and exit behaviors for the banner. Handles user interactions that lead out of the banner.
`<bannerId>/js/*.js`	Hashed/minified JavaScript chunk containing lazy-loaded application code (components, utilities). The hash allows efficient caching and cache invalidation.
`<bannerId>/themes/`	Theme assets directory containing visual theme configurations and theme-specific resources.
`<bannerId>/themes/<theme1>/`	The <theme1> directory. Contains all resources for the <theme1> color scheme variant.
`<bannerId>/themes/<theme1>/media/`	Theme-specific media assets directory.
`<bannerId>/themes/<theme1>/media/images/`	Theme-specific image assets. Contains banner graphics, backgrounds, and visual elements optimized for the <theme1> theme.

Key characteristics

Self-contained: Each banner directory is a complete, standalone unit that can be built and deployed independently.
Minified & optimized: All CSS and JavaScript files are minified and split into chunks with content-based hashing for optimal delivery and caching.
Google Studio compatible: The structure follows Google Studio's requirements, with proper HTML5 structure, viewport meta tags, and ad-specific configuration.
Theme support: Multiple theme directories can be included for different visual presentations (e.g., light, dark themes).
Media assets: All required assets (fonts, images) are included locally within the banner package, ensuring no external dependencies.
Responsive & dynamic: The Vue.js-based application enables dynamic content rendering, state management through Vuex, and responsive interactions.

Analytics

For Google export, the banner must include the Google Studio Enabler library.

The Enabler is initialized automatically by the eWizard.js framework, so no manual initialization is required in the banner code.

Google Studio requirements

To ensure compatibility with Google Studio, the exported banner includes specific configurations handled by the builder, followed by one required user action:

Enabler library: The builder automatically adds the HTML5 Enabler script.
Initialization: The builder ensures resources only load after Enabler initialization.
Polite loading: The builder sets up a polite load sequence (optional).
Exit event: [User action required]: You must manually add at least one exit to your banner to ensure click-through functionality.

Enabler library

The HTML5 Enabler library is a core requirement. In the exported banner, the Enabler is initialized automatically within the eWizard.js framework.

Rendering logic: To prevent errors, banner content is not rendered until the Enabler has successfully initialized.
Fallback behavior: During this initialization phase, a backup image is displayed to the user to ensure the ad slot is never empty.

Polite loading

Polite loading is implemented by default in the eWizard.js framework.

Event synchronization: This mechanism ensures that the main banner content and heavy assets are not rendered before the main page loads.
Visual continuity: Similar to the initialization phase, the backup image remains visible until this event occurs, providing a seamless transition once the host page has finished its primary loading sequence.

You can disable this behavior for specific banners. To do so, set politeLoading: false in the specific banner object within the structure.json file.

Exits

Google Studio requires at least one Exit to track user clicks.

The framework supports the v-open.link directive for implementing exits. During the build process, directives and anchor tags are transformed into calls compatible with Google Studio.

The implementation of exits is as follows:

Transformation: All instances of v-open.link and v-open.pdf, as well as standard anchor tags (<a>) in the banner template, are replaced.
Inline links within localized text are also automatically transformed into Enabler.exit() calls.
Exits bundle: All exit links are collected into a mapping with direct calls to Enabler.exit('exitId', 'url'). Each exit ID is generated as a hash of the URL and its host. This ID is used to record click events in analytics. This mapping is bundled into a separate file, exits.js, which is included in the banner HTML.

Meta tags

Google Studio requires a meta tag in the banner HTML file that defines the creative dimensions:

html

<meta name="ad.size" content="width=300,height=600">

This tag allows Google Studio to correctly interpret and validate the banner size.

The width and height values are automatically generated based on the dimensions specified in structure.json.

Size optimization

Google recommends a maximum unpacked banner size of 600 KB. If a banner exceeds 4 MB during download, the browser won't display it. The build process therefore includes automatic optimizations to ensure compliance with Google Studio requirements.

CDN-based dependencies

To minimize bundle size, some framework dependencies are loaded from CDNs instead of being included in the archive. This reduces the overall archive weight while preserving runtime functionality.

Asset optimization

Template media assets are optimized automatically.

All optimizations are active by default, but can be configured per banner in structure.json using the optimizeAssets field:

true / false — turn on/off all optimizations.
Object — fine-grained control of individual optimization types.

To reduce the asset sizes, the following optimizations are available:

Unused asset removal—excludes unused fonts, images, and videos from the final archive.
Font optimization—local fonts are converted .woff2 format for better compression. Google Fonts are recommended whenever possible.
Image optimization
- Resolution is reduced to 2× the rendered resolution, if this doesn't exceed the original size.
- Image quality is adjusted to web-optimized levels.
Video optimization
- Videos are converted to MP4.
- Resolution is reduced to the rendered resolution (if not exceeding the original).
- Quality is adjusted to web-optimized levels.

Bundle optimization

The builder excludes non-essential modules.

The builder maintains a default list of glob patterns for excluded modules. You can extend this list in settings.json:

json

"buildOptions": {
  "externalModules": [
    "**/some-module-to-exclude/**/*",
    "!**/some-module-to-restore/**/*"
  ]
}

Custom patterns are appended to the default array.
You can exclude additional modules or reinstate modules excluded by default.

Using Google Fonts

Google Fonts are recommended to reduce the banner archive size and improve its performance.

Add preload to index.html.

html

 <head>
     <!-- ... -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="preload" href="https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;800&display=swap" as="style">
 </head>

Import the font in styles.

For example, in common/styles/imports.scss:

scss

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;800&display=swap');

Declare the font as external in settings.json.

json

"fonts": {
  "alternative": "",
  "external": [
    "M PLUS 1p"
  ]
}

Google Studio ​

Build structure ​

Key characteristics ​

Analytics ​

Google Studio requirements ​

Enabler library ​

Polite loading ​

Exits ​

Meta tags ​

Size optimization ​

CDN-based dependencies ​

Asset optimization ​

Bundle optimization ​

Using Google Fonts ​

Google Studio

Build structure

Key characteristics

Analytics

Google Studio requirements

Enabler library

Polite loading

Exits

Meta tags

Size optimization

CDN-based dependencies

Asset optimization

Bundle optimization

Using Google Fonts