examples/ampcontext-creative.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      body {
        background: lightblue;
      }
    </style>
    <script>
      if (!window.context) {
        // window.context doesn't exist yet, must perform steps to create it
        // before using it
        console.log('window.context NOT READY');

        // load ampcontext-lib.js which will create window.context
        ampContextScript = document.createElement('script');
        ampContextScript.src =
          'http://localhost:8000/dist.3p/current/ampcontext-lib.js';
        document.head.appendChild(ampContextScript);
      }

      function intersectionCallback(changes) {
        // Code below is simply an example.
        var latestChange = changes[changes.length - 1];

        // Amp-ad width and height.
        var w = latestChange.boundingClientRect.width;
        var h = latestChange.boundingClientRect.height;

        // Visible width and height.
        var vw = latestChange.intersectionRect.width;
        var vh = latestChange.intersectionRect.height;

        // Position in the viewport.
        var vx = latestChange.boundingClientRect.x;
        var vy = latestChange.boundingClientRect.y;

        // Viewable percentage.
        var viewablePerc = ((vw * vh) / (w * h)) * 100;

        console.log(viewablePerc, w, h, vw, vh, vx, vy);
      }

      function dummyCallback(changes) {
        console.log(changes);
      }

      var shouldStopVis = false;
      var stopVisFunc;
      var shouldStopInt = false;
      var stopIntFunc;

      function toggleObserveIntersection() {
        if (shouldStopInt) {
          stopIntFunc();
        } else {
          stopIntFunc = window.context.observeIntersection(
            intersectionCallback
          );
        }
        shouldStopInt = !shouldStopInt;
      }

      function toggleObserveVisibility() {
        if (shouldStopVis) {
          stopVisFunc();
        } else {
          stopVisFunc = window.context.observePageVisibility(dummyCallback);
        }
        shouldStopVis = !shouldStopVis;
      }

      function resizeAd() {
        window.context
          .requestResize(500, 600)
          .then(function () {
            console.log('Success!');
            this.innerWidth = 500;
            this.innerHeight = 600;
          })
          .catch(function () {
            console.log('DENIED');
          });
      }
    </script>
  </head>

  <body>
    Test Ad using ampcontext.js to create window.context
    <button onclick="toggleObserveIntersection()">
      Toggle Observe Intersections
    </button>
    <button onclick="toggleObserveVisibility()">
      Toggle Observe visibility
    </button>
    <button onclick="resizeAd()">resize ad</button>
    <button onclick="console.log(window.context)">
      console.log(window.context)
    </button>
  </body>
</html>