Viewable Advertising Library

Placement Parameters and Specification

LIQWID Viewable Advertising Library (VAL) enables digital publishers for a complete automation of advertising inventory based on Viewable-only ads. Using LIQWID Ad Manager for Placement creation and Campaign management, it allows the monetization of any website quickly and easily without programming of the webpages. What could be achieved using hours of an experienced programmer, modifying the code of the website, can be achieved instantly using a single VAL Parameter without touching the code of the website, ever.

The Core Concept Behind LIQWID VAL

Envisioning and understanding better the processes behind the LIQWID VAL Parameters is easier with understanding of the concept of "watching" versa "listening". Unlike JavaScript Listeners, which "listen" for firing Events (clicks, loads, errors, etc.), the Viewable Advertising Library uses concept of Watchers.

Watchers are presets that do not listen for Events firing in the browser but instead "watch" for geometry, position and surface of the specified nodes within the DOM node tree of the HTML document in the context of the rendered and determined being within the viewport targeted parts of the content.

Further, Watchers use the elements, styles and node structure patterns, scrolling and other conditions of the specified in parameters nodes as opportunities for insertion of ads (or secondary content) into the viewport of the viewer's browser and manage their positioning relative to the viewable content, including responsive layouts and programmed processes such as infinite-scrolling, lazy-loading and other interactive features.

LIQWID Virtual Board [node] structure

Technically, LIQWID Virtual Board is a node inserted within a specific Targeted Node in the DOM node tree of the HTML document. By default, the placement virtual Board node is a DIV element but can be another element if specified using the useElement parameter (for example LI, SPAN or TR when used with TABLE, etc.) Regardless of which element is used for the Board, its element ID is always LIQWID_Board [plus the number of the board in the delivery logic].

LIQWID_board plays the role of a container for the LIQWID_Box [n] DIV — ad Box holder. This allows for flexibility to position the Box within the Board (for example Sticky Base placement can be set to create a semi-transparent overlay across the screen (Board) and position ad (Box) at the center or any specific side within the Board or aligned/centered relative to a specific node within the content. For the placements created for the commonly-used Rails/Aside columns on the right or left side of the content page, you may need sometimes to add one more container LIQWID_Rail [n] (that becomes parent node of the Board node) — this is useful in some complex layouts for a better managed positioning of the Board and its cloning/scrolling control.

It is important to remember the Targeted Node → [ Rail→ ] Board → Box structure as some parameters are specific to Targeted Node, some to Board, and some to Box for a wider pallet of possible placement positioning scenarios.

General Rules

All parameters should be coma separated and formatted as a single JavaScript object. Use single or double quotation characters for all literal strings and numbers without quotation characters. Use spaces and line breaks for a convenient and easy-to-read formatting. Most placements need just a couple of parameters, but some sophisticated layouts may require more than ten.

The main Target Node can be any string that can be understood by the querySelector method (w3schools.com.)

In rare occasions, you may need more than one Target Node selector. You can use more than one selector separated by pipe (|) or coma (for example: div.selector1, aside.selector2) because different nodes can be used on different pages and the placement Board will use the one it can find on the page (if it cannot not find any of the specified in the Target Node Selector nodes then it does not create any instance.)

Troubleshooting Mode

To toggle to debugging mode, add liqwid-log in the query string of URL of any webpage, for example, ?liqwid-log or &liqwid-log. This will trigger logging in the browser console. This is very useful during the placement configuration process and for troubleshooting of the live programmatic waterfalls.