Add Google Analytics event tracking to modal window popup

iskills
iskills used Ask the Experts™
on
I am trying to add event tracking, or pageview tracking (I can get neither to work) to a modal popup action.

The general error I am getting, in Safari: Reference Error: Can't find variableL pagetracker - I get a similar error for IE 8 "pagetracker is not an object" or similar.

It seems to me, that the problem is scope related or similar, but I am not sure how to overcome this...

Relevant code below.

TIA!


The "form" that triggers the add to cart on click:

<form id='atcform' name='atcform' style='margin: 0px;' method='post' action=''>
	<br>
	<span class='quiet'>Quantity:</span>
	<div style='height: 30px; vertical-align: middle;'><input type=text name='qty' size=2 value='1' class='nuprodqty' id='qty'>
	<!-- THIS IS WHAT THE ATC CLICK IS BOUND TO -->
	<input type='image' name='imagefield5' src='/images/buttons/gfx_addtocart_5.gif' width='87' height='22' vspace='2' border='0' alt='Add This Item to Your Cart' id='addtocart'></div>
	<input type=hidden name='sku' value='".$product["code"]."' id='sku'>
	<input type=hidden name='checkout_action' value='' id='checkout_action'>
</form>

Open in new window


This is the jQuery call that I thought to put the pagetracker._trackPageview("urlhere") on:

	$("#addtocart").click(function () {
		//get variables that are going to be posted
		var qty=$("input#qty").val();var sku=$("input#sku").val();var site=$("input#site").val();
		$.post("/cart/cart_ajax.html?action=add", { qty: qty, sku: sku, site: site },function(data) { 
			var $contentWindow=$("<div id='atcdialog'></div>").html(data).dialog({ 
				dialogClass: 'noTitleStuff', 
				position: 'center', 
				height: 330, 
				width: 520, 
				resizable: true, 
				modal: true, 
				close: function() {
					$("#atcdialog").dialog("destroy").remove();
					if($("#checkout_action").val()=="checkout") {
						location.href='/cart/cart.html';
					}
				} 
			});
			$('.ui-widget-overlay').live("click", function() {
				//Close the Dialog
				closeATC();
			});
			$.get("/includes/ajaxfunctions.php?action=updatecartitems",{},function(data) { 
				$("#cartitems").html(data);
			});
		}, "html");
		return false;
	});

Open in new window


Obviously there are several things going on - first I retrieve the qty/sku/other data coming in, use that in a .post that does the add to cart.  That cart_ajax.html page returns pre-formatted html to display in the modal window which is triggered on the .post completion

Again, what I am trying to do here is track the pageview in Google Analytics.  The GA code that is shown below is in the footer of the page.  I have tried it in the header under the body - no difference made.  

I have tried the following:

adding pagetracker._trackPageview("/cart/cart_ajax.html?action=add"); to:
1. before the .post in the click function
2. declaring var pagetracker before the .click function
3.  adding the pagetracker as an onclick event for the input type=image
4.  placing the pagetracker AFTER and outside the .post event

Nothing seems to be able to get it working.

Google Analytics code:
	<script type=\"text/javascript\">
		var gaJsHost = ((\"https:\" == document.location.protocol) ? \"https://ssl.\" : \"http://www.\");
		document.write(unescape(\"%3Cscript src='\" + gaJsHost + \"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E\"));
	</script>
	<script type=\"text/javascript\">
		try {
			var pageTracker = _gat._getTracker(\"UA-721084-1\");
			pageTracker._setDomainName(\".tienda.com\");
			pageTracker._setAllowHash(false);
			pageTracker._trackPageview();
		} catch(err) {}
	</script>";

Open in new window


Thanks for your help!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
I guess that doxument.write is executed to late. Have you tried to raise the tags asynchronously?
http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html

Author

Commented:
The Async was the next step that I was going to try - but it means significant recoding of our analytics on the pages - I was hoping to avoid that.

Commented:
I've implemented both Xiti and GA markers asynchronously on www.schneider-electric.com. It works very fine.
Place this in your header :
      stat_gaSrc = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js' ;
      _gaq.push(['_setAccount', 'yourID']);
         _gaq.push(['_trackPageview']);
function setAsyncScript(ss)
{
      var ns = document.createElement('script');    
      var s = document.getElementsByTagName('script')[0];
      ns.type = 'text/javascript';
      ns.async = true;
      ns.src = ss ;
      s.parentNode.insertBefore(ns, s);
}

function raiseAsyncMarkerGA()
{
      setAsyncScript(stat_gaSrc);
}

Then simply place raiseAsyncMarkerGA() in your footer.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial