1. Setting up the HTML5 ad in GWD.

  • When creating a new ad within Google Web Designer to be used in AdLib, set the environment to “Non-Google Ad”.

2. Design and construct the HTML5 ad per your requirements and messaging.

3. Add click functionality to the HTML5 ad.

  • Under the “Components” tab, double click on “Tap Area”.

    • This will provide a transparent clickable layer on your creative.

  • Right-click on the transparent “Tap Area” and select “Add event…” from the drop-down.

  • A new window will open. Select “Touch/Click” under the “Tap Area” dropdown.

  • Under “Action”, click on “add custom action” under the “Custom” dropdown.

4. Add a ClickTag to the HTML5 ad.

  • Within the first text box, name the function “clickTagFunction”.

  • In the second text box, add the custom code provided below

    • Remember to swap the default URL in the code with your destination URL.

var clickTag = "[UNENCODED_CLICK_REDIRECT]https://www.getadlib.com";
window.open((function(url, param, defVal) {
var p = url.split('?');
p = p.length < 2 ? "" : p[1];
var vars = p.split("&");
var res = defVal,
for (var i = 0; i < vars.length; i++) {
v = vars[i].split('=');
if (v.length < 2 || v[0] !== param) {
res = decodeURIComponent(v[1]);
return res;
})(window.location.href, "clickTag", clickTag));

5. Exporting the HTML5 ad.

  • Publish the ad and make sure the “Total size” is <500kb.

6. Validating the HTML5 ads.

  • The ad should pass all checks but the “GWD environment check”.

  • Click on the ad to make sure the clickTag is functioning properly.

7. Preparing HTML5 ads for upload to AdLib.

At this point, the new ad also requires a “back-up ad” that will have the same name as the new zipped HTML5 file. In this example, the two resulting files will be zipped together to make one HTML5 Bundle for upload to AdLib.




8. Lastly, follow these steps to upload your HTML5 assets to AdLib.

Did this answer your question?