MattMcFarland/ad-ctl.js

## ad-ctl.js
/*
Ad King Pro HTML5 Iframe Banner hack
   Created by Matt McFarland - contact@mattmcfarland.com

   To use this, you need to enqueue this script into your wordpress.  Or just use <script> tags if you're a n00b.
   This will only work, if you create a subfolder in your wp-content folder called "adverts"
   Then create another subfolder in adverts and make it the campaign name like "newsletter"
   Then create yet another subfolder inside the new adverts folder you made that is the banner size.
   The banner size must be widthxheight and nothing else.  So for example, 468x60
   Then slap your html5 banner in there ie "banner.html"
   The end result would be "/wp-content/adverts/newsletter/468xx0/banner.html"

   *  Now to use this with Ad King Pro  *
   You simply create a new text ad, and then make the ad text the link to your html5 banner, so in this scenario
   the ad text would be "/wp-content/adverts/newsletter/468x60/banner.html"
   Then just make the text banner link to where you want as you would normally.

   The jQuery script below will parse your URL and assign variables as it reads, this is what it will do:
   The script will create a campaign variable that is the 3rd item in your URL "newsletter"
   The script will create the dimensions variables, width 468, height 60, from the URL you provided.
   Finally it will create the banner name variable, labeled "banner.html"

   It uses these banner variables to track impressions and clicks as events in google analytics.
   It also uses the size variables transform the class 'adkingprotext' to an 'iframe'

   Wallah you now have an awesome html5 banner, which if you're savvy, can be animated like flash, but will work
   on IOS or without a flash browser plugin..  Took me 8 hours to write up.. You're welcome.

*/

