Search
Clear search
Close search
Google apps
Main menu
true

Version 1.5.2.1202 | Shell Build 1.2.4.0 (Mac/Win), 1.2.5.0 (Linux)

Release notes

A new version of Google Web Designer is available! 11 new feature areas have been added, new templates have been added, and 44 issues have been fixed as part of this release. Read below for additional details.

Auto Update (Internet connection required)

If you have a previous version of Google Web Designer, it will be automatically updated to the latest version.

Important: Google Web Designer requires an internet connection.

Version 1.5.2.1202 bug fixes

  • [CSS] [Advanced mode only] Issue with CSS when changing the selector text or deleting a rule

Version 1.5.2.1202 bug fixes

  • Failure to fetch profile data after the profile is modified on Studio
  • Profile linkage is broken if not signed in when attempting to modify bindings
  • Feature Request: allows data binding for exits in gwd-taparea
  • Failure to switch between files created from some YouTube Masthead templates when the ci-ytclosebutton is selected

Version 1.5.1.1118 bug fix

Timeline events do not trigger on browsers that require vendor-prefix such as Safari 8.

Version 1.5.0.1117

New features since version 1.4.2.0915

Animation improvements

In the previous releases, when using the selection tool or transform tool to animate an element’s position or size, top/left or width/height property changes were used, which showed slow performance and caused choppy and jittery animation. Scale was not supported, and rotation animation was also limited. In this release, instead of saving CSS transforms using a matrix3d function, Google Web Designer now outputs the CSS transforms using translate3d, rotateZ, rotateY, rotateX, and scale3d functions which are easier to understand and modify.

  • When using the selection tool to animate an element’s position, translate3d is used in the keyframe rules
  • When using the transform tool to animate an element’s size, scale3d is used in the keyframe rules.
  • Scale settings are in the Properties panel
  • It is now possible to animate a rotation more than 360 degrees.
  • Animation created in the new release using Translation and Scale model is smoother and faster.

Note: Files with animation created in the previous version with top, left, width, height properties will not be converted to translation and scale. However, new animations will use translation and scale by default.

Other improvements in the Timeline/animation:

  • Timeline Looping: you can now specify the number of looping for an entire animation using the Events dialog:
    1. Add a timeline label at the start of your animation where you want the animation to loop from.
    2. Add a timeline event at the end of the animation and double click on the event marker to set the event:
      • Target = page id
      • Event = Timeline > event id
      • Action = Timeline > gotoAndPlayNTimes
      • Receiver = page id
      • Configuration = label name and number of loops
  • Pressing “Enter” as a shortcut to play and stop animation on stage has been added

Dynamic support for Studio

With the new release, DoubleClick Studio users can build dynamic creatives with data bindings within Google Web Designer. Users can bind Studio profiles to the dynamic properties of the elements such as text, exit URLs, images, background color and more using the Dynamic Panel.

Spritesheet Animator Component

Spritesheets can minimize the number of files in a creative, and give animators a familiar way to create keyframe animation. Designers can now load spritesheets (multiple images rendered into one file) as individual images on the stage or as a keyframe animations.

Street View Component

The Street View component lets designers put Street View imagery into their ads, and lets ad users interact with the street view images by panning and rotating the view.

Text Improvements

  • Improved stage interaction when creating or selecting a text element or selecting existing text. You can use the 'Esc' key to deselect text.
  • New handles to resize the text block.
  • Text is movable by dragging its edge.
  • Corner handles show the presence or width/height and/or left/top.
  • Timeline shows the text content when an element doesn't have an id.
  • Timeline shows text in thumbnail on multiple lines if needed.
  • Tag dropdown allows only text elements.
  • New contextual menu items allow to copy/apply text styles across documents.
  • After adding a web font, the last added web font will be automatically selected and applied to the selected text element.
  • 'Add web font' dialog allows filter on type style or category.

New Templates

  • GDN LightBox - This template lets users build cross-device Fullscreen Lightbox ads that adapt to various screen sizes and orientations, and once created can be directly uploaded using Publish to DoubleClick.
  • VPAID - This template enables the Video Player Ad Interface Definition, a protocol for communication between an ads and video players, which lets rich media ads be displayed within a video player environment.

