HTML5 banner build guide

Add a timer

A timer lets you measure the length of any action in a creative, for example, the amount of time a user plays a game.

When working with timers, you should consider which interactions should stop the timer. For example, if you're timing how long a user plays a game, the timer should stop if they click a close button, and it should also stop if they click any exit. Make sure to stop the timer any time they stop playing the game or navigate away.

Add a timer using Google Web Designer

  1. Go to the “Events' panel and click the ‘plus’ ( +) button to assign an event to the object you want.
  2. In the events pop-up window, select object's instance as the source.
  3. Select Tap Area then Touch/Click.
  4. Still in the events pop-up, go to the 'Action' panel and click Google Ad, then click Start timer.
  5. Go to the 'Receiver' panel and click gwd-ad.
  6. Go to the 'Configuration' panel enter the Metric ID you want for tracking purposes. Remember the ID you enter here since you'll need to re-use it to stop the timer.
  7. Repeat the same steps to stop the timer. Use the same metric ID you used in the previous step.
  8. Click 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.
  9. Preview your ad in your preferred browser.
  10. Publish the ad to Studio.

Add a timer using any HTML editor

  1. Create two button elements in your creative using <div> tags. Create the elements in the HTML file and style them in the CSS file. Then assign different IDs for start-timer and stop-timer.

    Sample <div> tag object in the HTML file:

    <div id="start-timer">START TIMER</div>
    <div id="stop-timer">STOP TIMER</div>

    Sample styling and ID selector in the CSS file:

    #start-timer {
        position: absolute;
        width: 130px;
        height: 20px;
        top: 60px;
        left: 25px;
        cursor: pointer;
    }
    
    #stop-timer {
        position: absolute;
        width: 130px;
        height: 20px;
        top: 85px;
        left: 25px;
        cursor: pointer;
    }
  2. Start a timer using this JavaScript method: Enabler.startTimer(timerId:String);
  3. Stop a timer using this JavaScript method: Enabler.stopTimer(timerId:String);
    • timerId is the name of the timer you'll see in reports. Use a name that will help you associate the timer with the action you're recording. You can rename this timer when you upload the creative to Studio or traffic the creative in Campaign Manager.
    • To stop the timer, the timerId used in stopTimer must match the ID used in startTimer. The ID is case sensitive, so make sure to use the exact same string.
    • In order to use these methods, you must first include and initialize the Enabler library.

Code snippet

function startTimerHandler(e) {
    Enabler.startTimer('My Timer');
}
document.getElementById('start-timer').addEventListener('click',
startTimerHandler, false);

function stopTimerHandler(e) {
    Enabler.stopTimer('My Timer');
}
document.getElementById('stop-timer').addEventListener('click',
stopTimerHandler, false);
 
Was this helpful?
How can we improve it?