Skip to end of metadata
Go to start of metadata

To add an HTML5 creative:

  1. Go to the Campaign overview, click Campaigns in the left navigation menu of Adhese.
  2. Click the campaign for which you want to upload an HTML5 creative.
  3. Click the Creatives tab, this opens the Creative overview. The Creative overview lists all creatives that are uploaded for the selected campaign.
  4. Click the Add HTML5 button. This opens the New creative screen.

Add HTML creative - click for larger view

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 obvious name in the Name field. An obvious name makes it easy to recognize the creative in the next step when the creative is attached to a booking. 
  • In the Format field, click the Select format link. This opens the List of formats modal window. Select the right format with the correct dimensions from the list and click the Save button.
  • The Last updated field denotes when the creative was updated for the last time.

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 http:// to the URL. If the target URL is over a secure connection, you must add https:// to the target URL.

Tracking

  • Each campaign, booking and creative is monitored and reports are available in the interface of Adhese. It is also possible to let a third party monitor a creative. The client needs to provide a tracking URL. This URL 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 for adding extra functions, such as adding a background colour to 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 a .zip file is uploaded, Adhese checks a number of possible issues such as the file size and a correct implementation of the clickTag.

If something is wrong, the .zip file is not uploaded and Adhese gives an error notification. 

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. 

Note that if you do not provide a clickTag and check Ignore errors, your clicks will not be tracked by Adhese.

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.

In order 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.
  • The main .html file contains a clickTag. Adhese relies on it to correctly track clicks.
  • All code and assets are relatively referred to by the main .html file. 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. All files can be organized 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 performance of the web page 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.

clickTag

As mentioned earlier, the main .html file should contain a clickTag. A clickTag is a JavaScript variable. The clickTag needs to be defined with the clickTag variable name, and can optionally be followed by a single digit. The value of the clickTag variable needs to be a string literal within single quotes. An example of a clickTag:

...
   var clickTag = '';
...

When Adhese detects a clickTag variable, Adhese will assign a specific click tracking URL to the value of the variable. This click tracking URL will redirect to the URL that is defined in the Tracking URL field in the interface. If the value of the clickTag variable already contains a URL, Adhese will override that URL with the URL that is defined in the Tracking URL field. 

Adhese detects the clickTag in compressed code. Compressed code is used to reduce file sizes by removing line breaks, tabs, and double spaces.

For more detailed HTML5 creative specification please refer to IAB HTML5 documentation. The IAB is currently revising this document and is planning to publish an update soon. For more information, click here.

Save

You have the option to simply save the booking by clicking the Save button. When clicking the arrow next to this button several saving options become available in a drop-down menu:

 

 


Save and create a bookingSaves the current creative and opens a new create booking screen
Save and create Flash CreativeSaves the current creative and opens a create Flash Creative screen
Save and create Image CreativeSaves the current creative and opens a create Image Creative screen
Save and create 3rd party CreativeSaves the current creative and opens a create 3rd party Creative screen
Save and create Advar CreativeSaves the current creative and opens a create Advar Creative screen
Save and create HTML5 CreativeSaves the current creative and opens a create HTML5 Creative screen
Save and go to traffic screenSaves the current creative and goes to the traffic screen for that creative

More files

If a creative consists of more than one file, e.g. a background image and a video clip, you can add these individual files to the creative. After a format is selected, a new section becomes available: More files. This section enables you to add up to six files to a creative. Click More files... to expand this section. Five buttons, that make it possible for you to upload more files, appear. 

Additional creatives

After a format is selected, you can upload the main file of the HTML5 creative. You have to save the main creative before you can upload the additional creative(s). An additional creative is a variant of the main creative, e.g. images with different dimensions for different platforms. For more information about how to upload additional creatives, refer to Additional creatives.

Preview

After the file is uploaded, a visual preview of the creative appears. Check if there are no errors. 

You can switch between the actual size of the creative and its thumbnail. To show the actual size, click the [ show actual size ] link or click the [ show thumbnail ] link to show the thumbnail. 

If the HTML5 contains an action script with an HTTP request, various browsers may block the preview because the Adhese interface connects through HTTPS. It depends on the kind of browser what should be done in order to preview the creative:

  • In Google Chrome, click the shield button that is situated on the right of the browser's address bar. Click the Load unsafe script button to enable the preview of the HTML5 creative.
    How to preview n HTML5 creative in Chrome
  • In Mozilla Firefox, click the shield button that is situated on the left of the browser's address bar. In the drop-down menu, choose Disable protection for now.
    How to preview an HTML5 creative in Firefox

Link to live preview

You can preview the creative in its context after the file is uploaded and saved. Use this feature to check if there are no errors (see the next paragraph). We recommend to check the live preview in more than one browser. No impressions will be counted while previewing a creative in the live-preview mode. For more information about live previewing a creative, refer to Live preview a creative.

A link to the preview will only be available if there is a booked position with the same dimensions as the format selected for the creative.

The URL of the live preview can be copied and forwarded to the advertiser to check if the creative is shown the way the advertiser wants the creative to be shown.

Checking the URL of the uploaded creative

After you have uploaded and saved the HTML5 creative, the URL of the landing page needs to be verified. To verify the URL:

  1. Do one of the following:
    • Click on the preview of the creative in the Adhese interface, or
    • Click on the creative in the live-preview mode.

    A new page is opened. If the URL is correct, the following message appears:

    Creative link OK, click below to check if the landingspage is correct.
    Adhese succeeded in parsing the link you clicked. Click tracking is now active for his creative.  

    If the above message does not appear, Adhese does not measure any clicks.

  2. Click the link in the message to check if the URL goes to the actual landing page.

    If the preview does not click through, the HTML5 creative may not contain the clickTAG. For information about how to add a clickTAG correctly, refer to above Upload files paragraph.

  • No labels