Web Designer Blog
The latest news and tips from the Google Web Designer team
Using Pages with custom code in Google Web Designer
Monday, March 28, 2016
As you probably know, Google Web Designer has a Pages construct that can be used to create new scenes in your storyboard. No matter where you are in your creative, you can add a new page to create additional functionality.
In this article we’ll have a look at two unique use cases where pages can be used; to repeat animation sequences, and to enforce polite loading of assets.
Looping between animation sequences
Let’s assume we have this storyboard:
In this storyboard, we want to transition 3 times between sequence A and B, and after that we move to sequence C, where we place our call to action.
There are a few ways we can achieve this. One way is to create a full length animation in one continuous timeline, recreating the A to B animation 3 times, and then transition to the part C of our storyline. While this will work, we’ll need to create and manage a lot of layers and animations keypoints, which is not ideal.
Another way would be to create 7 different pages, and recreate the same animation on pages 1,3,5 and 2,4,6. Then we’d need to add an event on each page to move to the next one. While this is better than the previous solution, it still creates a lot of unnecessary duplication.
A much cleaner way to handle this storyboard would be to use three pages, one for each sequence, and loop between the pages using some custom code. So let’s get started:
First, create a new Ad, and add 2 new pages. You should have now 3 pages – in this example we’ll call them pages A, B and C.
While staying on page A, we’ll create the global variables that we will use to control how many times to repeat the transition between A and B. From the event panel, click the ‘+’ button, and add the following custom event:
Target: document.body
Event: Google Ad > Ad Initialized
Action: custom
Custom Code: see the image above
Create the animation you want on page A, then go to the end of the Event timeline and add an event by right-clicking. Double-click the event marker that you just added, and define a new event like this:
Target and Event are automatically detected after clicking the event marker in the timeline.
Action: Page Deck > Go to Page
Configuration: Page ID: Page B.
This will tell Google Web Designer to move to page B after animations on page A are finished.
Go to page B, and create the animation you want in this phase of your ad.
As you did for page A, go to the end of the timeline and add a new event by double-clicking on the Events timeline.
Create a new event, but this time, under Action, select “Add custom action” and add the following custom code:
Let’s have a look at the code:
gwd.currentLoop++;
if (gwd.currentLoop < gwd.totalLoops) {
//Loop the animation, and go to page A
document.querySelector('[is="gwd-pagedeck"]').goToPage('pageA');
} else {
//No more loop, go to page C
document.querySelector('[is="gwd-pagedeck"]').goToPage('pageC');
}
In the first line we are incrementing the variable currentLoop. This is how we note the completion of a new iteration of the loop A->B. In the “If” statement, we are checking to see if we’ve completed all the loops that we intended. If we have, we move to PageC, otherwise we move back to pageA.
This lets us create a complex animation with multiple sequences without a lot of duplication or unnecessary layers.
Postponing asset loading
Publisher’s specs can often have restrictions that limit the size of the assets. For example assets may be limited to 75kb for polite loading, animation may require user interaction, or the ad may have a maximum size of 10MB.
Google Web Designer already offers a ‘Polite Loading’ option in the publish window, but let’s take a look at using pages to give us more control of how the assets load.
Let’s assume we are creating a masthead ad, and we want to display a 10 second looped video, and then show a longer video on user interaction (such as a rollover). The publisher specs for this campaign require a maximum of 1.5 MB page load, with a maximum of 10MB after user interaction. Since you can’t load both the video on page load, what can we do? You got it, we are going to use two pages! We’ll place the 10 second video on the first page, and on the second we’ll put the full length video.
Did you know?
The resources on a page are loaded only when that page is displayed for the first time! This is a great way to load only the assets that you really need.
First, create an ad, then add a second page. Place the short video on the first page, and the longer video on the second. Then create a new event like this:
Target: document.body
Event: Ad.initialized
Action: custom
In the custom action, we are creating a new global variable that keeps track of the user interaction. We have set it to false as a starting state.
Now we’ll add a new event, this time choosing the video on the first page as the target, and for the event we select Mouse > mouseOver;
We are now changing the state of our global variable every time there is an user interaction (rollover) on the first video.
Finally, we need to add one last event:
Target: video on the first page
Event: Video > ended
Action: custom
The custom code we’re using looks like this:
if (gwd.userInteracted) {
document.querySelector('[is="gwd-pagedeck"]').goToPage('page1_1');
}
Here, we are checking to see if an interaction has happened, and when it has, we move to the second page.
In this example, we used three events to avoid jumping directly to page2 after the user interaction; we wanted to be sure that the video on page 1 had played completely. This way we can create a seamless transition between the 2 videos, giving the impression of a single video.
I hope these examples inspire you to think about what you can do using pages together with some simple custom events. Give it a try, and let us know what you think.
Posted by Nicola, 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
