Display Example · AdTech Integration Guides

Please be informed that the following example is very basic and only provides an opportunity to test your setup. The loading time in this test setup takes a while. Make sure, that you use the correct config according to our documentation described on Somtag Integration, when you provide us your test pages.

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
 <script>
(function (s, o, m, t, a, g) {
  s.somtag = {
    cmd: function () {
      g = [].slice.call(arguments);
      g.push(o.currentScript || o.scripts[o.scripts.length - 1]);
      (this.q = this.q || []).push(g);
    } };
    a = o.createElement('script');
    a.src = m;
    o.head.appendChild(a);
    })(window, document, '//ad.71i.de/somtag/loader/loader.js');

  somtag.cmd('init', {
        config: {
            id: 'demo_site', // Given by the SOM adtec team, 'demo_site' id is only for testing
            consent: {
              optOut: false, // true when user has accepted the CMP layer
            }
        },
        display: {
            slots: {
                fullbanner2: { enabled: true },
                skyscraper1: { enabled: true },
            }
        }
    });

     somtag.cmd('insertAd', 'fullbanner2', { container: '#fullbanner2' });
     somtag.cmd('insertAd', 'skyscraper1', { container: '#skyscraper1' });
</script>
<style>
  header {
    background-color: red;
    padding: 20px;
  }
  .content {
    display: flex;
  }
  section {
    background-color: lightgray;
    padding: 20px;
    min-height: 560px;
    flex-grow: 1;
  }
  #skyscraper1 {
    min-width: 300px;
  }
  footer {
    background-color: red;
    padding: 20px;
  }
</style>
</head>

<body>
  <header>
    Header
  </header>
  <main>
    <div id='fullbanner2'></div>
    <div class="content">
        <section>
        Content area
        </section>
        <div id='skyscraper1'></div>
    </div>
  </main>
  <footer>
    Footer
  </footer>
</body>
</html>

You should see our test display ads: Display Ad Example