Webprogramo > Blog > Wordpress > How To insert ClickTag in HTML5 Banners with Google Web Designer (Method 2)

How To insert ClickTag in HTML5 Banners with Google Web Designer (Method 2)

Jorge Ramírez

5 julio, 2018

Webprogramo > Blog > Wordpress > How To insert ClickTag in HTML5 Banners with Google Web Designer (Method 2)
SHARE! and the author will get a Yummy Cookie :
Share this...
Share on Facebook
Facebook
Tweet about this on Twitter
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 a standard ad platform:

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

  •  Once you have your banner already created, go to the components panel and insert the 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.

  • 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.

  • Next a window will open, to set the event please follow these steps : Event: mouse/click

  • Action/custom and then go to «add custom code»

  • Now in the first input lets put «open» and down below copy and paste the following code:
 window.open(clickTag, '_blank');

so we will get something like this:

  • Now we are ready to publish out banner, but let’s do it Locally, so we can continue with the next step.
  • Then all we have to do is edit the HTML file of the banner and insert the following code below the «head» tag

 

script type="text/javascript">
var clickTag = "https://www.google.com";
</script>

 

… And we are going to get something like this:

Now we are all set up, save the changes, and we are done!