Web Designer Blog
The latest news and tips from the Google Web Designer team
Google Web Designer Tips - Part 2
Wednesday, January 24, 2018
This document compiles the top tips collected from years of helping users on the
forum
, and from the
Google Web Designer blog posts
.
1. Writing custom actions for events
Issue
: when you need an action that is not available in the Events dialog.
Solution
: You can write custom actions in Google Web Designer easily using the following tips:
Use the
setTimeout
method to call a function or evaluate an expression after a specified number of milliseconds (see example 1 below).
Add an event to perform an action, then copy that action in Code view to use in your custom action (see example 1 below).
Use Code view to add a global variable (under the line window.gwd = window.gwd || {};) if you want to set a flag and only trigger an event when the condition is true (see example 2 below).
If you want to use an event that isn't listed in the Events panel (e.g. ‘change’), you can add an event that exists in the Events dialog, then edit it in Code view (see example 3 below).
Check our help page on
Component APIs
for properties, methods, events, and more examples.
Example 1: go to a different page after 5 seconds (use setTimeout)
Note: this tip can be used to go to another page after 30 seconds to meet the
AdWords requirements
that state animations cannot last longer than 30 seconds.
In this example, there is an animation that loops infinitely in the first page and a second page without any animation. We will add an event so that 5 seconds after the first page is shown, it will go to the second page.
To start, we want to find the code that goes to the second page so that we can use this in our custom action. This can be done by adding an event to go to the second page. The specific event doesn’t matter, since we're only concerned with the action at this point (going to the second page).
Open the Events panel and click on the + button to add an event.
Select the page ID for the first page as the Target.
Select
Mouse > Click
as the Event.
Select
Google Ad > Go to page
as the Action.
Select
gwd-ad
as the Receiver.
Select the second page (page1_1 in this example) in Configuration. You may also set other settings such as the transition type, duration, etc.
Click
OK
to save.
Switch to Code view and find: script type="text/javascript" gwd-events="handlers". Copy the action code for going to the second page.
Switch back to Design view. Now we will add the custom action to be triggered 5 seconds after the page is shown.
On the first page with animation, click the + button in the Events panel to add an event.
Select the first page ID as the Target.
Select
Page > Ready to present the page
as the Event.
Select
Custom > Add custom action
as the Action.
In the Custom Code dialog, name your function. In this case, you might use a name such as after5s. Then enter the following code, pasting the action code that you copied previously:
setTimeout(gotoPage, 5000); function gotoPage() { gwd.actions.gwdDoubleclick.goToPage('gwd-ad', 'page1_1', 'none', 1000, 'linear', 'top'); }
Click
OK
to save.
Remove the first event that you added just to generate the action code to copy:
You now have the
working file
that goes to the second page 5 seconds after the first page is shown.
Example 2: use timeline events to loop the ad through all pages twice.
In this example, the ad has 3 pages with animation, each with an event to go to the next page after the animation is finished.
The ad loops through all the pages twice, i.e., page 1 > page 2 > page 3, looping one more time and ending on page 3 after the second loop. Let’s add timeline events on each page to go to the next page at the end of the animation.
Add a timeline event to go to the next page at the end of the animation
On the first page, at the last keyframe, right-click on the Events layer and select
Add event
.
Double-click on the event marker to open the Events dialog.
Select
Google Ad > Go to page
as the Action.
Select
gwd-ad
as the Receiver.
In Configuration, select the page ID of the page to go to. In this example, it’s page2. You may also set other settings such as transition type, duration, etc.
Click
OK
to save.
You can edit this event by double-clicking on it in the Events panel.
Repeat the steps above to add timeline events for the other pages. On the last page, configure the event to go back to the first page.
The Events panel should show the following timeline events:
When you preview the ad, it will start with the first page, go to the next page at the end of the animation, and continue to loop. Next, we will set the ad to loop through the pages once and stop at page 3.
Use a counter to keep track of the loop
Add a global variable as a counter by going to Code view and searching for window.gwd.
After the window.gwd line, add the following code to initialize the counter: var counter = 1;
On the last page (page3 in this example), only go back to page1 if the counter is less than 2, then increment the counter. To do this, go to Code view, look for the action that goes to page1, and copy it. It'll look like this: gwd.actions.gwdDoubleclick.goToPage('gwd-ad', 'page1', 'none', 1000, 'linear', 'top');
In Design view, go to page 3, and double-click on the event marker at the end of the animation to add another timeline event. Select
Custom > Add custom action
in Action.
Type in a function name such as count.
In the code text area, enter code to check whether the counter is less than 2, paste the code to go to page 1, then increment the counter like this:
if (counter < 2) { gwd.actions.gwdDoubleclick.goToPage('gwd-ad', 'page1', 'none', 1000, 'linear', 'top'); counter++; }
Click
OK
to save.
In the Events panel, remove the timeline event on page3 that goes back to page1 now that we have the custom action with the counter to do that.
You now have the
working file
that loops twice through the 3 pages and stops at page 3.
Example 3: use custom events
In this example, you will draw a text input element on the stage and add a ‘change’ event to output the text content in the console when the Enter or Tab key is pressed.
Select the Element tool in the Toolbar.
Click on the custom element and type input in the Element field.
Draw the input element on the stage and give it an ID in the Properties panel.
Right-click on the input element on stage and select
Add event...
Select
Mouse > click
as the Event.
Select
Custom > Add custom action
as the Action.
Type in a function name such as myInputChange.
In the code text area, add the custom action to log the value of the input field to the console when it's changed:
inputContent = document.getElementById('input').value; console.log(inputContent)
Click
OK
to save.
Now we will replace the click event with a change event in Code view in 2 places:
When you switch back to Design view, you'll see the change event in the Events panel and you can edit it further as needed.
You now have the
working file
that outputs the input text content in the console window when there is a change event in the input field, i.e., the input’s value is committed on an Enter or Tab keypress.
2. Adding global variables in Design view
This tip describes how to add a global variable in Design view without switching to Code view.
Click on the plus button in the Events panel to add an event.
Select
document.body
as the Target.
Select
Google Ad > Ad initialized
as the Event.
Select
Custom > Add custom action
as the Action.
Give the function a name such as declareVars.
In the code section, declare and initialize your variables with the gwd. prefix such as gwd.myCounter = 0;
When the ad is initialized, the global variables can be used anywhere in your file.
Attached is the
example
that traces the gwd.myCounter variable in the browser console log using a timeline event at the first keyframe.
We hope you have enjoyed these tips, and don't forget to download the working files and give these solutions a try!
Posted by San K, Google Web Designer Team
Labels
3D
animation
animations
BYOC
carousel
clips
css
CTA
custom code
Display
DoubleClick Bid Manager
DoubleClick Studio
dynamic
engagement ads
English
events
exit
fluid layout
gallery
google cultural institute
google web designer
Google Web Designer Blog
groups
HTML5
javascript
lightbox
looping
masking
new release
new version
pages
publish
responsive
sales animation
swatches
swipeable
text
timeline
UI
Archive
2018
January
Google Web Designer Tips - Part 2
2017
December
April
March
2016
November
June
May
April
March
February
Feed
Follow @googlewdesigner
