Get Started

To start displaying ads and earning revenue on your website or Single Page Application (SPA), you must first implement the Ringier Advertising Tag Manager framework and prepare your HTML ad slot containers

Integrate Tag Manager

You should integrate it on all your HTML and SPA pages, which are supposed to display banner and video ads.

We are providing a loader script which can be easily integrated on your page. The loader script is asynchronously fetching the actual tag manager script and all dependent libraries which come pre-configured for all platforms (desktop / mobile web), channels and placements of your website. This minimizes the setup efforts and error potential.

You should initiate the tag manager loader as early as possible in the <head> section of your page to give the browser time to fetch and execute tag manager and its dependencies.

★ Note: The delivery of all Ringier Advertising scripts is backed by a CDN. In addition, the HTTP header of the server response contains an ETag for web cache validation, thus the scripts can be cached by the browser of your users.

Tag Manager Loader

Use the following code snippet to initialize the Tag Manager. Just replace the placeholders for <publisher>, <language> and <version> as provided by a Ringier Advertising representative.

For testing purposes, you can set your current environment in the loader below which will ensure that either the 'prod' or 'staging' version of the tag manager is loaded and executed.
If <environment> is omitted, the 'prod' version of tag manager will be loaded per default.

html

<script type='text/javascript'>
    (function(r,i,a,d,s) {
        r.admTagMan = r.admTagMan || {}; r.admTagMan.q = r.admTagMan.q || [];
        r.admTagMan.cq = r.admTagMan.cq || [];
        const e = r.document.createElement('script');
        e.src = 'https://cdn.ringier-advertising.ch/'+(s || 'prod')+'/tagmanager/'+i.toLowerCase()+'_'+a.toLowerCase()+'/'+d+'/atm.js';
        r.document.head.appendChild(e);
    })(window, '<publisher>', '<language>', '<version>' /*[, '<environment>']*/);
</script>

★ Note: Using 'latest' as <version> value will ensure that your website gets the latest features and code optimizations automatically when a new tag manager release is available.

Prepare HTML ad containers

To select the best-fitting creative, the Tag Manager requires a detectable maximum width for every ad slot container. Without this definition, the Tag Manager cannot determine the optimal creative size for the available space. If the Tag Manager reads a width of 0 or null, it may fail to deliver an ad or default to a safe (but potentially suboptimal) size.

★ Note: Every ad slot container must have a detectable width BEFORE the ad request is initiated.

Requirements

The container must not be display:none at all times.
Prepare the ad container width with one of the following approaches:

Scenario 1: Container already has a defined width

The Tag Manager will read the width of the container element and use it to select the best-fitting creative.

Scenario 2: The data-ad-max-width Attribute

If your container element cannot have it's width during initialization, or if you need to explicitly override the CSS width for the ad logic, you can use the data-ad-max-width attribute directly on the HTML element. The Tag Manager will prioritize this attribute when calculating the available space.

Example:

html

<div id="ad-slot-2" data-ad-max-width="300"></div>

★ Note: Ensure the value provided is a valid integer representing pixels (e.g., "300" for 300px). Percentages (e.g., "30%") are NOT supported.

Get Started ​

Integrate Tag Manager ​

Tag Manager Loader ​

Prepare HTML ad containers ​

Requirements ​

Scenario 1: Container already has a defined width ​

Scenario 2: The data-ad-max-width Attribute ​

Example: ​