Search
Clear search
Close search
Google apps
Main menu

HTML5 banner build guide

Add a counter

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. Counters can be tracked on any event. The examples below show how to increment a counter when a button is clicked.

Add a counter to a tap area 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 Increment counter.
  5. Go to the 'Receiver' panel and click gwd-ad.
  6. Go to the 'Configuration' panel enter the Metrics ID you want for tracking purposes.
  7. (Optional) Select the ‘Is cumulative’ checkbox if you want to track every time someone clicks this button. When ‘Is cumulative’ is unchecked, the counter will only track once per impression. Leaving the this unchecked prevents a single user from clicking multiple times and skewing the metrics.
  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 counter using any HTML editor

  1. Create a button element in your creative using a <div> tag. Create the element in the HTML file and style it in the CSS file. Then assign the ID tab-one to your element.

    Sample object, <div> tag in your HTML file:

    <div id="tab-one">TAB ONE</div>

    Sample styling, ID selector in your CSS file:

    #tab {
        position: absolute;
        width: 130px;
        height: 20px;
        top: 35px;
        left: 25px;
        cursor: pointer;
    }
    
  2. Add counter functionality to the JavaScript by calling this method: Enabler.counter(eventId:String, opt_isCumulative:Boolean);
    • eventId is the counter's name in DoubleClick Studio. You can rename this in the DoubleClick Studio Web UI or in DCM to change what shows up in the final report.
    • isCumulative determines whether this counter can fire multiple times for a single user.
      • If this is set to false (the default), the counter tracks a maximum of one count per impression. This is called a capped counter.
      • If this is set to true, the counter tallies every time the counter is called. This is called an uncapped counter.
      • In order to use these methods, you must first include and initialize the Enabler library.

Code snippet

function tabOneClickHandler(e) {
    Enabler.counter('Click on Tab 1');
}
document.getElementById('tab-one').addEventListener('click',
tabOneClickHandler, false);
 
Was this article helpful?
How can we improve it?