HTML5 Hosted Image Banners

Article Topics: Ad Tools

The HTML5 Hosted Image Banners Ad Tool type lets you add an ad tool hosted on an external URL to NATS. After adding the external link, your affiliates will then be able to grab the banner with a corresponding linkcode in order to attract more visitors to your site.

Adding an HTML5 Hosted Image Banner

You can add a new image to be used as an HTML5 Hosted Image Banner through the Ad Tools Admin. There are a number of ways to do this. The simplest way is to navigate to the Ad Tools Admin, go to the "Banners" Ad Tool category, and click the "+" button next to the "HTML5 Hosted Image Banners " ad tool type.

On the "Add New Ad Tool" page, use the available "URL" field to add the URL of the banner image you want to use.

You can define the other available settings for your banner here as well. These settings include:

• Name - Defines the text that will be shown when mousing over the banner.

• URL - The URL where your banner image is hosted.

• Embedded Tag - Select iframe or embed tags depending on the attributes of the banner. This is displayed for the affiliate.

• Width - Specify the width of the banner.

• Height - Specify the height of the banner.

• Publish Date - Input what date you want the banner to be available from.

• Default Group - Select an Ad Tool group to categorize the banner under.

Please Note: When you add your ad tool, both 'Width' & 'Height' fields are required and will not automatically calculate for your banners.

Once you have defined all of the available fields, click "Add Ad Tool" to add your new Image banner to NATS.

Your new HTML5 Hosted Image Banner will now be displayed in the "HTML5 Hosted Image Banners Ad Tool" asset list, along with the other available html5 hosted image banners. This table provides a preview of your banner including the banner ID number, name, URL, height, width, and default group.

What Is Needed on Your HTML5 Banners

Your HTML5 Banner will have to be able to get the NATS code being passed in the URL to the ad tool. This will allow your ad tool to construct a track link and allow the ad tool to work as expected.

PHP

If the page your banner is hosted on is PHP parsable, you will be able to use PHP logic to get the NATS code from the URL, and use the default NATS code if one is not found. Example:

<div class="class" href="https://<linkdomain url>/track/<?=!empty($_GET['nats'])?$_GET['nats']:'<default NATS code for site & adtoolid'?>/">

Javascript

If your HTML5 Banners are not PHP parsable, you will need to use javascript which will be able to take the NATS code from the URL parameter 'nats' and construct it into a track link. This is just an example javascript would look like which would override URL in the banner with the one in the javascript. Please speak with your developer to customize this to your needs if needed, as every banner is created differently.

For this example, the following would need to be replaced and tailored to your setup:

• 'https://<replace with NATS URL>' based on your http/https setup and your NATS domain/linkdomain:

• '$("#tui-ctl").attr("href", redirect_url);' will need to be updated based on your html setup.

<script type="text/javascript">
	function getUrlParameter(name) {
		name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
		var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
		var results = regex.exec(location.search);
		return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
		};
	$(document).ready(function(){
		var tcode = getUrlParameter('nats');

		if(tcode){
			var redirect_url = "http://<replace with NATS URL>/track/"+tcode;
			$("#tui-ctl").attr("href", redirect_url); 
		}
	});
</script>

Related Articles

Ad Tool Type