How to Add HTML 5 Creatives to an El Toro Campaign

By: Estefan Albiero

El Toro supports HTML 5 creatives! We adhere to the IAB standards.

To use HTML 5 creatives, you can upload them to your orderline within the portal or you can submit a support request for additional assistance via support.eltoro.com.

Click “Submit a Request”

screen-shot-2016-09-16-at-9-35-07-am

In the drop down list, select “Ad Tags and External Pixels.” Fill out everything else as you see fit.

screen-shot-2016-09-16-at-9-35-44-am

At the bottom of the page where it says “Attachments,” click “Add File,” select your HTML 5 creative zip file. Once it uploads, press “Submit.”

HTML 5 creatives must be uploaded in a .zip file, which should contain an index.html file. It should be a complete and valid HTML document, including the entities <html><head><body>. Make sure it is not an HTML fragment.

*This index file must be in the root of the .zip file, NOT in a subfolder in the .zip.*

Prerequisites for Standard Banners

All HTML5 creatives must reference the clickTag parameter in the URL of the creative when it is served in order to properly track clicks and open the landing page provided. 

A clickTAG is a line of script embedded in a banner ad used to track the success of an advertising campaign. More than simply measuring impressions, the clickTag can measure the number of clicks.  

Creating a clickTag using a text editor:

Step 1: Add the AppNexus (our ad platform) HTML5 Library

Add the AppNexus HTML5 Library inside the <head> tag in the index.html file, by adding the following <script> tag:

<script src="https://acdn.adnxs.com/html5-lib/1.3.0/appnexus-html5-lib.min.js"></script>

Step 2: Add APPNEXUS.getClickTag() to a clickable element

Wrap the banner markup in an HTML element that opens a new window and uses the APPNEXUS.getClickTag() function. This will retrieve the value of the clickTag parameter set in the ad URL. The example below uses the <a> anchor element with the href attribute set to javascript:void(0) and an onClick attribute set to window.open(APPNEXUS.getClickTag(), '_blank');.

Open <a href="javascript:void(0)" onClick="window.open(APPNEXUS.getClickTag(), '_blank');"> immediately after <body> and be sure to close it with </a> immediately before </body>. The banner markup should go between <a href="javascript:void(0)" onClick="window.open(APPNEXUS.getClickTag(), '_blank');"> and </a>.

<body>

   <a href="javascript:void(0)" onClick="window.open(APPNEXUS.getClickTag(), '_blank');">

       <!-- Your banner markup goes here. -->

   </a>

</body>

Step 3: Test

Save your work in the text editor. Open the index.html file in your web browser. Add ?clickTag=http://www.appnexus.com at the end of the URL in the address bar.

pasted-image-at-2016_09_23-03_27-pm-1

Refresh the page and click on the ad. A new window with AppNexus' website should open in your browser. When the ad is served AppNexus sets the value of clickTag to AppNexus' click tracker and a redirect to the landing page URL provided for the creative.

Step 4. Save work in the text editor 

Step 5. Zip creative contents

Select all of the contents. Compress the contents into a .zip file.

pasted-image-at-2016_09_23-03_27-pm 

You are now ready to upload your HTML5 creative into our support desk!