Skip to main content
kineticcreative123
Inspiring
August 9, 2023
Question

Need help creating an HTML5 ad with dynamic text

  • August 9, 2023
  • 3 replies
  • 1194 views

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
}

 

    This topic has been closed for replies.

    3 replies

    Participant
    December 12, 2023

    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
    Community Expert
    Community Expert
    December 12, 2023

    @Laura250897853svv 

     

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

    JoãoCésar17023019
    Community Expert
    Community Expert
    August 13, 2023

    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
    Inspiring
    August 16, 2023

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

    Community Expert
    August 11, 2023

    what do you think JoãoCésar