blog

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! 

Share

Related Blog Posts
  • We Are Over the Top about OTT!

    “What is OTT, and what is all the hype about?” This is a common question at the forefront of the ad industry. We wanted to take a few minutes to break down OTT for anyone looking...

  • Why Social Media Advertising Falls Short

    Social Media advertising is, by far, the simplest way for any brand to begin its digital advertising journey. Platforms such as Facebook have made it easy to get in and start displaying ads to users in...

  • El Toro CEO Statement on Apple Private Relay

    Recently Apple announced a series of proposed initiatives at its Worldwide Developer Conference (WWDC). One of these possible changes is a product called Private Relay, which would be included in a proposed premium version of iCloud.  According...

  • Is AdTech About to be FLOC’d By Google?

    As many of you know, we love bulls at El Toro.  Our intern program is called “Running with the Bulls;” our office has been called “The Bullpen” by local media outlets, and; our annual user...

El Toro Logo Bull

Ready to Run With the Bull?

Contact Us