triplelift ad challenge

render_ads.js

((global) => {

  function getTemplate () {
    return fetch('http://backend-php-test.prod.dcos.triplelift.net/ad-experience/template')
    .then(function(response) {
      return response.json();
    });
  }

  function getContent () {
    return fetch('http://backend-php-test.prod.dcos.triplelift.net/ad-experience/content')
    .then(function(response) {
      return response.json();
    });
  }

  function sendEvent (type, id) {
    return fetch(`http://backend-php-test.prod.dcos.triplelift.net/ad-experience/event/${ type }/${ id }`)
    .then(function(response) {
      return response.json();
    });
  }

  // actually pulled this from an article i wrote on frameworkless js. you should check it out:
  // https://jack.ofspades.com/frameworkless-javascript-part-2-templates-and-rendering/
  function renderTemplate (template, content) {
    return template.replace(/\{\s?(\w+)\s?\}/g, (match, variable) => {
      return content[variable] || ''
    })
  }

  // i was hesitant to use features that don't work in all major browsers
  // but the test *did* specify only firefox and chrome.
  class TL {
    constructor () {
      this.placements = [];

      this.findPlacements();
      this.renderPlacements();
    }

    // just learned that apparently NodeList supports most iterable methods now.
    // that made things a lot more readable haha
    findPlacements () {
      document.querySelectorAll('[id^="placement-slot"]')
        .forEach((placement) => this.placements.push(placement));
    }

    // async mostly so that we can use await inside but it also means that #renderPlacements runs a lot faster
    async renderPlacement (placement) {
      const placementTemplate = (await getTemplate()).payload.template;
      const placementContentPayload = (await getContent()).payload;
      const renderedTemplate = renderTemplate(placementTemplate, placementContentPayload.content);

      // only replace the inner HTML as specified
      placement.innerHTML = renderedTemplate;

      placement.addEventListener('click', (event) => {
        sendEvent('click', placementContentPayload.imp_id);
      });
      placement.addEventListener('mouseover', (event) => {
        sendEvent('mouseover', placementContentPayload.imp_id);
      });
      
    }

    renderPlacements () {
      this.placements.forEach(placement => this.renderPlacement(placement));
    }
  }

  // this, because of the constructor method, also renders all of the placements
  // but i left the renderplacement(s) and findPlacements methods exposed just in case
  // since that's more the format of what i think was expected.
  global.TL = new TL();
})(this)