Google Web Designer Blog: Google Web Designer Tips

Google Web Designer Tips - Part 2

Wednesday, January 24, 2018

forumGoogle Web Designer blog posts 1. Writing custom actions for events IssueSolution

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) AdWords requirements

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.

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.

working file Example 2: use timeline events to loop the ad through all pages twice. 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.

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.

working file Example 3: use custom events

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)