Search
Clear search
Close search
Google apps
Main menu

HTML5 interstitial build guide

Add an HTML5 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. You must code counters using the DoubleClick API.

To add an HTML5 counter:

  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.

Code snippet

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