Webprogramo / Blog / Google Web Designer / How To insert ClickTag in HTML5 Banners with Google Web Designer

How To insert ClickTag in HTML5 Banners with Google Web Designer

Jorge Ramírez

2 agosto, 2017

Webprogramo / Blog / Google Web Designer / How To insert ClickTag in HTML5 Banners with Google Web Designer
SHARE! and the author will get a Yummy Cookie :
Share on FacebookTweet about this on Twitter

ClickTag’s goal is to keep track of the clicks from advertisements and banners in the web. Depending on the ad serving platform  the requirements for its implementation may change.

Let’s see how it works for the two most used adservers: Adsense an Doubleclick

We are using Google Web designer (recommended) to make our HTML 5 banners, So let’s Begin:

  • Make sure to set the project environment as a Doubleclick or Adsense:

Google Web Designer clickTag implementation

  •  Once you have your banner already created, go to the components panel and insert the Tap Area component.

Google Web Designer Tap Area component

  • Look at the layers in the timeline, and set the Tap Area component first in line, in that way the banner won’t loose any click.

Google Web Designer tap component

  • In the timeline stay positioned on the “Tap Area” layer and go to the Events panel . At the bottom left there is a “+” click on it.

Google Web Designer events

  • Then select “clickTag” (or, the name you gave to your “Tap Area” component), then at Actions select the “Google ad option” and “exit ad”, and finally as a receiver select “gwd-ad”

 

clickTag with Google Web Designer

The final step:

Metric ID: clickTag or clickTAG (the name may change depending on the ad serving platform)

URL: The destination URL of the ad. If you do not already have it do not worry, you can put another, since it can be modified later from DoubleClick  or Adsense panel for Publishers.

ad clickTag with Google Web Designer

Here you go!

Now you have your banner with a proper clickTag and ready to been publish.

Cheers.