Mezzobit offers several features to help publishers improve viewability, such as dynamic prioritization of ad rendering, viewability-aware ad/page refresher, and configurable sticky ads and lazy loading. These features can be applied to any visual element, not just ads. This is in addition to other platform features that monitor third-party collection of audience data and ad blocking activity. This document describes the set-up with DoubleClick’s Google Publisher Tag. The procedure would be similar with other ad servers.
Minimum setup to use viewability optimization
In order to use Mezzobit’s ad viewability features, Mezzobit’s container tag must either be embedded in the web page or managed within an enterprise-grade tag management system (other than Google Tag Manager). In the latter case, the container must be executed immediately after the GPT set-up routine that begins with defineSlot and setTargeting and concludes with enableServices. The container tag is asynchronous.
At minimum, the GPT display(slot) calls need to be placed inside the Mezzobit container. This will enable use of lazy loading, sticky ads, and refresher management. To maximize the performance improvements related to dynamic rendering, it’s a best practice to use the container to manage all of the set-up and display ad calls beginning with gpt.js, but this is not required. If there are other ad-tech vendors that modify the GPT routine, such as header bidders or targeting providers, this code also can be managed within Mezzobit. Many of these vendors specify that their calls should be synchronous when in fact asynchronous calls are acceptable as long as there are proper dependencies established between components. Using Mezzobit to manage these tags as asynchronous elements improves page performance and reduces the risk of third-party latency delaying page loads. It also can guard against unauthorized alteration of GPT calls and objects.
Setting up tags
For each GPT display call, you need to create a separate tag inside the container. General details regarding creating a tag can be found here.
For any tag, there is an option to mark it as being visual and specifying a location on the page where the tag should be displayed. This location can be any CSS selector, but it is preferred to associated the tag with an element having a unique ID. The location can be specified manually or by using Mezzobit’s visual placement editor, which permits the user to point to a location on the page, with the CSS location being “sniffed” and inserted in the box below.
Sample display script
Setting up the container
Mezzobit’s container tag is bootstrap code that should be placed on every template of the website. The container should be placed in the head of the page, as close to the top as possible. See Container Basics for details of how to create and modify a container. Until the container is ready to go live, it should be kept in a Disabled state.
All desired tags (ad code) can be inserted into the container via the TMS interface and will not fire, even if enabled, unless the container is enabled. To transition from in-page ad calls to those hosted by the container, simply disable the in-page scripts by commenting them out and enable the container. If this cannot be done in a staging environment and promoted to production in one operation, performing this procedure in production will only result in a minimum of pageviews without ad impressions. The diagrams below show two methods to enable a container.