How to add clickTAG to banners in the Google Web Designer

It’s relatively easy to create HTML banners with exit events in the Google Web Designer and upload those banners in Google Ad Manager as HTML5 creatives by following to official instructions. Google seeks for exit events on the uploading process, and in a successful result, it accepts that HTML banner. But HTML banners with exit events don’t work with custom creative templates because Google doesn’t allow to upload HTML banners in creative templates. Therefore you need to use a different approach for clicks tracking.

We will show how to create HTML banners with clickTAG variables. At the end of this article you could create an HTML banner which gets a click-through URL from the banner URL.

For example, the URL https://domain/path/to/banner/index.html?clickTAG=https://www.genecy.com/dfp/ has the following parts:

https://domain/path/to/banner/index.htmlan URL to hosted banner
clickTAGa clickTAG parameter
https://www.genecy.com/dfp/a landing page URL

1. Open a banner in Google Web Designer

We assume that you have basic knowledge with Google Web Designer (GWD) and that a banner is created already. Open a banner in the GWD. If not yet created, create it without implementing a click-through URL.

2. Add a clickTAG with default landing page URL

a) Create a tap area from Google Web Designer components (if you don’t see “Components” panel, click Window > Components).

b) Click right mouse button on the tap area and select “Add event…”. Or in the “Events” panel click on the “+” button (if you don’t see “Events” panel, click Window > Events).

c) Select the previously added tap area as the target (skip this if you selected “Add event…” from right mouse button’s menu).

d) Select “Tap Area” and then “Touch/Click”.

e) Select “Custom” and then “Add custom action”.

f) Define function name (there is field right after “gwd.”), e.g. “clickTagFunction”.

g) Add this code snippet:

The first line defines default landing page URL which will be used when no clickTAG variables passed to the URL.

Important: JavaScript variables is case sensitive and therefore clickTAG parameter in an URL should match a case in code snippet. Name of clickTAG parameter is provided in the code snippet’s last line between double quotes. You can change it.

Encoding URLs

We highly suggest encoding a click-through URL before appending it to the clickTAG parameter. In cases when landing URLs have characters like “?” and “&”, these URLs can be misinterpreted.

In the example, the not encoded landing page URL “https://link.to/landing/page/index.php?cat=abc&page=1” will be parsed as “https://link.to/landing/page/index.php”. Converted that URL will be as follows: https%3A%2F%2Flink.to%2Flanding%2Fpage%2Findex.php%3Fcat%3Dabc%26page%3D1. Search in Google for online URL encoders.

In conclusion

You can use this approach also if you need an HTML banner with clickTAG for other ad-servers.