Code Editor Enhancements

  • Search box: When searching (via keyboard shortcut CTRL/CMD + F) a new search box is displayed at the top of the editor. Pressing Enter will select the first result. Pressing enter again will move to the next occurrence. Pressing Shift+Enter will move to the previous occurrence.
  • Two new color themes for the code editor:
    • Light Theme reduces brightness contrast, but unlike many low contrast color schemes, it retains contrasting hues (based on color-wheel relations) for syntax highlighting readability.
    • Dark Theme uses an inverted color scheme, with minor adjustment on the background tones to better fit the overall UI.
  • Text shadow: introducing a subtle text shadow, we further smooth the perception of the text.

Swipable Gallery Improvements

  • A new Autoplay Step Interval property has been added to set the time for each frame to play during gallery autoplay. By default, the total autoplay duration is divided evenly to display each frame a single time, but setting the Autoplay Step Interval to a smaller value than the default will cause the gallery to start at the beginning and display frames multiple times.
  • Frame autoplayed event: during autoplay frame autoplayed will be dispatched on each frame, one after another, so that each frame is most recently "autoplayed" for an equal amount of time. This means that if frame-snap-interval is greater than one, the event will be dispatched multiple times between gallery transitions.

For example, frame-snap-interval and num-frames-to-display are set to two, and each page is visible for two seconds:

0s: dispatch "frame autoplayed" on frame 1

1s: dispatch "frame autoplayed" on frame 2

2s: transition to the next pair of frames

2s: dispatch "frame autoplayed" on frame 3...

Video Component Improvement

Added video Set Sources as an action in events flow

Change in Image Button Component Load Event

Image Button “Load” event is deprecated in this release. An “Image button loaded” (‘imagebuttonloaded’) event is added instead. This fixes problems where the load event could be sent multiple times, before the component was actually loaded, or not sent at all.

Creatives that were built using the load event will now show the event as a custom event, rather than an Image button specific event.

Fixes & Improvements since version 1.4.2.0915

Animation/Timeline

  • Jittery Animation
  • Not able to rotate more than 360 degrees
  • The rotation of Y axis is restricted at -90° and 90° in Properties panel
  • Inserting a keyframe in between adds matrix() in keyframes which causes issues in IE
  • [Feature Request] ‘Enter’ as the Shortcut Key for Play in the timeline
  • [Feature Request] Save layer settings such as show only animated layers, lock and visibility upon file-save
  • [Feature Request][Timeline] Please add configuration (N times loop) to gotoAndPlay

Components and Runtime

  • Galleries
    • [Gallery] [Groups] Groups are not previewed in the order as appeared in the Groups Attribute in the Gallery properties panel when the group has a bind-each binding.
    • [Feature Request] [Swipable Gallery] Add .firstVisibleFrameIndex and .lastVisibleFrameIndex properties to gwd-swipegallery to allow access to first visible item's index
    • [Galleries][Navigation] "First interaction" and "Left/right end" events not dispatched by interaction with gallery navigation
  • Video
    • [Feature Request] [Video] Add video Set Sources as an action in events flow
    • [Video] Mute toggle button issue: when setting the audio to 0 and then mute the player, it doesn't unmute properly
  • YouTube
    • [YouTube] Align supported YouTube Player attributes to the last release of H5 YouTube embedded player
    • [YouTube] Loop is not working
    • [YouTube] [Feature request] Introducing autoUnmute after interaction
    • [YouTube] Sound plays on YouTube Player while in intro/preview auto-play state on Masthead ad format.
    • [YouTube] Sound plays on YouTube Player while in intro/preview autoplay state on Masthead ad format.
    • [YouTube] Pause listener is fired twice when you collapse an expanding creative
  • Map is broken when going to the other pages
  • Image Button
    • [Image Button] - Flickering on first rollover
    • [Image button] Preview does not work in Firefox and Safari if Image Button Load event is used for setting the image sources.
    • [Image Button] Images are not included when using Save As
    • Add new 'Image Button loaded' event to replace its the broken 'load' event.
  • [Feature Request] Make Exit url an optional field. In AdWords Enabler, this field must be empty as the url is provided in AdWords UI. Even in Studio Enabler, the url field is optional as the URL may be provided in the Studio UI.

Dynamic

  • [Dynamic] [Preview] If previewing 2 or more dynamic files from the same project directory, the size of the ad will switch when selecting a different feed.
  • Switching Data Schema clears common feed attributes from Bindings

