Add Google Analytics event tracking to modal window popup

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.


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

<form id='atcform' name='atcform' style='margin: 0px;' method='post' action=''>
	<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'>
	<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'>

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() {
					if($("#checkout_action").val()=="checkout") {
			$('.ui-widget-overlay').live("click", function() {
				//Close the Dialog
			$.get("/includes/ajaxfunctions.php?action=updatecartitems",{},function(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 + \"' type='text/javascript'%3E%3C/script%3E\"));
	<script type=\"text/javascript\">
		try {
			var pageTracker = _gat._getTracker(\"UA-721084-1\");
		} catch(err) {}

Open in new window

Thanks for your help!
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

I guess that doxument.write is executed to late. Have you tried to raise the tags asynchronously?

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
iskillsAuthor 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.
I've implemented both Xiti and GA markers asynchronously on It works very fine.
Place this in your header :
      stat_gaSrc = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '' ;
      _gaq.push(['_setAccount', 'yourID']);
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()

Then simply place raiseAsyncMarkerGA() in your footer.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.