Need help creating an HTML5 ad with dynamic text
Hi All,
I'm working on setting up my first ad to be run in 6Sense. I'm using a dynamic text field to populate a specific company name using URL mapping. Attached is a screenshot of the ad. The yellow copy (company name) is what will change. So it will be company + Premier.
I have the text field set to dynaimc but am totally confused to what to do next. Should there be specific placeholder text since it will change and what would I use as the instance name? I'm totally confused on what all I need to do in animate and if there is any code I need to add in the actions panel. Below is example code I received from 6Sense to ad in the html and js files.
Add Company Name and define landing page url based on Company:
var companyUrlMapping = { "UW Medical": "https://www.uwmedicine.org/", // Key is used as custom "OHSU": "https://www.ohsu.edu/", "Virginia Mason": "https://www.virginiamason.org/", "Seattle CCA": "https://www.seattlecca.org/", // add your additional // [Company Name]: "Click URL"};
Render Company name using Company Detail API:
function init() {
window.dynamicContent = document.getElementById('content'); // The div to replace the image into.
window.clickUrl = undefined; // the global variable to store the url from mapping. 'undefined' during init process.
window.companyName = undefined; // the global variable to store the company name. 'undefined' during init process.
// Showing loader
showImage(loader);
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.addEventListener("readystatechange", function () {
addListeners(); // Adding click listener to content; to handle click redirects
if (this.readyState == 4) { // After we get the response.
showImage();
if (this.status === 200){ // if we get the success response
res = JSON.parse(this.responseText); // this is how you parse the response from company details api
companyName = res.company.name;
var matchedMappingKey = Object.keys(companyUrlMapping).find(function (name) {
return name.toLowerCase() === companyName.toLowerCase();
}); // match company name ignoring case from the mapping object
if (companyName && matchedMappingKey) {
clickUrl = companyUrlMapping[matchedMappingKey]; // get the custom click url from mapping
displayPersonalizedText(companyName); // passing the company name to add personalized company name text on top of the ad
}
}
}
});
Below code explains how to use displayPersonalizedText function.
function displayPersonalizedText(userCompanyName) {
var companyNameEle = document.getElementById('company-name'); // the div that shows the custom text, the company name
companyNameEle.innerHTML = userCompanyName + ','
document.getElementById('text-area').style.top = '30%' // move the text a little more down to accomodate showing company name
}

