Uploading Creatives
Once a new booking has been saved, you can upload a creative. A creative is the visual element of an advertising campaign that is displayed to visitors on your platform.
Upload a creative
You can upload different kinds of creatives in Adhese. Adhese supports the following format types:
- Image files (JPG, GIF, or PNG)
- HTML5 files
- Video files (MP4 and FLV)
- Audio files (MP3 and MPEG)
- Text
- Third-party JavaScript tags.
In addition, Adhese has developed its own format, Advar, to simplify the creation of complex creatives. Advar templates can be customized to take various forms, including video advertising formats, text ads, or content.
It depends on the client which fields are compulsory to complete. To save a creative, you must select a format. If a mandatory field is left blank, the creative can still be saved, but the mandatory fields will be set to their default values.
Add an HTML5 creative
To add an HTML5 creative:
- Go to the Campaign overview, click Campaigns in the left navigation menu of Adhese.
- Click the campaign for which you want to upload an HTML5 creative.
- Click the Creatives tab. The Creative overview opens. The Creative overview lists all creatives that are uploaded for the selected campaign.
- Click the Add HTML5 button. The New creative screen opens.
Specify the details of the creative under the following headings:
General
- The ID is automatically generated by Adhese after the creative is saved.
- Give the creative a meaningful and clear name in the Name field. A distinct name will make it easier to recognise the creative in the next step when it is attached to a booking.
- In the Format field, click the Select format link. This opens the List of formats modal window. Select the appropriate format with the correct dimensions from the list and click on the Save button.
- The Last updated field indicates the most recent update of the creative.
Target URLs
-
In the Select target field, determine the target URL or the URL of the landing page. Click the show more URLs link to add multiple target URLs to the creative.
You may omit http:// from the target URL, as Adhese will automatically add it. If the target URL is over a secure connection, you must add httpS:// to it.
Tracking
- Adhese monitors every campaign, booking, and creative, and reports are available in the interface. It is also possible to let a third party monitor a creative. The client needs to provide a tracking URL, which is inserted in the Tracking URL field. For more information about the tracking URL, refer to Third-party tracking.
Extra
- The Extra field 1 and 2 input fields are custom input fields depending on the chosen format and template. These fields are used to add extra functions, such as changing the background colour of a wallpaper ad.
Upload files
A format needs to be selected before you can upload an HTML5 creative.
To upload an HTML5 creative, click the Main file button. You need to choose a correct .zip HTML5 creative file. For details, see the HTML5 Creative file section below.
While uploading a .zip file, Adhese verifies various potential issues, including file size and proper implementation of the clickTag.
If there is an issue, the .zip file is not uploaded and Adhese gives an error message.
If you are convinced that an error notification is not justified, you can disregard it by simply checking the Ignore errors (only for me) box under the Alternative creative section and upload the file again.
Next to the .zip file, you can upload up to five additional files. This enables you to upload HTML5 creatives with additional material, such as a wallpaper.
Please note that if you do not provide a clickTag and select Ignore errors (only for me), Adhese will not track your Clicks.
Click the Save button after the .zip file is uploaded.
HTML5 Creative file
The HTML5 creative file is a .zip file that defines the creative or advertisement. You can either receive such a .zip file from the advertiser or prepare it by yourself.
To create it by yourself, make sure:
- The .zip file contains at least an index.htm or index.html file or another unique .htm or .html file. This file will be used as the starting point for the HTML5 ad.
Ensure that the filename only contains alphanumeric characters, dots, and underscores. Other characters may cause issues when Adhese processes the file.! - The main .html file contains a clickTag. Adhese relies on it to track clicks correctly.
- The main .html file relatively refers to all code and assets. This means that 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.
Some additional guidelines:
- There are no specific rules for the folder structure inside the .zip file. You can organize all files in different subfolders or within the root folder.
- The number of files should be kept to a minimum because each different file results in a single request that affects the web page's performance where the ad is being loaded.
All links in the HTML5 creative, such as the link to an image within the ad, need to use a relative path, e.g. /graphics/ad-image.png or img src="/graphics/ad-image.png". This enables the advertisement to run independently. External libraries and web fonts can be an exception to this guideline.
The use of Adhese macros, such as [adheseReplace:xx] or <ADHESE_X>, from within the HTML5 file is not possible. An Adhese value will not replace these macros.
clickTag
To let Adhese measure the clicks of the banner, some extra work is required:
-
We require a JavaScript variable to be present in the code. This variable has to be named clickTag in order to be picked up.
The value of the clickTag variable needs to be a string literal within single quotes:Example<a id="clickThroughBtn" target='_new' href="">Register click</a>
<script> var clickTag = ''; document.querySelector('#clickThroughBtn').href = clickTag; </script> ...