Difference between revisions of "HTML5 Hosted Image Banners"

From TMM Wiki
Jump to navigationJump to search
Line 22: Line 22:
 
Example:
 
Example:
 
<pre>
 
<pre>
<div class="videoContainer" onclick="window.open('http://<linkdomain url>/track/<?=!empty($_GET['nats'])?$_GET['nats']:'<default NATS code for site & adtoolid'?>/', '_blank');" style="width: 300px; height: 250px; position: relative; cursor: pointer; overflow: hidden;">
+
<div class="videoContainer" onclick="window.open('http://<linkdomain url>/track/<?=!empty($_GET['nats'])?$_GET['nats']:'<default NATS code for site & adtoolid'?>/', '_blank');">
 
</pre>
 
</pre>
  

Revision as of 14:58, 16 February 2018

HTML5 Hosted image banners will allow you to add an adtool hosted on an external URL.

Required Fields

  • Name
  • URL
  • Embed tag (to be displayed for the affiliate)
    • Iframe or Embed html tags
  • Width
  • Height

Notes

When you add your adtool, please note that both 'Width' & 'Height' fields are required and will not automatically calculate for your banners


Whats 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 adtool. This will allow your adtool to construct a track link and allow the adtool to work as expected.

PHP

If the page your banner is hosted on is PHP parsible, 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="videoContainer" onclick="window.open('http://<linkdomain url>/track/<?=!empty($_GET['nats'])?$_GET['nats']:'<default NATS code for site & adtoolid'?>/', '_blank');">

Javascript

If your HTML5 Banners are not PHP parsible, 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:

  • 'http://<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>