In this blog post we explore how to use Google Web Designer to create Lightbox creatives which can adapt to any screen size and device orientation.We’ll also take advantage of ready to use components, reduce the amount of custom code you need to write, and directly publish to DoubleClick Studio.


(Left, the engagement state in mpu 300x250 size. Right, the expanded state featuring an image gallery).

Lightbox, also known as Engagement Ads, are one of the most interesting ad formats on the web. They are usually composed by two parts, the invitation state and the engaged/expanded state. The user is required to rollover the invitation state for 2 seconds before the expansion is triggered. The nature of the interaction results in high performing ads, where the user interaction is highly valued because there is a clear intent to further explore the content advertised.

Create a new file


To create a new Expandable creative in Google Web Designer:

  1. Select the “Fullscreen Lightbox” option in the dropdown for “Expansion Mode”. 
  2. Enter any expanded size-for example 800x500.The expanded size can be any size that you are comfortable working with, however this dimension is ignored at expansion time. The Fullscreen API will use the entire available screen size across all devices. 
  3. Choose a name for your creative and select any other important file properties 
  4. Click Ok 
You will see two pages created: Banner Page and Expanded Page.


Add an event to listen for Desktop mouseovers


For the Lightbox to function correctly on both Desktop and Mobile we need to add an additional event to respond to mouseovers on Desktop. There is an existing touch/click event already added to the expand-button element so we will add the same functionality for mouseover.

  1. Add a new event by selecting the plus (+) button in the Events panel. 
  2. Select the "expand-button" element as the target then choose "Mouse > mouseover". 
  3. Choose "Google Ad > Go to page" and "gwd-ad" as the receiver. 
  4. In the Configuration panel, for Page ID, select the Expanded page and click Save. 


Remove the close button

  1. Click the page indicator at the bottom of the stage and switch to the Expanded page. 
  2. Remove the close button tap area. The close button isn't needed because the Lightbox API will add a close button automatically.


Detect devices


Add device detection code to change the expansion CTA text depending on the device. We need custom code which detects whether the creative is served to a mobile device or to desktop.

  1. Switch to the Banner page, then add a new event by selecting the plus (+) button in the Events panel. 
  2. Select "Banner page" as the target, then "Page > Page activated", "Custom > Add custom action". 
  3. Give the function a name, for example “detectMobile” then copy and paste the following code: 
gwd.isMobile = {
Android: function() {
 return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
 return navigator.userAgent.match(/BlackBerry/i);
}, iOS: function() {
 return navigator.userAgent.match(/iPhone|iPad|iPod/i);
}, Opera: function() {
 return navigator.userAgent.match(/Opera Mini/i);
}, Windows: function() {
 return navigator.userAgent.match(/IEMobile/i);
}, any: function() {
 return (gwd.isMobile.Android() || gwd.isMobile.BlackBerry() || gwd.isMobile.iOS() ||
gwd.isMobile.Opera() || gwd.isMobile.Windows()) && gwd.hasTouchScreen();
 }
};
 gwd.hasTouchScreen = function() {
 var n = !1,
 o = function(n) {
 return -1 !== window.navigator.userAgent.toLowerCase().indexOf(n)
 };
 return ("ontouchstart" in window || navigator.maxTouchPoints > 0 ||
navigator.msMaxTouchPoints > 0) && (o("NT 5") || o("NT 6.1") || o("NT 6.0") || (n = !0)), n
};

Add a call to action


Now add a CTA text element to the stage and name it "cta". You can name it whatever you want, but note that the ID name will need to match the ID in the code in the next step. Double-click on the "pageactivated" event in the events panel or switch to code view and edit manually.

Add the following code to the end of the "detectMobile" custom function. This modifies the CTA text based on whether a mobile device was detected.

/*
* Edit the lines below to modify your CTA or other elements as necessary.
*/

if (gwd.isMobile.any()) {
 gwd.actions.events.getElementById("cta").textContent = "Tap to Expand";
} else {
 gwd.actions.events.getElementById("cta").textContent = "Hover to Expand";
}

You now have the basics for a cross-screen compatible Lightbox creative. From here you can begin to add components and visual elements you wish to work with and position them using the percentage dropdown instead of fixed pixels.

To choose between pixels and percentages:



Click the measurement unit (px or %) and select the unit you want to use from the pop-up. Percentage values are based on the size of the enclosing container.

And that’s it! This is basically all you need to do in Google Web Designer to get a ready-to-use creative. Once you have the hang of it, try some of the other available components. Have fun!
Posted by Nicola Bortignon, Software Engineer