Zones

Zones are regular <div> elements which act as placeholders for ad-insertion. Each Zone has a mandatory data-fuse attribute, which determines the ad format/size/etc to be used. For example:

<div data-fuse='1234567890'></div>

Zones are placed on the page like any element, but it is important to remember that they will be populated when the page loads, potentially with different sizes and shapes.

An example Zone interleaved between text blocks:

<div id="bodycontent">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
        dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
        ex ea commodo consequat.
    </p>
    <div id="first-body-ad" data-fuse='1234567890'></div>
    <p>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</div>

Inserting Zones

The simplest Zone element contains only a data-fuse attribute. For example:

<div data-fuse='1234567890'></div>

However, it is recommended to set a unique id attribute, because this makes it easier to reference later using fusetag function calls. The name is arbitrary, but subject to the HTML Standards requirement that no two elements have the same id.

For example, the following Zone has an id of first-body-ad.

<div id="first-body-ad" data-fuse='1234567890'></div>

Zones must not contain any child elements, because these may be replaced by the Fusetag at anytime.

See Zone styling for information about setting minimum heights, etc.

Injected Zones

Publift may remotely configure certain Zones to be injected directly into the DOM. This is most commonly used for features such as Sticky units. However, it may be used to insert ads anywhere on the page, e.g. they might be interleaved in the comments section. This will be discussed during the onboarding process.

Zone Registration

Once the <div> is present in the DOM, it must be registered, so that Fuse is aware it exists. Two registration functions are available:

In most cases, it is preferable to call fusetag.registerZone, because it does not need to (re)scan the entire DOM and is therefore slightly faster. However, the real-world performance difference is minor on all but the largest pages.

Zone Destruction

Zone lifecycle

Zones have four possible states:

  • unregistered: The <div> is present in the DOM, but has not yet been detected by the Fusetag.
  • inactive: The Zone is registered, but will be excluded from the auction until associated conditions are satisfied.
  • active: The Zone is ready for inclusion in future auctions, and may automatically refresh.
  • deleted: The <div> element was removed from the DOM.

Most Zones are ‘active’ after registration, and may be included in the next auction. However, some may be configured by Publift to initially be ‘inactive’ until one or more conditions are satisfied, such as:

  • The user has manually activated the zone.
  • 5 seconds have elapsed since the page load completed.
  • The user has scrolled a certain distance down the page.
  • The user is NOT logged in.

Fuse automatically handles the transition between these states.

Reusing Zones

At a technical level, nothing prevents multiple Zones with the same data-fuse attribute from being placed on the page. In some cases, such as infinite scroll, this is the correct approach.

Publift will advise when it is appropriate to reuse a data-fuse value, because in many cases doing so will result in lower yield as page locations are rarely of equal value to advertisers, who don’t want ambiguity about which location they’re bidding on.