Google Web Designer Tips: Part 2

Originally posted on the Google Web Designer blog on January 24, 2018, by San K., Google Web Designer Team.

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
   • Example 1: go to a different page after 5 seconds (use setTimeout)
   • Example 2: use timeline events to loop the ad through all pages twice
   • Example 3: use custom events
2. Adding global variables in Design view

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 Google Ads 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).

1. Open the Events panel and click the + button to add an event.

2. Select the page ID for the first page as the Target.

3. Select Mouse > Click as the Event.

4. Select Google Ad > Go to page as the Action.

5. Select gwd-ad as the Receiver.

6. Select the second page (page1_1 in this example) in Configuration. You may also set other settings such as the transition type, duration, etc.

   

   1. Page to go to

7. Click OK to save.

8. Switch to Code view and find: script type="text/javascript" gwd-events="handlers". Copy the action code for going to the second page.

   

   2. Copy this line

Switch back to Design view. Now we will add the custom action to be triggered 5 seconds after the page is shown.

1. On the first page with animation, click the + button in the Events panel to add an event.

2. Select the first page ID as the Target.

3. Select Page > Ready to present the page as the Event.

4. Select Custom > Add custom action as the Action.

5. 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');
}

6. Click OK to save.

Remove the first event that you added just to generate the action code to copy:

3. Select   4. Delete

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

1. On the first page, at the last keyframe, right-click the Events track and select Add event.

   

   1. Right-click the Events track   2. Select "Add event"

2. Double-click the event marker to open the Events dialog.

   

   3. Double-click the event marker to open the Events dialog

3. Select Google Ad > Go to page as the Action.

4. Select gwd-ad as the Receiver.

5. 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.

   

6. Click OK to save.

7. 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

1. Add a global variable as a counter by going to Code view and searching for window.gwd.

2. After the window.gwd line, add the following code to initialize the counter:

   var counter = 1;

3. On the last page (page3 in this example), only go back to the first page 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 the first page (page1 in this example), and copy it. It'll look like this:

   gwd.actions.gwdDoubleclick.goToPage('gwd-ad', 'page1', 'none', 1000, 'linear', 'top');

4. In Design view, go to page 3, and double-click the event marker at the end of the animation to add another timeline event. Select Custom > Add custom action in Action.

5. Type in a function name such as count.

6. 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++;
}

   

7. Click OK to save.

8. In the Events panel, remove the timeline event on page 3 that goes back to page 1, now that we have the custom action with the counter to do that.

   

   4. Select   5. Delete

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.

1. Select the Element tool in the toolbar.

2. Click the custom element and type input in the Element field.

3. Draw the input element on the stage and give it an ID in the Properties panel.

   

   1. Select the Element tool   2. Click the "Custom element" option   3. Type input   4. Draw the input element   5. Give the element an ID

4. Right-click the input element on stage and select Add event...

5. Select Mouse > click as the Event.

6. Select Custom > Add custom action as the Action.

7. Type in a function name such as myInputChange.

8. 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);

   

9. Click OK to save.

10. Now we will replace the click event with a change event in Code view in 2 places:

    

    1. Change 'click' to 'change'

11. 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.

1. Click the + button in the Events panel to add an event.

2. Select document.body as the Target.

3. Select Google Ad > Ad initialized as the Event.

4. Select Custom > Add custom action as the Action.

5. Give the function a name such as declareVars.

6. In the code section, declare and initialize your variables with the gwd. prefix, such as gwd.myCounter = 0;

7. 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!