Naylor Curtain Ad

Developed by Dave Blahut, April 2014

Objective

Develop an advertisement space that can expand and collapse upon user-interaction (click) in a specific space in the ad.

Curtain Ad Goes Here

Goals

  • Develop an ad space that can collapse/expand
  • Be tablet friendly - no mouseover event
  • Keep the code customizable with changeable options

Solution

The curtain ad consists of two components.

  1. A JavaScript call that fetches/serves and handles the exanding/collapsing of the ad space.
  2. An HTML placeholder that contains the specifications and hosts the actual ad.
<script>document.write("<scr"+"ipt src=\""+window.location.protocol+"//www.naylornetwork.com/absolutebm/abm-curtain.asp\" type=\"text/javascript\"></scr"+"ipt>")</script>
<div class="nnCadWrapper" data-adwidth="760" data-adheightmin="60" data-adheightmax="300" data-expandarea="160" data-zone="NAY-DEMO-Curtain01" data-keywords="homepage"></div>

 

How it works

The script uses the jQuery library to handle the AJAX function of loading the ad. It begins by checking to see if jQuery is already present on the user’s site. If it is absent, jQuery is automatically added to the site. Depending on the placement of the code, there is the possibility that the client may load a second jQuery reference after it was added by the new ad serving code.

The code will then wait for the ready event of the DOM (Document Object Model) to be triggered once it is fully loaded. Once triggered, the ad placeholder is located by finding the div tag with the nnCadWrapper class. Then, using the data-zone and data-keywords attribute values, Xigla is contacted to serve the corresponding ad.

The curtain ad is then loaded to the page asynchronously. This allows for other elements of the page to continue loading without waiting for the ads to fully load.

Ad impressions are counted when the JavaScript code makes the request to the Xigla server, which is triggered when the page initially loads.

A click is counted when the user clicks on either the expanded or collapsed ad, except when the click is in the "expand" action defined area, or the close/collapse [X] button.

Ad Specs

The curtain ad consist of two pieces of art. Because the ad width and height can be set in the code options, the artwork can modified on a per-project basis. Both the collapsed creative and expanded creative must have the same width.

The collapsed creative must have an area on the right side of the ad that is reserved for the click-event that triggers the expanding ad. The width of the expand-area can be any value and must be entered into the placeholder so the ad serving can properly map the event.

The expanded creative must be the same width as the collapsed creative, but must have a greater height value. The close tag (X) is automatically added to the upper-right corner and does not need to be designed into the creative.

Creatives can be any combination of JPG, GIF and PNG

Third-Party Tags

Because ads are being served with asynchronous JavaScript, it's not possible to serve third-party JavaScript tags.

Flash

One of the goals of this project was to keep the ad tablet-friendly. Because of this, FLASH creatives are not allowed.

jQuery Version

The curtain ad requires a minium jQuery version of 1.7

Implementing the code on the client site

The following code is to be placed on each page where ads are to be served. It is recommended to be placed as the last element within the head tag, but will function anywhere within the page.

A placeholder is required on the page where the ad is to be served.

The placeholder consists of several parts:

  • class
  • data-adwidth
  • data-adheightmin
  • data-adheightmax
  • data-expandarea
  • data-zone
  • data-keywords (optional)

Class

The class must always remain as nnCadWrapper. The ad serving code uses this identifier to determine which div element on the page is to be used for the ad. The class is case-sensitive.

Data-zone

The data-zone attribute references the Xigla zone to which the ad has been booked to.

Data-keywords

The data-keywords attribute acts as a filter when selecting which ads are going to be served. It can be left blank, in which case all available ads from the pool of ads assigned to the specified Xigla zone can be selected. If a keyword is used, then the ads with the best match of keywords will be available. The keyword is an optional attribute and can be omitted.

Spaces in keywords should be replaced with %20.

data-keywords=”sub%20page”

Separate multiple keywords with a plus sign +

data-keywords=”homepage+sub%20page”

Data-adwidth

The data-adwidth attribute tells the serving code the width of the ad that will be served into the div wrapper.

Data-adheightmin

The data-adheightmin is the height of the div wrapper when the ad is collapsed.

Data-adheightmax

The data-adheightmax is the height of the div wraper when the ad is fully expanded.

Data-expandarea

The data-expandarea is the pixel width from the right edge of the ad that is reserved for the expand trigger. Clicks in this area do not count in the click-counts and will trigger the ad expanding.

Posting Procedure

Because the curtain ad requires two pieces of artwork, the posting procedure is similar to a page-peel ad.

The code that is posted to the Xigla system will follow the proceding example:

<div class="nnCadCollapsed"><a href="$$URL$$"><img src="http://www.naylorimages.com/ad-760x60.png" /></a></div>
<div class="nnCadExpanded" style="position:relative; overflow:hidden; display:none;"><a href="$$URL$$"><img src="http://www.naylorimages.com/ad-760x300.png" /></a></div>

 

May 13, 2014

  • Modified code snippet and ad serving code to detect http protocol and serve ad with the same security protocol