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.
Create a new file
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
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
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 = {function return /Android/i );function return /BlackBerry/i );function return /iPhone|iPad|iPod/i );function return /Opera Mini/i );function return /IEMobile/i );function return function var 1 function return 1 window .navigator.userAgent.toLowerCase().indexOf(n)return "ontouchstart" in window || navigator.maxTouchPoints > 0 0 "NT 5" ) || o("NT 6.1" ) || o("NT 6.0" ) || (n = !0
Add a call to action
/* * Edit the lines below to modify your CTA or other elements as necessary. */ if "cta" ).textContent = "Tap to Expand" ;"cta" ).textContent = "Hover to Expand" ;Posted by Nicola Bortignon, Software Engineer
Do we need to detect the device using custom code in order to add both click/touch and mouseover events?
ReplyDeleteCan't we add both events without detecting the device?
sure, you can add both events without detecting the device.
ReplyDeleteIn this example we just detect the device in order to change the call to action (instead of using 'Click here' we use 'Touch here' based on the device).