DoubleClick Studio Events

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.

Tags:, ,

Add a Comment

Your email address will not be published. Required fields are marked *