Events

  • [Feature Request] Display page name in the event configuration dialog instead of Page ID

Network Drive workflow

  • [Network drive] [Mac only]: Error 'Unable to download one or more files for gwd-doubleclick' when opening a file on the shared network drive
  • [Network drive] [Mac only] Fail to create a new file from templates when saving the file to the network drive
  • [Network Drive] [Mac only] Preview fails when files are on the network drive

Templates

  • [Store Locator] Add the "submit" function via the Enter key
  • [App Promo] Cannot move the "appBgGallery" swipable gallery component due to transform scale style set in the inline style
  • Two AdWords Dynamic remarketing templates listed under DoubleClick
  • [YouTube Masthead Templates] "Collapse on Exit" should be unchecked in the Youtube Masthead templates

Text

  • [Text][Quick Mode] Switching Tag type for the text element loses thumbnail view

Miscellaneous

  • [Linux] Assets with uppercase file extension are not listed in the file picker dialog for import
  • [Publish to Studio] Cannot sign in to Studio from GWD with accounts managed by third party company.
  • [Feature Request] View > Outlines settings are not remembered
  • Fonts don't work in IE and Firefox when using @font-face CSS style
  • [Library] [Network drive] [Mac only] Unable to delete from the Library when files are on the network drive
  • [SVG] Image size changes on stage after coming back from edit mode when it is grouped and Break apart
  • [Interstitial] [Match Viewport] No option to toggle on/off match viewport
  • Add "Match viewport" as an option when selecting the expanding environment.
  • Unable to draw div after using UNDO twice when using the CSS panel
  • CSS Top and Left have the exponential values when drawing a nested element and causes failed animation
  • [Stage] Right click on stage besides any element shows an empty menu.
  • Moving multiple elements with even a single 3D element will set 3D transforms on all selected elements

Known Issues

  • Video Component on iOS doesn't play a video multiple time if the source file .mp4 is the unique source. Workaround: include in the sources at least 2 video files. (it can be the same one repeated). Is CRUCIAL that the .mp4 is not the last video listed in the sources if other formats are used. Valid options are therefore:
    • 1.mp4, 1.ogv, 1.webm
    • 1.mp4, 1.mp4
    • 1.webm, 1.mp4, 1.ogv
  • White screen on launch if behind a web proxy. Please follow these instructions to change your proxy settings.
  • Mac Chrome, Opera, IE : Play button is not working in Google Web Designer Preview when Autoplay preview is on. Workaround: remove localhost from the URL to use file:///
  • Linux only: File drag and drop from the file system to Google Web Designer is not working. Workaround: use File > Import assets or Add asset from the Library
  • Downloading iCalendar ics file is not supported on Safari desktop browser.
  • It is not possible to have more than one map component or street view component, or a map and a street view component in the same creative.
  • Mobile Web: orientation change is not detected in Studio preview and on the devices
  • Linux only: if the browser (Chrome or Firefox) is launched by Google Web Designer for preview, Google Web Designer cannot be closed unless the browser is closed first.
  • Linux only: Google Web Designer sometimes loses focus and is unable to take keyboard input when switching between apps. Workaround: resize the Google Web Designer window to bring focus back to the app.
  • Linux Fedora only: Google Web Designer shell version 1.1.7 might fail to update to shell 1.2.5 due to missing Google signing key. To fix the issue, please follow these instructions to install the key and then run the update command for google-webdesigner.
Video tutorials

Percent Authoring overview

Percent Authoring Overview

Spritesheet component

Using the Spritesheet component

Animation updates

Animation updates

Template overview

Template Overview

AdWords Dynamic ads