//hh_track function is used as the OnClick event for when people click the banner, it is useful because it creates
//an event in your Google Analytics that indicates someone clicked on the banner.
function hh_track(campaign,size,bname) {
	_gaq.push(['_trackEvent','Banner Click - '+campaign,size,bname]);
}
jQuery(document).ready(function($) {

	//initBanner function does not run until the iframe has been loaded
	window.initBanner = function(banner_id) {
		$banner = $('#'+banner_id);
		campaign 	=	$banner.attr('data-campaign');
		size 		=	$banner.attr('data-size');
		bname 		= 	$banner.attr('name');
		href 		=	$banner.attr('data-target');
		adcc		=	bname+'('+size+')';

		// Commented out becuase this can break certain links (short links or links to constasnt contact)
		//It would work great though in some places, as it allows your clients to easily track clicks.
		//href		+=  '/?utm_source=HVAC-Hacks.com&medium=banner&content='+adcc+'&campaign='+campaign;


		/*
		Canvas? what's this?
		This might only work for me, my html5 banners use an <svg> element which is html5 stuff for animated
		banners.  Now not all people will need an <svg>, but you need to wrap your main element (canvas) or <div>
		wrapped with an <a> tag.  Wrapping the iframe with an <a> tag will NOT work.  So this is needed to wrap maybe even the <body> tag, but for now I use <svg>
		I am using a program called Sothink Easy SWF banner that exports to html5, and since they dont do any <a>
		tags I had to use this.  So this canvas thing could be ommitted.
		*/
		$canvas 	= 	$banner.contents().find('svg');
		$canvas.wrap(
			'<a '
				+ 'data-campaign = "'+campaign+'" '
				+ 'data-size = "'+size+'" '
				+ 'name = "'+bname+'" '
				+ 'href = "'+href+'" '
				+ 'target = "_blank"'
				+ 'onClick = "parent.hh_track(\''+campaign+'\',\''+size+'\',\''+bname+'\')"'
			+ '></a>'
		);
		//Google Analytics creates an event that a banner impression occured.
		_gaq.push(['_trackEvent','Banner Imp - '+campaign,size,bname]);
	}


	//This function fires immediately after the page has been loaded. It turns all of the <div>
	//tags that have the class '.adkingprobannertext' into an <iframe> tag.
	//Then it applies classes and other attributes to the <iframe> that are needed for it to work
	//properly, and also track banner impressions and clicks.
	//Once this function complets, it runs the initBanner function.
	$banners = $('.adkingprobannertext');
	$('.adkingprobannertext').each(function() {
		$banner = $(this);
		banner_src 		= $banner.text();
		banner_target 	= $banner.attr('href');
		banner_data 	= banner_src.split("/");
		banner_campaign = banner_data[3];
		banner_size 	= banner_data[4];
		banner_width 	= banner_size.split("x")[0];
		banner_height 	= banner_size.split("x")[1];
		banner_name 	= banner_data[5];
		banner_id		= 'banner_'+$banner.attr('data-id');
		$banner.replaceWith(
			"<iframe "
				+ "class"			+"="+ 	"'HTML5-Banner'"
				+ "name"			+"="+ 	"'"+ banner_name +"'"
				+ "id"				+"="+ 	"'"+ banner_id +"'"
				+ "data-target"		+"="+	"'"+ banner_target +"'"
				+ "data-campaign"	+"="+	"'"+ banner_campaign +"'"
				+ "data-size"		+"="+	"'"+ banner_size +"'"
				+ "width"			+"="+	"'"+ banner_width +"'"
				+ "height"			+"="+	"'"+ banner_height +"'"
				+ "src"				+"="+	"'"+ banner_src +"'"
				+ "onLoad"			+"="+	"'initBanner(\""+banner_id+"\")'"
			+ "></iframe>"
		);
	});
});
	/*
	Ad King Pro HTML5 Iframe Banner hack
	Created by Matt McFarland - contact@mattmcfarland.com

	To use this, you need to enqueue this script into your wordpress. Or just use <script> tags if you're a n00b.
	This will only work, if you create a subfolder in your wp-content folder called "adverts"
	Then create another subfolder in adverts and make it the campaign name like "newsletter"
	Then create yet another subfolder inside the new adverts folder you made that is the banner size.
	The banner size must be widthxheight and nothing else. So for example, 468x60
	Then slap your html5 banner in there ie "banner.html"
	The end result would be "/wp-content/adverts/newsletter/468xx0/banner.html"

	* Now to use this with Ad King Pro *
	You simply create a new text ad, and then make the ad text the link to your html5 banner, so in this scenario
	the ad text would be "/wp-content/adverts/newsletter/468x60/banner.html"
	Then just make the text banner link to where you want as you would normally.

	The jQuery script below will parse your URL and assign variables as it reads, this is what it will do:
	The script will create a campaign variable that is the 3rd item in your URL "newsletter"
	The script will create the dimensions variables, width 468, height 60, from the URL you provided.
	Finally it will create the banner name variable, labeled "banner.html"

	It uses these banner variables to track impressions and clicks as events in google analytics.
	It also uses the size variables transform the class 'adkingprotext' to an 'iframe'

	Wallah you now have an awesome html5 banner, which if you're savvy, can be animated like flash, but will work
	on IOS or without a flash browser plugin.. Took me 8 hours to write up.. You're welcome.

	*/

	//hh_track function is used as the OnClick event for when people click the banner, it is useful because it creates
	//an event in your Google Analytics that indicates someone clicked on the banner.
	function hh_track(campaign,size,bname) {
	_gaq.push(['_trackEvent','Banner Click - '+campaign,size,bname]);
	}
	jQuery(document).ready(function($) {

	//initBanner function does not run until the iframe has been loaded
	window.initBanner = function(banner_id) {
	$banner = $('#'+banner_id);
	campaign = $banner.attr('data-campaign');
	size = $banner.attr('data-size');
	bname = $banner.attr('name');
	href = $banner.attr('data-target');
	adcc = bname+'('+size+')';

	// Commented out becuase this can break certain links (short links or links to constasnt contact)
	//It would work great though in some places, as it allows your clients to easily track clicks.
	//href += '/?utm_source=HVAC-Hacks.com&medium=banner&content='+adcc+'&campaign='+campaign;




	/*
	Canvas? what's this?
	This might only work for me, my html5 banners use an <svg> element which is html5 stuff for animated
	banners. Now not all people will need an <svg>, but you need to wrap your main element (canvas) or <div>
	wrapped with an <a> tag. Wrapping the iframe with an <a> tag will NOT work. So this is needed to wrap maybe even the <body> tag, but for now I use <svg>
	I am using a program called Sothink Easy SWF banner that exports to html5, and since they dont do any <a>
	tags I had to use this. So this canvas thing could be ommitted.
	*/
	$canvas = $banner.contents().find('svg');
	$canvas.wrap(
	'<a '
	+ 'data-campaign = "'+campaign+'" '
	+ 'data-size = "'+size+'" '
	+ 'name = "'+bname+'" '
	+ 'href = "'+href+'" '
	+ 'target = "_blank"'
	+ 'onClick = "parent.hh_track(\''+campaign+'\',\''+size+'\',\''+bname+'\')"'
	+ '></a>'
	);
	//Google Analytics creates an event that a banner impression occured.
	_gaq.push(['_trackEvent','Banner Imp - '+campaign,size,bname]);
	}




	//This function fires immediately after the page has been loaded. It turns all of the <div>
	//tags that have the class '.adkingprobannertext' into an <iframe> tag.
	//Then it applies classes and other attributes to the <iframe> that are needed for it to work
	//properly, and also track banner impressions and clicks.
	//Once this function complets, it runs the initBanner function.
	$banners = $('.adkingprobannertext');
	$('.adkingprobannertext').each(function() {
	$banner = $(this);
	banner_src = $banner.text();
	banner_target = $banner.attr('href');
	banner_data = banner_src.split("/");
	banner_campaign = banner_data[3];
	banner_size = banner_data[4];
	banner_width = banner_size.split("x")[0];
	banner_height = banner_size.split("x")[1];
	banner_name = banner_data[5];
	banner_id = 'banner_'+$banner.attr('data-id');
	$banner.replaceWith(
	"<iframe "
	+ "class" +"="+ "'HTML5-Banner'"
	+ "name" +"="+ "'"+ banner_name +"'"
	+ "id" +"="+ "'"+ banner_id +"'"
	+ "data-target" +"="+ "'"+ banner_target +"'"
	+ "data-campaign" +"="+ "'"+ banner_campaign +"'"
	+ "data-size" +"="+ "'"+ banner_size +"'"
	+ "width" +"="+ "'"+ banner_width +"'"
	+ "height" +"="+ "'"+ banner_height +"'"
	+ "src" +"="+ "'"+ banner_src +"'"
	+ "onLoad" +"="+ "'initBanner(\""+banner_id+"\")'"
	+ "></iframe>"
	);
	});
	});