Possible to make Dynamic creatives for Adcombi with Hype?

BannerMan · January 14, 2022, 3:58pm

For a project there needs to be allot of localization that can be adjusted realtime, hence a decision was made to use Adcombi.io to get this done dynamically.

Since I'm a fierce Hype fan I want to build the creatives in Hype instead of making them manually with GSAP, however their account team states that they require 'Workable' html files to implement their libraries and modify static div elements for dynamic ones. Since Hype exports minified code this ofcourse wouldn't be workable for them.

But their documentation is pretty clear, with their file structures and html document setup. As far as I can see they only require the dynamic elements to have a class=”dynamicField” combined with an unique ID.

I'm wondering if it would be doable do this with hype, since they'll adjust the documents to load in the data from the feed theirselves later. I had two setups in my mind, but i'm not sure if this is the right approach.

Setup 1, just create 3 rectangles with inner htm

<p class="dynamicField" id="descriptionText">Here comes the description</p>
<p class="dynamicField" id="sloganText">Here comes the slogan</p>
<img class="dynamicField" id="dynamicImage" src="images/TestImage.png">

However the exported code would look like this:
Schermafbeelding 2022-01-14 om 16.51.42

I don't know if this is 'editable' enough.

Setup 2, would be be doing this through a widget html element to create 3 iframes with the same code, this would provide them a clean html document thats editable for them for just those elements. But I'm just wondering if their scripts to load the feed would be able to edit anything else then the index.html

So my question is, does anybody have experience with this, or with Adcombi? Or knows other methods that could make it compatible and editable according to their documentation.

jonathan · January 14, 2022, 8:09pm

I don't have experience with Adcombi, but can shed a little light on the challenges of integrating this with Hype and what they'd need so it works correctly.

The first bit to understand is that Hype constructs the webpage dynamically via JavaScript. So something you've put into the Inner HTML of a Rectangle/div-based element in the Hype application ultimately gets stored as JSON data. So if Adcombi is using static tools to look at HTML source code, it won't find your Inner HTML properly. I doubt they are going so far as to look inside JSON strings and do replacements for HTML-escaped looking things.

Hype constructs the DOM/overall structure for the entire document once, after the runtime has loaded. This is typically an asynchronous download in the default case, though if you really wanted you should be able to put in synchronous <script> tags to ensure a specific time.

But regardless, Hype's rewrites all the contents and properties of elements when there's a scene or layout change. (The only exception is persistent symbols).

So basically to get around these mechanics, you'd need to use a dynamic Adcombi API that modifies the active DOM structure. You'd need to call this API with Hype's On Prepare For Display scene action handler, and preferably scope the changes just to this scene.

Given that ads care significantly about download and file size weight, it is unlikely they have a dynamic API to do this type of thing. A dynamic API would mean they'd either need to ship all the localized strings for your ad (heavyweight) or make a network call to get them (slow, and asynchronous so it wouldn't display properly without wait periods). I'm guessing that they don't have an API at all for this, and everything is done via static HTML replacements.

I think this could absolutely be the way to go to work with their system. Hype's HTML Widget spits out clean HTML files for the Inner HTML. As long as they are able to understand they need to do the static replacements on these other .html files I imagine it could work.

The downside is that each HTML Widget is a separate .html file -- basically this is an additional network load. So if you have a lot of them it could stress ad politeness and also means that they may not be shown instantly since each it is an asynchronous network request.

Feel free to forward this to them; they may have specific thoughts on how to handle it.

MarkHunte · January 15, 2022, 9:17am

Not going to profess I know much about ads and how they work.

But wondering, rather than use widgets you could bake you own html file for them to edit.
And have Hype parse it into the innerHTML.

This may get around multiple calls since you could have all the info/divs in one html file.

like so:

   	<div  class="adc1">
   	<p class="dynamicField" id="descriptionText">Here comes the description</p>
<p class="dynamicField" id="sloganText">Here comes the slogan</p>
<img class="dynamicField" id="dynamicImage" src="images/logo.png">
   	 </div>
   	 
   	 
   	   	<div  class="adc2">
   	<p class="dynamicField" id="descriptionText">Here comes the description 2</p>
<p class="dynamicField" id="sloganText">Here comes the slogan  2</p>
<img class="dynamicField" id="dynamicImage" src="images/logo.png">
   	 </div>

In this example the html file (adc.html) is placed in the Hype resources. (via the resource library )
You can edit this file yourself with an external editor like Whisk.app or plain text editor.

Screenshot 2022-01-16 at 01.38.46

And the ad people can edit it via the export.

Screenshot 2022-01-16 at 01.41.06

The Hype project has normal empty rectangles that are give ids that will be used by the code ( below )
to find and add the correct div to the rectangles innerHTML.

The code has a key value object that it iterates over to do this.

//— keys are the same used for element ids and values are the div class names in the html file 
//-- {key,value}
var infoboxes = {"adcBox1":"adc1","adcBox2":"adc2"} 
 


