Web Designer Blog
The latest news and tips from the Google Web Designer team
Building cross-device Lightbox creatives with Google Web Designer
Tuesday, March 8, 2016
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:
Select the “Fullscreen Lightbox” option in the dropdown for “Expansion Mode”.
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.
Choose a name for your creative and select any other important file properties
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.
Add a new event by selecting the plus (+) button in the Events panel.
Select the "expand-button" element as the target then choose "Mouse > mouseover".
Choose "Google Ad > Go to page" and "gwd-ad" as the receiver.
In the Configuration panel, for Page ID, select the Expanded page and click
Save
.
Remove the close button
Click the page indicator at the bottom of the stage and switch to the Expanded page.
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.
Switch to the Banner page, then add a new event by selecting the plus (+) button in the Events panel.
Select "Banner page" as the target, then "Page > Page activated", "Custom > Add custom action".
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
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
March
Using Pages with custom code in Google Web Designe...
Helping developers bring their creative vision to ...
Creating Looping Animations with Google Web Design...
Building cross-device Lightbox creatives with Goog...
February
Feed
Follow @googlewdesigner
