HTML5 expanding 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. Click the Add event button in the Events panel to add a new event.
  2. Select the target from the list of elements. Elements without IDs and elements nested at a different document level don't appear in the list.
  3. Select Tap Area then Touch/Click.
  4. In the Action step, click Google Ad, then Increment counter.
  5. In the Receiver step, click gwd-ad.
  6. In the Configuration step, enter the Metrics ID. This is the reporting label for the event.
  7. (Optional) Select the Is cumulative checkbox if you want to track every time someone clicks the button. When Is cumulative is unchecked, the counter will only track once per impression. Leaving this unchecked prevents a single user from clicking multiple times and skewing the metrics.
  8. Click OK. The necessary code is automatically added in Code view based on your selections.

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 Studio. You can rename this in the Studio Web UI or in Campaign Manager 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 helpful?
How can we improve it?