AdWords Dynamic ads
Hangouts Hangouts Q&A
What is the current browser support? More specifically, does the software support IE10 and older versions of Android?
We currently support Android 4.4.1 and above (more than 95% of current android distribution). We also support windows IE10 (as today account for 0.6% of our total served impressions).
How can you add a generic clickTag for use with other platforms besides DCM?
When publishing for DoubleClick or AdWords platform we take care of translating the clickTag according to the environment, so by using the same tap area we can handle creative for DBM, Adwords, as well as DCM. For 3rd parties adServers, we advise to create a custom EVENT attached to the Tap Area component, where you will be able to add any custom code.
Is there a file compression tool you might look to integrate into Google Web Designer?
Built-in File compression would be great and something we will consider. There are a lot of great compression apps out there, so for now we let users take care of their own image compression.
Why doesn't the integrated template Expanding_Video_And_Map_160x600_300x600_v1_2 work on my mobile device running on wp8.1?
Due to the fragmented landscape of mobile, we are testing against the majority of platforms / operative system, covering over 98% of the devices we are serving our impression to. We will keep investigating the support for additional platforms and we appreciate your feedback.
If I'm hand-coding ads, are there reasons to switch to Google Web Designer? Does the Google Web Designer team approve of hand-coding?
Creating in the Design view and hand coding compliment each other very well. You can do a lot without hand coding in Google Web Designer but you can do a lot more if you hand code in a Google Web Designer file. We are working on improving the code editor and the component workflow. These things are getting started now and improvements will continue to roll out in this area in coming releases.
Are you planning to do some video tutorials about dynamic ads and lightbox ads?
You can view our dynamic and lightbox tutorials here:
What are the advantages using Google Web Designer compared to Edge Animate?
Google Web Designer is very powerful for creating Ads. We have focused on this use case heavily so it is a really great choice right now for that workflow. We make sure our code is human readable and editable and the code quality is really good. Hardware accelerated CSS animation is also very efficient. We will continue to quickly add new features; so far we have averaged one major release every 3 months or so as well as small patches when needed. In 2016 we will deliver a ton of great features and enhancements.
Is it possible to export a feed from sheets or Studio to .json format to use to locally test a dynamic creative?
It is not possible to use a .json file to test locally. However, you should be able to test by changing the H5 generated code in Google Web Designer’s code view.
Can you bring a group from one file into another file?
No, this is not currently supported, but it is under consideration.
We are using WOFF font files to support custom fonts. It looks a good solution. Can you see any limit or compatibility issue?
We're continuing to enhance font and text functionality. There are no restrictions for loading in other web font libraries, however we currently only provide font management with Google Fonts.
Will it be possible to use our own webfonts on ads and store them "outside" of the ad, like in a resource gallery in order to reduce the ad size?
The ability to use custom fonts and reduce ad size are currently being researched and something we plan on focus on in 2016.
When is your next hangout?
The Google Web Designer team will do a hangout each time we launch a major release.
Are there any changes coming to the rules for ad sizes, or is this something Google is thinking about? Right now there are a lot of weight issues with ads when we use the web designer (or any other platforms).
There is an industry push to change specs for HTML ads. Publishers are updating specs from the 75kb/150kb allowed for Flash to 150kb/450kb for HTML5 code. Internally we continue to optimize the file size of external components, as well as reduce code overhead. We are also exploring image compression as part of the ‘Publishing’ process.
When we are making a big campaign, in flash we use to copy and paste all the frames and animation. Will it be possible in Google Web Designer to copy and past the entire timeline with the events? It's the same when you duplicate a page - you lose all the events.
These are great ideas that we have considered. We will focus on these in a future release.
Will these features be compatible with AdWords or only DoubleClick?
These features will also work on AdWords, although Streetview map component is currently not supported. You can view all of the AdWords supported components here: https://support.google.com/adwordspolicy/answer/176108#html5_ads_table
If you can't bring groups from one file into another, is there a way to retroactively change the type (from DoubleClick to standard HTML ads, for instance)?
This can be done by editing the code, as we currently do not have UI in place for this. Please see our pinned post on the forum: https://groups.google.com/forum/#!topic/Google Web Designerbeta/OvvG6Kg4P7c
In carousel component, could we add arrow control to navigate to both directions, instead of swiping?
This functionality is available now via the Tap Area component. You can find more information about the component in this Help Center article: https://support.google.com/webdesigner/answer/3220698
It would be great to have an "infinite" gallery option within your swipe gallery component. & Is it possible to keep scrolling in one direction, to loop through the gallery?
This is in our pipeline and we are looking to add this feature possibly in the spring release. There is a workaround with a limitation: It is possible to use our event system to loop the gallery forever, but this makes the autoplay impossible to ever stop. Normally, when the user swipes to a different frame during an autoplay, the autoplay will be cancelled, but not if you use this workaround. If this is still useful in your case, this is how it can be done:
  1. Add a gallery component to your document, and add images
  2. Press the [+] button in the Events panel to define a new event handler
  3. Select event target: your gallery
  4. Select event type: gallery -> frame shown
  5. Select action: gallery -> rotate once
  6. Select receiver: your gallery
  7. Enter the desired rotation duration
  8. Save
