Skip to main content

HTML5 Templates

The use of Adhese macros, such as [adheseReplace:xx] or <ADHESE_X>, from within a HTML5 template is not possible. Unlike with regular (advar) templates, these macros will not work.

An HTML5 template is the combination of a regular advar template (as discussed above) and a folder with HTML, CSS and JS files. It allows you to use the form functionality of an advar template while storing code & optional media in a folder structure.

In Admin > Formats and templates > HTML5 templates, you can find all previously created templates in zip format. When you click on the link, the below screen will appear:

formats_and_templates4.png

The following options are available:

  • Upload a new file: click the Upload a new HTML5 template file (ZIP) and choose a file to upload.
  • Delete a template: select the file and click the delete button.
  • Filter the list by typing in the filter box.

Using HTML5 templates

Previously created HTML5 templates can be used by clicking the 'Add advar' option in the creative tab and selecting the correct template in the 'Add Advar Template' dropdown list.

Creating a new HTML5 template

Ensure that the filenames only contains alphanumeric characters, dots, and underscores. Other characters may cause issues when Adhese processes the file!

Steps for creating and uploading a new template:

  1. Locally create a new folder in which to store all files
  2. Choose a name for the template: [name].zip
  3. Create a descr.json file and store it in the main directory of your folder. The content has to be constructed in the same way you would create a regular advar template. (See step 6 of creating a new advar)
  4. Create an index.html file - which will be the starting point for the HTML5 ad - and store it in the main directory of your folder
  5. Make sure to incorporate clickthrough logic. Adhese relies on it to track clicks correctly.
    You can do this by adding the following line of code to your index.html file. Adhese will add its click tracking URL to this variable after which you can use the variable in the rest of your clickthrough logic. 
    <script type="text/javascript">
  var clickTag = '';
</script>
  6. Optionally you can store CSS, JS and images in separate files & folders within the main directory.

    All links in the HTML5 creative, such as the link to an image within the ad, need to use a relative path, for example: /graphics/ad-image.png or <img src="/graphics/ad-image.png">. This enables the ad to be self-contained and, therefore, to run independently or to render without a network connection. External libraries and web fonts can be an exception to this guideline. 

  7. Zip the content of the folder (not the folder itself) and change the name of the zip to the name of the template
  8. Upload the template in the Adhese UI under Admin > Formats and templates > HTML5 templates,
  9. Test the template by creating a creative and checking the preview of the banner

Troubleshooting HTML5 Templates

If an HTML5 template can't be uploaded for some reason, you'll get an error message:

Schermafdruk van 2025-02-21 12-58-35.png

In the case above, hidden files might block Adhese from properly unzipping the archive:

Schermafdruk van 2025-02-21 13-52-42.png

Schermafdruk van 2025-02-21 13-53-00.png

When creating an archive on Mac OS, a hidden __MACOSX folder might be created. These files must be removed for the upload to succeed (you may need to unzip, delete and re-zip the files).

Schermafdruk van 2025-02-21 13-09-02.png

In the case above, the zip file has been renamed. If the zip file does not match the advar name in the descr.json file, rename the zip file to match the advar name in the descr.json file, and the archive can be uploaded.

Back to top