Skip to main content
Contact your Sales Executive today to request a personalized Gen3 walkthrough!

Search

Accurate. Measurable. Trusted.

HTML5s

Patrick Glazier
  • Updated

Overview

This document will provide an overview of HTML5s, how to upload them into the El Toro Portal, best practices, and frequently asked questions.

 

What are HTML5 creatives?

HTML5 creatives are advanced tools for creating dynamic online advertisements. They provide more content in a compact space compared to traditional ads. This makes them ideal for advertisers aiming for a modern and efficient approach.

In technical terms, HTML5 combines various elements such as tags, multimedia components, and coding techniques to create banner images.

 

Prerequisites for HTML5 Banners

  1. (Required) All HTML5 creatives should Include the dimensions of your creative inside the <head> tag of your index.html file.
    Not including the dimensions in your HTML5 script will show the below error message in our portal.

    HTML5-1.png
     

  2. (Optional) All HTML5 creatives should reference the `clickTag` parameter in the creative URL for proper click tracking. A `clickTag` is a script in a banner ad that tracks the success of an ad campaign. It measures clicks, not just impressions.

 

Preparing your file for upload

HTML5 creatives can be uploaded to your campaigns directly. Below are our system requirements.

  1. HTML5 creatives should be uploaded as a `.zip` file.

  2. The `.zip` file must contain an `index.html` file.

  3. Ensure the `index.html` is a complete and valid HTML document with `<html><head><body>` tags.
    Note: The `index.html` file should be in the root of the `.zip` file, **NOT** in a subfolder.

 

Step 1: Determine the dimensions - ensure you know your creative's exact width and height (in pixels).

Step 2: Open the `index.html` File. Open the `index.html` file in your preferred text editor.

Step 3: Add the dimensions meta tags. Inside the `<head>` tag of the `index.html` file, add the following meta tags, replacing `WIDTH` and `HEIGHT` with the actual dimensions of your creative:

HTML5-2.png
 

For example, if your creative is 300x250 pixels, the meta tag would look like:

HTML5-3.png
 

Step 4: Save your work. Save any changes in your text editor after adding the dimensions meta tag.

  1. (Optional) Create a click tag.

Step 5: Add the AppNexus HTML5 library. Inside the `<head>` tag of the `index.html` file, add the following script:

HTML5-4.png
 

Step 6: Add `APPNEXUS.getClickTag()` to a clickable element. Wrap your banner markup in an HTML element that uses the `APPNEXUS.getClickTag()` function.

Example:

HTML5-5.png
 

Step 7: Test your tag.

  1. Save your work in the text editor.

  2. Open the `index.html` in a browser.

  3. Add `?clickTag=http://www.appnexus.com` to the URL.

  4. Refresh and click on the ad. A new window should open with AppNexus' website.

Step 8: Save your work by saving any changes in your text editor.

 

How to Upload HTML5s

Step 1: Generate a .zip file.

Step 2: Click “Creative Library”. Select “Upload/Create”.

HTML5-6.png
 

Step 4: Select HTML5.

Step 5: Drag and drop or upload the HTML5 file.

 

Best Practices

  • Click Tag Integration: Incorporating the click tag into your HTML5 is recommended. This ensures that your advertisement directs users correctly when clicked. Detailed steps for this process can be found here.

  • Utilizing HTML5: We advocate for the use of HTML5. Its benefits are manifold:

    • Provides a strong base for crafting modern, interactive web applications.

    • Enhances accessibility for a wider audience.

    • Natively supports multimedia content, eliminating the need for additional plugins.

    • Delivers a seamless and pleasant user experience across various devices and platforms.

 

FAQs

  • Q: How will I know if my HTML5s are clicking through properly?
    • A: If you include the click tag recommended in Step 2, your HTML5s should click through properly. Our system automatically verifies the click tag when an order line with an HTML5 is submitted. A representative from El Toro will reach out if there are any click-through issues with your HTML5s.
  • Q: Does reporting for my HTML5s look different than other creative types?

 

Need Help?

To request support, follow the steps in the article below or contact us at support@eltoro.com, and we’ll be happy to help.
Support Requests and Knowledge Base – El Toro Support Center

Comments

0 comments

Article is closed for comments.