Will it have a default option to create a polite load?
We have support for polite loading in our Publish dialog and it is checked by default as well. You can find more information in our Help Center article: https://support.google.com/webdesigner/answer/3250387
You mentioned Google Web Designer supports IE10 regardless it being .6% of popularity. Will it support IE9? I develop for a target market that 11% of them use IE9.
We are embracing HTML5 and modern browsers and unfortunately cannot support IE9.
How about copy and paste between 2 different docs?
We will launch this in a future release.
Does Google Web Designer have support for masking?
We've researched a solution and will be working on it in 2016.
Is there any support for easing?
Yes, in the timeline you can click on a transition bar or frame and then select between preset or create your own easing function. You can find more information in the following articles: https://support.google.com/webdesigner/answer/3227054 and https://support.google.com/webdesigner/answer/3227667
Will this session be a recorded video to play again later? You mentioned that you will have improved timeline function in 2016. Will you be able to copy frames and paste frames?
Yes. This is something we will focus on.
Would you be able to upgrade the code view a little bit, like search and replace?
Yes. Lots of work on this area in 2016.
Will it be any integration to libraries like Tweenmax?
You can work with any JS library in Google Web Designer through the code view but currently we don't have plans to directly integrate our animation with a specific library.
Are you going to add guides to the rules of the Google Web Designer?
We will file this as a feature request.
Can we add custom classes to some elements in code view?
Yes, this can be done now.
When you copy a component, it loses its events, so when you have multiple buttons you have to re-enter all the events again.
We will file this as a feature request.
Do you need to insert clickTag in Google Web Designer or can you do it in DoubleClick?
You don't need to add the exit url in Google Web Designer, but you do need to use a Tap Area and then you can always override the exit in DoubleClick Studio (same for DCM).
Google Web Designer should upload the backup image to DoubleClick
We will file this as a feature request.
How can you retroactively change the file type (DoubleClick to standard HTML, for instance)?
Yes, we have instructions here to change the ad environment: https://groups.google.com/d/msg/Google Web Designerbeta/OvvG6Kg4P7c/WZYhqCwbZ3kJ
In DoubleClick studio, an alert message appears for the primary file weight greater than 75k. My understanding is we should go by the compressed size? Is that not correct? Why is studio alerting based on raw file size?
This is a known issue and the DoubleClick Studio team is aware of it.
Is it possible we could see the compiled size within design UI? For example, if we could have a quick button and click to tell what is current file size (compressed and not compressed?)
Yes. This is a feature we are working on for 2016.
Is there a way to make my ad start its animation when it's on viewport?
We will file this as a feature request.
It could be nice if you have the mobile preview function for fluid banners
We will file this as a feature request.
Perhaps to resolve the file size issue, there could be an easy way to strip the CSS/JS into separate files — I manually did that for ads we created earlier.
Ads size file issues have been a major issue in the industry and the shift to HTML5 ads is starting to generate a lot of standards conversations. We're hoping that the ad size limit can be expanded from 75k to 150k for standard creatives to 450k for polite load creatives. On our side, we're also hoping to improve compression on the components and the overall runtime.
Can images be linked in?
It is possible to use an external link instead of relative path in code view, however you will not be able to see and preview the image because of sandbox restrictions. You may also want to consider third party serving restrictions, some ad servers may not allow this. We are working on a way to see and preview on stage in Google Web Designer.
SVGs were not allowed to be used as dynamic images before. Are they now or will they be?
It is not currently on the radar to use SVGs in dynamic ads, but this is something we can look into further.
What about using a Product Feed with thousands of products instead a custom one as you did in the example with just 4 products? Will it be possible?
The feed can contain many products, however when we use Google Web Designer to bind and select the profile we get a selection of 4-5 products. The idea is to test the creative and layout in Google Web Designer and then bring it back to Studio. From Studio you can test different criteria and make sure the right set of products are being selected.
Was this article helpful?
How can we improve it?