Hello, and welcome to this Google Web Designer video
tutorial.
I'm Owen Corso from Google and I'm
going to walk you through adding custom events in GWD.
This video will cover three types
of events- exits, counters, and timers.
I've already started a file with a logo and Start and Stop
buttons.
I will add an exit to the logo and use
the buttons to start and stop a timer.
I will add a counter to the Start button
to see how many times it is clicked.
Part one- exits.
Let's start by adding an exit.
An exit is DoubleClick's solution
for a click-through method.
Under the Components accordion on the right-hand side
of your navigation, select Tap Area.
Click and drag that to your stage
where you want the exit event to be fired.
Next I align the component instance to the stage
where I would like to display, and then
I scale the component by selecting the arrow tool
and then ticking the "Transform control" checkbox.
Now I'll click on my Tap Area element
and then navigate to the Properties accordion.
I can adjust the position and size through this panel
by specifying left and top positioning and width
and height.
I can also specify lots of other things here.
But for now, since this is an invisible button,
I'll just leave these as the default values.
Now I'll give this component instance a name.
Because you could have multiple tracking items,
it's important to make sure that it is clearly
named for the type of action the instance should be performing.
I will name this "logo_exit" in two places, the element
ID and the component properties name.
Next I'll select the Events section
and hit the plus button in order to assign my button an action.
Under the plus button popup, you can
see that there are multiple options.
I want to make my tap area an exit button.
So I'll go ahead and select my target as "logo_exit."
Next I'll sign it as a Tap Area and Touch/Click.
I'll select that since I want this
to drive to a landing page on click.
Next, on the action panel, I expand the DoubleClick
component (changed to: Google Ad) accordion and choose Exit.
In the Receiver panel I select "gwd-ad"
and then fill in how I want this exit to display in reporting
under Metrics ID.
Now I'll fill in the URL I want this to drive to under URL.
Make sure to include the HTTP protocol
when you're defining this.
This URL can always be changed once the ad is
uploaded to Studio as well.
Since this is an in-page ad, I do not
need to check the "Collapse on exit" checkbox.
If it were, I would check it so the expanded panel would
collapse when I click through to the site.
Now I'll go ahead and hit Save.
The tracking code is automatically added in for you
based on what you're specifying, so there's
no need to go through and edit the source code later.
Part two- counters.
Now I'll go through how to add a counter to your file.
A counter lets you track any action in a creative.
For example, how many times a user clicked a button
or moused over an object.
I've already created two more tap areas for my Start and Stop
buttons, and I've given them names in the Properties panel.
Now let's go to the Events panel and hit the plus button
to assign an event to the Start button.
In the Events modal window, you can
see there are multiple options.
Since I want to make my tap area a counter,
I'll go ahead and select my tap area instance, "btnStart,"
as my source.
Next I'll select Tap Area, then Touch/Click.
In Action, click DoubleClick component (changed to: Google Ad),
and then "Increment counter."
Receiver is "gwd-ad."
And in the Configuration panel, we
enter the Metrics ID we want for tracking.
Before I hit Save, for this example, I want to check
"Is cumulative."
When I check this box, it means the creative
will track every time I click this button.
When you uncheck it, the counter will only
track once per impression.
This option prevents a single user
from clicking multiple times and skewing the metrics.
If you want to see if something was interacted with,
I suggest un-checking this box.
If you want to see every click, then check it.
Now, I'll go ahead and hit Save.
Again, all the code is automatically
added in based on what we just did here.
Part three- timers.
Now let's add a timer to the file.
A timer lets you measure the length
of any action in a creative.
For example, the amount of time a user plays a game.
Let's click the plus button on the Events panel
again to assign an event to my element.
Select my Start button again.
Then Tap Area, Touch/Click, DoubleClick component (changed to: Google Ad), and then
Start timer.
Receiver is "gwd" again, which brings us to the Metrics ID.
I'll fill in how I want my timer to track under Metrics ID,
making sure that I remember this metric.
I will need to put the same metric name into the Event
panel we assign our actions to our stop timer.
Go ahead and hit Save.
Next I will repeat those steps for my stop timer.
Select my "btnStop" this time, then Tap Area, Touch/Click,
DoubleClick component (changed to: Google Ad), and then Stop timer.
Receiver is "gwd-ad" again, and now we enter the exact same
Metric ID as we did in the start timer Metric ID.
Let's review.
We have an exit on the logo, a counter-cumulative counter
on the Start button, a timer that
starts and stops depending on which button I press.
I can do a cursory test run of the ad by going to Preview
and selecting my browser of choice.
I see the exit works and the start and stop timer,
that I should be counting time and the number of times I click
Start.
Once I'm done testing and editing my creative,
I'll select Publish and upload to Studio
where I can see all the timers and counters in action.
And that's how you add a timer into your creative.