Building HTML5 with your authoring tool
- 21 Sep 2023
- 3 Minutes to read
- DarkLight
Building HTML5 with your authoring tool
- Updated on 21 Sep 2023
- 3 Minutes to read
- DarkLight
Article summary
Did you find this summary helpful?
Thank you for your feedback
This page helps you build a HTML5 and JavaScript ad creative to be served via Samsung DSP.
The definition of your HTML5 file can include tracking, access to dynamic ad server data, and expandability management.
You will find on this page the mandatory code snippets you need to ensure proper communication between Samsung DSP and ad exchanger and the JavaScript methods you can use to complete
1. Requirements
To ensure a proper communication between Samsung DSP and ad servers, you will need to include these code snippets:
The AdGear Javascript Library
Add this line in the <head>section of your creative's main HTML file:
<script type="text/javascript" src="https://h5.adgear.com/v2/js/html5.min.js"></script>
The AdGear html5.js Library is cache friendly to browsers and does not count toward the size of your HTML5 creative.
The Destination URL Parameter
Add this line in the <body> section of your creative's main HTML file:
ADGEAR.html5.clickThrough("clickTAG");
When a user clicks on the banner, this function will track the click and redirect the user to the URL specified in Samsung DSP (i.e., Click URL field).
Make sure this line to be called after the user clicks on the banner.
Example
// Apply the click on the banner div
function regEvent(elem, eventName, fn) {
if(typeof elem.addEventListener != "undefined") {
elem.addEventListener(eventName, fn, false);
return true;
} else if(typeof elem.attachEvent != "undefined") {
elem.attachEvent("on"+eventName, fn);
return true;
} else if(typeof elem["on"+eventName] == "function") {
var existing = elem["on"+eventName];
elem["on"+eventName] = function() {
existing();
fn();
};
return true;
} else {
try { elem["on"+eventName] = fn; } catch(err) { return false; }
return typeof elem["on"+eventName] == "function";
}
}
regEvent(document.querySelector("#banner"), "click", function() { ADGEAR.html5.clickThrough("clickTAG"); });
2. Define your HTML5 file
Assets
When building HTML5 creative, always use relative paths to link any files or assets (CSS, PNG, etc.) that are part of the creative.
For example, if the creative refers to an image such as logo.png, the best approach is to place the logo.png file in a subdirectory such as assets/logo.png and then calls the image from the creative's main HTML file (typically called index.html or ad.html):
<img src="assets/logo.png" />
This allows you to test the creative locally and guarantees that it would continue to work as expected once uploaded into a remote base URL.
For example, the above image reference will work as long as the asset's subdirectory is placed at the same level as the main HTML file.
Samsung Ads does not enforce any file structure. You can set up one that would fit your needs.
All the creative's local files, including subdirectories, will count toward the total file weight once uploaded into Samsung DSP.
API Methods & Best Practices
You can create more sophisticated ad executions by leveraging the extent of the AdGear HTML5 JavaScript API.
- See HTML5 Javascript Library to complete the creation of your file.
- See HTML5 Recommendations for best practices, tips, and tricks to create a HTML5 file that will render faster on web browsers.
3. Test & Debug your HTML5
Test and debug your package before uploading your HTML5 to Samsung DSP.
See Testing & Debugging HTML5 for more information about testing and debugging your HTML5.
4. Package Your Creative
Your creative's main HTML file, along with all additional assets and subdirectories, should be compressed and saved into a single ZIP file.
The main HTML file will be placed in an iFrame for ad delivery. We suggest you name this main file index.html.
The test loader HTML page should not be included as part of the ZIP file.
5. Import your HTML5
Once your creative has been tested successfully, you can now upload it to Samsung DSP.
SeeImport HTML5 Creative for more information.
Was this article helpful?