var txtFile = new XMLHttpRequest();
txtFile.open("GET", "${resourcesFolderName}/adc.html" , true);
txtFile.onreadystatechange = function() {
if (txtFile.readyState === 4) { // Makes sure the document is ready to parse.
if (txtFile.status === 200) { // Makes sure the file exists.
allText = txtFile.responseText;

 //comment out replace if images are else where
 allTextR = allText.replace(/images\//g,"${resourcesFolderName}/")
 
var temp = document.createElement('div');
temp.innerHTML = allTextR;

for(var infobox_key in infoboxes) {
  var htmlObject = temp.querySelector("." + infoboxes[infobox_key]);
 
 console.log(infobox_key)
hypeDocument.getElementById(infobox_key).innerHTML = htmlObject.innerHTML

 }
 
}
}
}
txtFile.send(null);

I also deal with the images in the parser by replacing the image/ path with hypes resource path but you can set that up as needed.

In the browser :

Archive 2.zip (123.7 KB)

( note the exported project will need to be run via a server for the XMLHttpRequest to work.
the preview will work fine since hype runs it via its own server, additionally Whisk.app and the like will also be ok )

Also I did do a test with an edited version of the export assets script that just put the adc.html file outside of the .hyperesources folder and set the url for the html file relative to that.
This worked so you even have that option to make the html easier for them to find.

As shown here

Screenshot 2022-01-16 at 01.34.47

Again I may have the wrong end of the stick of how t you need this to work but it may help..?

jonathan · January 16, 2022, 2:50am

That's a really good idea @MarkHunte.

To take it further/simpler, I wonder if the divs could be included in the Head HTML of Hype, within a hidden div there. The ad system would do the replacement. Then On Scene Load there could just be code that copies the Inner HTML of one of these head divs into a Hype element. This would mean you don't need the XMLHTTPRequest or separate file.

One would of course need to test this with the ad system.

MarkHunte · January 16, 2022, 7:59am

Yes that is a much better way to do this.

So in the head it would look something like this:

	 	<style>
	.adc {
  display: none;
}
	</style>
		<div class="adc">
	
	   	<div  class="adc1">
	   	
	   	<!-- Creative edit area -->	
	   	
	   	<p class="dynamicField" id="descriptionText">Here comes the description</p>
		<p class="dynamicField" id="sloganText">Here comes the slogan</p>
		<img class="dynamicField" id="dynamicImage" src="images/logo.png">
		
		<!-- end creative edit area -->	
	   	</div>
	   	 
	   	 
	    <div  class="adc2">
	    	<!-- Creative edit area -->	
	    	
	   	<p class="dynamicField" id="descriptionText">Here comes the description 2</p>
		<p class="dynamicField" id="sloganText">Here comes the slogan  2</p>
		<img class="dynamicField" id="dynamicImage" src="images/logo.png">
	
	<!-- end Creative edit area -->		
   	 </div>
   </div>

And the new function is much more simpler.

 var allText =  document.querySelector('.adc')
  
	  
	//— keys are the same used for element ids and values are the div class names in the html file 
	//-- {key,value}
	var infoboxes = {"adcBox1":"adc1","adcBox2":"adc2"} 
	 
	
	 	 
			
	for(var infobox_key in infoboxes) {
	  var htmlObject = allText.querySelector("." + infoboxes[infobox_key]);
	 
	 htmlObjectImage =  htmlObject.querySelector('img')
	 htmlObjectImageSrc_new  =  htmlObjectImage.src = htmlObjectImage.src.replace('images/',"${resourcesFolderName}/")
	
	hypeDocument.getElementById(infobox_key).innerHTML = htmlObject.innerHTML
	
	 }

Note I still have the image paths in the html set to images/logo.png
As I am not sure who changes this/at what stage and if it has to be exactly that.
I have the actual images in the resource library in this example

And so I have it being replaced in the code,

htmlObjectImage =  htmlObject.querySelector('img')
	 htmlObjectImageSrc_new  =  htmlObjectImage.src = htmlObjectImage.src.replace('images/',"${resourcesFolderName}/")

The replace path can be removed if not needed.

The image path will need to be set as you need it and should be simple to figure out if you need the replace code or not.
You can also set the paths in the html to point directly at the resource folder.
i.e
src="${resourcesFolderName}/logo.png">

Also note that the browser reads the (hidden) html still and if the image path does not exist which in this example it does not, at first read stage you will still see a not found error. Don't worry about the error in this case.

testAdc_v2.hype.zip (21.7 KB)

BannerMan · January 17, 2022, 10:27am

Amazing! Thanks for the help @jonathan and @MarkHunte!

Appreciate the creative setup to get around issues like this. I've tweaked a bit here and there and send it to Adcombi to check with them if it will work. I'll update here once I hear more from them.

*Edit, I got a reply from Adcombi, stating that they could make the iframes solution work, but they see the html in the head as the ideal solution. So it seems we got it working

MarkHunte · January 18, 2022, 1:06am

cool,

what was the slight changes you made.

BannerMan · January 18, 2022, 8:17pm

Nothing major, just setting it up for the ad documentation, changing it to one dynamic element per div group and disabling the image source function as it gave some issues when I changed the contents per div. Besides that, it stayed the same. Another win for Hype!