Skip to content

Instantly share code, notes, and snippets.

@jacopotarantino
Created August 4, 2018 00:10
Show Gist options
  • Save jacopotarantino/0ef50f93237f642881e63e11375749ce to your computer and use it in GitHub Desktop.
Save jacopotarantino/0ef50f93237f642881e63e11375749ce to your computer and use it in GitHub Desktop.
triplelift ad challenge
((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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment