ES6 Publisher Mode Demo: testedich

This page contains the complete ad configuration


Integration

This code should be placed in the head of your page

<link rel="preconnect" href="https://securepubads.g.doubleclick.net" crossorigin="anonymous">
<link rel="preconnect" href="[[domain]]" crossorigin="anonymous">

<!-- sourcepoint CMP (required) -->
<script>
  !function () { var e = function () { var e, t = "__tcfapiLocator", a = [], n = window; for (; n;) { try { if (n.frames[t]) { e = n; break } } catch (e) { } if (n === window.top) break; n = n.parent } e || (!function e() { var a = n.document, r = !!n.frames[t]; if (!r) if (a.body) { var i = a.createElement("iframe"); i.style.cssText = "display:none", i.name = t, a.body.appendChild(i) } else setTimeout(e, 5); return !r }(), n.__tcfapi = function () { for (var e, t = arguments.length, n = new Array(t), r = 0; r < t; r++)n[r] = arguments[r]; if (!n.length) return a; if ("setGdprApplies" === n[0]) n.length > 3 && 2 === parseInt(n[1], 10) && "boolean" == typeof n[3] && (e = n[3], "function" == typeof n[2] && n[2]("set", !0)); else if ("ping" === n[0]) { var i = { gdprApplies: e, cmpLoaded: !1, cmpStatus: "stub" }; "function" == typeof n[2] && n[2](i) } else a.push(n) }, n.addEventListener("message", (function (e) { var t = "string" == typeof e.data, a = {}; try { a = t ? JSON.parse(e.data) : e.data } catch (e) { } var n = a.__tcfapiCall; n && window.__tcfapi(n.command, n.version, (function (a, r) { var i = { __tcfapiReturn: { returnValue: a, success: r, callId: n.callId } }; t && (i = JSON.stringify(i)), e.source.postMessage(i, "*") }), n.parameter) }), !1)) }; "undefined" != typeof module ? module.exports = e : e() }();
</script>
<script>
window._sp_ = {
    config: {
        accountId: 270,
        baseEndpoint: 'https://consent.testedich.de'
    }
}
</script>
<script async src="https://consent.testedich.de/wrapperMessagingWithoutDetection.js"></script>

<!-- your ad tag -->
<script async type="module" src="[[domain]]moli_60a8dd23795cb3f827f7.min.mjs"></script>

You can find more information about the configuration of the tag in our Api Docs.

🧾 Sourcepoint CMP

Basic setup documentation

Footer link for the privacy modal

TCF 2 and german law require the privacy settings to be accessible at all times. A clean way to do this is to add a link into the footer that opens the privacy manager.

Privacy Settings

<a href="#" onclick="window._sp_.loadPrivacyManagerModal(178329);">Privatsphäre></a> 

Privacy Page

Additionally to sourcepoint scripts integrated in the head of your page, place this button on your privacy page to open the privacy manager

<button type="button" onclick="window._sp_.loadPrivacyManagerModal(178329);">Datenschutz Einstellungen öffnen></button>

🔮 Moli Console

You can get more details by opening the moli console.

Or if you are developer type this into the javascript console

moli.openConsole()

🚧 Ad Slots

ad_header

<div id="ad_header"></div>

ad_sidebar_right

<div id="ad_sidebar_right"></div>

ad_sidebar_left

<div id="ad_sidebar_left"></div>

ad_marginal_1

<div id="ad_marginal_1"></div>

ad_marginal_2

<div id="ad_marginal_2"></div>

Trigger the ad slot with

window.dispatchEvent(new Event('ads.ad_marginal_2'))


ad_content_1

<div id="ad_content_1"></div>

ad_content_2

<div id="ad_content_2"></div>

ad_content_3

<div id="ad_content_3"></div>

ad_mobile_stickyad

<div id="ad_mobile_stickyad"></div>

HTML

<div id="ad-mobile-sticky-container">
    <div id="ad_mobile_stickyad"></div>
    <button class="ad-mobile-sticky-close" id="ad-mobile-sticky-close"></button>
</div>
    

Javascript


/**
 * ## Ad Sticky
 *
 * Initializes the close button for the sticky ad and adds tracking events when
 * a users closes the ad.
 */
const initAdSticky = () => {
  // TODO use what ever you use to check if the DOM is ready - this script may also be loaded via GTM
  domReadyService.domReady().then(() => {
    const adSticky = window.document.getElementById('ad_mobile_stickyad');
    const closeButton = window.document.getElementById('ad-mobile-sticky-close');

    if (adSticky && closeButton) {
      closeButton.addEventListener(
        'click',
        () => {

          // hide the ad slot
          adSticky.style.display = 'none';

          // destroy the slot so it doesn't get reloaded or refreshed by accident
          window.googletag = window.googletag || { cmd: [] };
          window.googletag.cmd.push(googletag => {
            const slot = googletag
              .pubads()
              .getSlots()
              .find(slot => slot.getAdUnitPath() === '/33559401/testedich/testedich_mobile_stickyad');

            // there are cases where the ad slot is not there. This maybe the case when
            // * the ad slot has already been deleted (user clicked two times on the button)
            // * some weird ad blocker stuff
            // * ad reload may have already removed the slot ?
            if (slot) {
              googletag.destroySlots([slot]);
            }
          });
        },
        // the slot can only be hidden once
        { once: true, passive: true }
      );
    }
  });
};

CSS


 /** sticky ad code */
    #ad-mobile-sticky-container {
      position: fixed;
      width: 100%;
      background: #f2f0ed;
      bottom: 0;
      text-align: center;
      z-index: 5;
      box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2);
    }

    @media (min-width: 768px) {
      #ad-mobile-sticky-container {
        display: none;
      }
    }

    .ad-mobile-sticky-close {
      background-color: #f2f0ed;
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='341 8 13 13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%234F4F4F' d='M354 9.31L352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z' fill-rule='evenodd'/%3E%3C/svg%3E");
      background-position: 9px;
      background-repeat: no-repeat;
      background-size: 13px 13px;
      border: none;
      border-top-left-radius: 12px;
      box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2);
      height: 28px;
      padding: 6px;
      position: absolute;
      right: 0;
      top: -28px;
      width: 28px;
    }
    .ad-mobile-sticky-close::before {
      bottom: 0;
      content: "";
      left: -20px;
      position: absolute;
      right: 0;
      top: -20px;
    }
    

ad_floorad

<div id="ad_floorad"></div>

ad_wallpaper_pixel

Ad slot can be placed anywhere on the page and can be set to display:none

<div id="ad_wallpaper_pixel"></div>