Web Designer Blog
The latest news and tips from the Google Web Designer team
Exploring gallery components in Google Web Designer
Monday, April 18, 2016
In this article we'll be exploring the advanced capabilities of Google Web Designer's gallery components. Together we'll author a standard 300x250 banner ad, which presents a selection of product images, and enhance it as we go.
To start, we'll add a Swipeable Gallery component to our document by dragging a new instance from the Components panel to the stage. Click on the gallery to select it on the stage, then go to the Properties panel and click the icon next to the Images property to open the Gallery Images dialog. Import a few images (I'm using six) and hit OK.
We now have a swipeable gallery of images, but this may not be apparent to viewers. In its initial configuration a Swipeable Gallery will only display a single product image, and its appearance will never change unless the viewer swipes on it. They're likely to assume that it's just a static image. Let's make that clearer.
Autoplay
To demonstrate that the image the user sees is actually a swipeable gallery, we'll configure the gallery to automatically play through its contents. The first step is to check the "Autoplay" box in the component's Properties panel. By default this will automatically play through the gallery contents once over a period of three seconds, but let’s customize that.
Under the "Advanced properties" dialog for the gallery component, we have two more properties for controlling autoplay behaviour. The first is fairly self-explanatory: the "autoplay duration" properties defines the amount of time (in milliseconds) that the gallery plays automatically. At the end of this duration, it will jump back to the first frame. Note: You may want to be cautious with how large you make this value. Most ad networks have limits regarding how long animations are allowed to run without viewer interaction. We'll go ahead and set ours to 18000 (18 seconds).
The other autoplay property is "autoplay step interval". This controls how long each frame is displayed before moving to the next frame during autoplay. By default, this property is not set, and the total autoplay duration will be divided in order to display each frame exactly once. So given our example of 18 seconds for 6 frames, each frame would be displayed for three seconds. We'd like something a bit faster, so we'll enter an autoplay step interval of 1500 (1½ seconds). This will result in each frame being displayed twice during the autoplay. The autoplay will be stopped immediately if the viewer swipes on the gallery.
Exiting the Ad
Our creative is still missing an essential capability: a way for the viewer to jump to the product page by exiting the ad. It's common to use the Tap Area component to mark a section of the ad as tappable, and add an event handler to exit to a given URL when the viewer taps. However, if you place a Tap Area component on top of the gallery, the viewer will not be able to swipe through the gallery because those swipes will be intercepted by the Tap Area instead. This may be suitable for some cases, but it's not what we're looking for here.
If we only have a single landing page for all of the products, we can add a single tap event handler to the gallery which exits to that page. We do this by pressing the "+" button in the Events panel and selecting:
Target
: gwd-swipegallery_1
Event
: Swipeable Gallery: Frame tap
Action
: Google Ad: Exit ad
Receiver
: gwd-ad
Configuration
:
Metrics ID
: frameexit (or an ID of your choice)
URL
: http://example.com/all-products
However, we often have separate landing pages for each product, and would like to send the viewer to the one corresponding to the product they clicked on. This behaviour can be enabled by using the "Exit URLs" advanced property of the gallery. Exit URLs is a comma-separated list of URLs corresponding to each product in the gallery. For example, if the products in our gallery had pages at the following URLs (in gallery order) - http://example.com/product-1, http://example.com/product-2, http://example.com/product-3, etc, we could then assign them to their respective frames by setting Exit URLs to the following value:
http://example.com/product-1,http://example.com/product-2,http://example.com/product-3,http://example.com/product-4,http://example.com/product-5,http://example.com/product-6
If you don't want a given frame to trigger an exit, you can leave its entry in the list empty. For example, if you only wanted the third frame to trigger an exit you could set Exit URLs to the following value:
, , http://example.com/product-3, , ,
Note: When you’re using Exit URLs this way, you cannot include a Frame tap event.
Pages of Multiple Frames
We can further configure the gallery to display multiple products at once, essentially grouping our frames into pages with multiple frames beside each other.
Let’s begin by setting the Swipeable Gallery component properties "Show Frames" and "Swipe Frames" to 2.
This will split the gallery's horizontal space between the available frames, and scale down the frames to fit (this behavior can be controlled by the "scaling" property). Clicks on each frame will still be recognized separately.
During autoplay we may still want to draw the viewer's attention to one item at a time, even if multiple images are visible. In order to support this, there is a "frame autoplayed" event which will be fired for each frame individually during autoplay, at a consistent interval. To enable this functionality we will use a custom JavaScript event handler to define the behavior we want. In this case, we'll dim the frames that are not currently activated.
Target
: gwd-swipegallery_1
Event
: Swipeable Gallery: Frame autoplayed
Action
: Custom
Custom Action: New
:
Name
: gwd.fadeOtherFrames
Code
:
var frames = this.querySelectorAll('.frame');
var activeFrame = this.getFrame(event.detail.id);
for (var i = 0; i < frames.length; i++) {
if (frames[i] == activeFrame) {
frames[i].style.opacity = 1.00;
} else {
frames[i].style.opacity = 0.25;
}
}
When autoplay completes or is interrupted, the "autoplay ended" event will be fired. We'll use this to restore all frames to full visibility:
Target
: gwd-swipegallery_1
Event
: Swipeable Gallery: Autoplay ended
Action
: Custom
Custom Action: New
:
Name
: gwd.restoreFrames
Code
:
var frames = this.querySelectorAll('.frame');
for (var i = 0; i < frames.length; i++) {
frames[i].style.opacity = 1.00;
}
Adding a carousel gallery
In this final section, we're going to get a bit fancier. To increase the emphasis on the active product, we're going to add a large Carousel Gallery component above our Swipeable Gallery, and put the same images in it. Whenever a frame in the Swipeable Gallery is autoplayed, hovered, or tapped, we'll also rotate the Carousel Gallery to display it. The end result will look something like this:
Let’s start by dragging a new Carousel Gallery component to the stage. Select the Swipeable Gallery, go to its Properties, copy the list of Images and paste them in the corresponding Properties field for the Carousel Gallery. Next we’ll, set the Carousel Gallery's Start Frame property to 1, to match the Swipeable Gallery and use the Transform control to resize and lay out the galleries.
Now we'll add an event handler to have it follow along with the autoplay:
Target
: gwd-swipegallery_1
Event
: Swipeable Gallery: Frame autoplayed
Action
: Custom
Custom Action: New
:
Name
: gwd.syncCarousel
Code
:
document.getElementById(
'gwd-carouselgallery_1').goToFrame(event.detail.id);
Then we'll add two more, which will respond to viewer taps and hovers. We'll also have these cancel the autoplay, if it's still active, since we don't want autoplay to suddenly move the carousel again after it's just moved in response to a mouse hover.
Target
: gwd-swipegallery_1
Event
: Swipeable Gallery: Mouse over a frame
Action
: Custom
Custom Action: New
:
Name
: gwd.stopAutoplayAndSyncCarousel
Code
:
this.stopRotation();
document.getElementById(
'gwd-carouselgallery_1').goToFrame(event.detail.id);
Target
: gwd-swipegallery_1
Event
: Swipeable Gallery: Frame tap
Action
: Custom
Custom Action
: gwd.stopAutoplayAndSyncCarousel
Finally, we need to prevent the viewer from swiping or clicking on the Carousel Gallery since it's not meant to be moved independently, but instead to track the movements of the Swipeable Gallery. We do this by using the tag tool to draw a plain element on top of the Carousel Gallery, to intercept any taps and swipes. This leaves us with the following stage layout and events:
Click the Preview button, and you should see the galleries appear in your browser and start autoplaying. Try swiping through the lower gallery and watch the top one follow along, or click one of the lower gallery frames to exit the ad.
Feel free to take the gallery components for a spin, and let us know what you think in the blog comments!
Posted by Jeremy, Software Engineer
Labels
animation
animations
BYOC
carousel
clips
css
CTA
custom code
Display
DoubleClick Bid Manager
DoubleClick Studio
dynamic
engagement ads
events
exit
fluid layout
gallery
google cultural institute
google web designer
groups
HTML5
javascript
lightbox
looping
masking
new release
new version
pages
publish
responsive
sales animation
swatches
swipeable
text
UI
Archive
2017
April
March
2016
November
June
May
April
Popular Questions from the Google Web Designer For...
Exploring gallery components in Google Web Designe...
Five features to explore in Google Web Designer
Interactive Design with CSS and Events
March
February
Feed
Follow @googlewdesigner
