Exploring gallery components in Google Web Designer

Originally posted on the Google Web Designer blog on April 18, 2017, by Jeremy, Software Engineer.

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 "Select 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 section for the Swipeable Gallery component, we have two more properties for controlling autoplay behavior. The first is fairly self-explanatory: the Autoplay duration property 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 the gallery moves to the next frame during autoplay. By default, this property is not set, and the total autoplay duration will be divided by the number of frames 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 autoplay. The autoplay will stop 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 these options:

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 that corresponds to the product they clicked on. This behavior 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, let's say 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.

Then 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 > Add custom action
Configuration Custom Code:
  • 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 > Add custom action
Configuration Custom Code:
  • 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 over, 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 in the Images property, and paste it in the Images property 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 the Carousel Gallery follow along with the Swipeable Gallery autoplay:

Target gwd-swipegallery_1
Event Swipeable Gallery > Frame autoplayed
Action Custom > Add custom action
Configuration Custom Code:
  • Name: gwd.syncCarousel
  • Code:
    document.getElementById(
      'gwd-carouselgallery_1').goToFrame(event.detail.id);
 

Then we'll add two more event handlers to respond to viewer taps and hovers. We'll also have these cancel the autoplay if it's still active, since we don't want the autoplay to suddenly change the carousel frame again after it's just changed in response to a mouse hover.

Target gwd-swipegallery_1
Event Swipeable Gallery > Mouse over a frame
Action Custom > Add custom action
Custom action Custom Code:
  • 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 Element tool to draw a plain div 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!

Was this helpful?

How can we improve it?

Need more help?

Try these next steps:

Post to the help community Get answers from community members
false
Search
Clear search
Close search
Main menu
14954994949109905582
true
Search Help Center
true
true
true
true
true
5050422
false
false
false
false