Sample Integration

The following example code shows the integration of Ringier Advertising Tag Manager on a simple website. You can use this code as a basis for your Tag Manager integration and for retrieval of your first test ads.
★ Note: Make sure to use another domain than localhost for your tests as some ad server modules do
not return ads when using this domain.
html
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
    <meta name="robots" content="noindex">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>Ringier Advertising Tag Manager Example</title>
    <style type="text/css">
        .ad-container {
            float: left;
        }
        .unselectable { -ms-user-select: none; -webkit-user-select: none; -moz-user-select: -moz-none; user-select: none; -webkit-tap-highlight-color: transparent; outline: none !important; }
        .content-outer-wrapper { display: block;  margin: 0 auto; max-width: 1060px; }
        .content-inner-wrapper { display: block; position: relative; width: 1060px; }
        .content-placeholder { display: block; position: relative; margin: 10px; }
        .content-color-light { background-color: rgba(225, 220, 220, 1.0); }
        .content-color-lighter { background-color: rgba(240, 235, 235, 1.0); }
        .ad-container { text-align: center; }
    </style>
    <!-- OneTrust CMP Builder start -->
    <script src="https://cmp-cdn.cookielaw.org/scripttemplates/otSDKStub.js" type="text/javascript" charset="UTF-8"
            data-cmp-builder-version="2.0.0" data-domain-script="center-center-dark-global"></script>
    <script>function OptanonWrapper() {
        addCmpBuilderFeatures();

        function addCmpBuilderFeatures() {
            var existingCmpFeaturesScript = document.getElementById('cmp-builder-features-script');
            if (!existingCmpFeaturesScript) {
                var cmpFeaturesScript = document.createElement('script'),
                        script1 = document.getElementsByTagName('script')[0];
                cmpFeaturesScript.src = "https://cmp-cdn.cookielaw.org/consent/cmp-features/cmp-features.js";
                cmpFeaturesScript.setAttribute('id', 'cmp-builder-features-script');
                cmpFeaturesScript.async = false;
                cmpFeaturesScript.type = 'text/javascript';
                script1.parentNode.insertBefore(cmpFeaturesScript, script1);
            }
        }
    }</script>
    <!-- OneTrust CMP Builder end -->
</head>
<body class="unselectable">
<div id="contentOuterWrapper" class="content-outer-wrapper">
    <div id="contentInnerWrapper" class="content-inner-wrapper">
        <div style="max-width: 1060px; height: 50px;" class="content-placeholder content-color-light"></div>
        <div id="apn-ad-slot-hpa1" class="ad-container"></div>
        <div id="apn-ad-slot-pr1" class="ad-container"></div>
        <div style="max-width: 1060px; height: 50px;" class="content-placeholder content-color-lighter"></div>
        <div style="max-width: 1060px; height: 20px;" class="content-placeholder content-color-lighter"></div>
        <div style="width: 300px; height: 300px; float: left;" class="content-placeholder content-color-lighter"></div>
        <div style="width: 300px; height: 300px; float: left;" class="content-placeholder content-color-lighter"></div>
        <div id="apn-ad-slot-mr1" class="ad-container"
             style="display: inline-block; width: 300px; height:300px; margin: 10px;">
        </div>
        <div id="apn-ad-slot-wb1" class="ad-container"></div>
        <div style="max-width: 1060px; height: 150px;float:left;" class="content-placeholder content-color-lighter"></div>
    </div>
</div>
<script type="text/javascript">

    // Initiate Ringier Advertising Tag Manager framework. Each website / SPA will get a unique <publisher> identifier.
    (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, 'showroom.ch', 'de', 'latest' /*[, '<environment>']*/);

    // Push commands to loading queue, ads will be loaded asynchronously.
    admTagMan.q.push(function() {
        admTagMan.init({
            platform: 'Desktop',
            channel: 'ROS',
            targeting: {
                admforce: 'qa' // force demo ads!
            }
        });
    });

    // Define ad tags
    admTagMan.q.push(function() {

        admTagMan.registerSlot({
            slot: 'gallery_ad_1',
            container: 'apn-ad-slot-mr1',
        });

        admTagMan.registerSlot({
            slot: 'top_ad_1',
            container: 'apn-ad-slot-wb1',
            events: {
                adReady: function(data) {
                    console.log('top_ad_1 - ad is ready to be shown', data);
                },
                adLoaded: function(data) {
                    console.log('top_ad_1 - yaaay, ad was loaded', data);
                },
                adEmpty: function(data) {
                    console.log('top_ad_1 - an empty ad was delivered', data);
                },
                adError: function(data) {
                    console.log('top_ad_1 - an error occurred', data);
                },
                adStatus: function(data) {
                    console.log('top_ad_1 - all events additionally here', data);
                }
            },
            targeting: {
                // 'articleid': '1', - optional
            }
        });

        admTagMan.loadSlots();
    });
</script>
</body>
</html>
Sample Integration ​

Sample Integration
