FLOORAD DOCUMENTATION

Adsolutions / Documentation  / FLOORAD DOCUMENTATION

FLOORAD DOCUMENTATION

The templates are made as basic as possible so you have a simple starting point to begin building your creative.

The template consists of the following assets:

  • index.html
  • main.js
  • main.css

index.html
The head of the html contains the ad size and links to the core library and the other two template assets.

The body contains two main divs; the contracted and expanded divs. The contracted div is the one displayed on 100% width and 97px height. Until a user clicks the close button. The expanded div is the one that comes into view when a mouse over on the contracted div is done. It contains a video player and both contain a clickLayer.

main.js

The main.js together with the main.css takes care of the animation of the expandable part and logic for video and clicks. It first declares a bunch of variables. And is wrapped in the ADTECH.ready  function. To make sure our library is available before the logic within the body is applied. The highlighted line registers the video element so we are able to measure video events and report on them. You can also see two functions that do something based on the status of the video. onended and onpalying. You can add your content within these functions if you want to make something happen during playback or when the video is complete.

The next section defines the interactions. And takes care of calling the doContract(), doExpand(), ADTECH.close() and vid.play() functions.

 

The main.js file is also the spot where the click name is implemented. Don’t worry about setting the URL as we enter this in the system when the ad is uploaded.

Next we have the doExpand() and doContract functions. As the names suggest take care of the expand and contract of the expanded div and pauses or plays the video accordingly.

And finally two event listeners for mouse over and mouse out. Feel free to add your own content within these if you want to make something happen when a mouse over or out is done.

SUPPORT
During the design phase we can provide you with a preview URL so you can see the work in action and make changes to your design accordingly. Send us the source files and fonts to support@adsolutions.com (WeTransfer preferred)

Final creative or requests for a preview can be send to traffic@adsolutions.com

Also read the GENERAL DOCUMENTATION fur further reference on building HTML5 ads.