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.
HTML5 Ad Specs can be found in our help section.
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,
v;
for (var i = 0; i < vars.length; i++) {
v = vars[i].split('=');
if (v.length < 2 || v[0] !== param) {
continue;
}
res = decodeURIComponent(v[1]);
break;
}
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.
Upload the resulting zip file to the Google HTML5 Ad Validator.
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.
adlib-better-advertising-html5_300x250-BUNDLE.zip |
adlib_better-advertising-html5_300x250.zip adlib_better-advertising-html5_300x250.jpg |
8. Lastly, follow these steps to upload your HTML5 assets to AdLib.
Select "Creatives" within the Management menu
Click the "+ New Creative" button
Select "HTML5 Ad" and follow the prompts
