Need help creating an HTML5 ad with dynamic text

[kineticcreative123]

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
}

 

[Nick Gioia]

what do you think JoãoCésar

[JoãoCésar]

Hi.

Sorry for the late response.

I think you don't need to go over through all that complexity. You just need to run the XMLHTTPRequest, get the response, and concatenate the .company.name value + " Premier" in a text field's text property. Like this:

var root = this;
var xhttp = new XMLHttpRequest();
var res;

xhttp.onreadystatechange = function()
{
    if (this.readyState == 4 && this.status == 200)
	{
		res = JSON.parse(xhttp.responseText);
		root.yourStageTextField.text = res.company.name + " Premier";
	}
};

xhttp.open("GET", "https://somedomain.org/endpoint", true); // e.g.: https://jsonplaceholder.org/posts/1
xhttp.send();

Please let us know if this is what you need to do.

Regards,

JC

[kineticcreative123]

Thank you JC for your help. I will give this a try. 

[Laura250897853svv]

Does anyone know where I can find a coder to create these type of dynamic ads for me? We do not have the resources internally and 6sense developers are way too expensive!

[kglad]

@Laura250897853svv 

if you're looking to hire an independent contractor, send me a private message.