add google ads and analytics to lightbox

using this lightbox jquery plugin:
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

$("a[rel^='prettyPhoto']").prettyPhoto({markup: '<div class="pp_pic_holder"> 
						<div class="ppt">&nbsp;</div> 
						<div class="pp_top"> 
							<div class="pp_left"></div> 
							<div class="pp_middle"></div> 
							<div class="pp_right"></div> 
						</div> 
						<div class="pp_content_container"> 
							<div class="pp_left"> 
							<div class="pp_right"> 
								<div class="pp_content"> 
									<div class="pp_loaderIcon"></div> 
									<div class="pp_fade"> 
										<a href="#" class="pp_expand" title="Expand the image">Expand</a> 
											<a class="pp_next" href="#">next</a> 
											<a class="pp_previous" href="#">previous</a> 
										<div id="pp_full_res"></div> 
										<div class="pp_details"> 
											<div class="pp_nav"> 
												<a href="#" class="pp_arrow_previous">Previous</a> 
												<p class="currentTextHolder">0/0</p> 
												<a href="#" class="pp_arrow_next">Next</a> 
											</div> 
											<p class="pp_description"></p> 
                      <div class="twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><div class="facebook"><iframe src="http://www.facebook.com/plugins/like.php?locale=en_US&href='+location.href+'&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true"></iframe></div> 
											<div class="pp_social"> 
<!-- BNL_Gallery_Bottom --> 
<div id="div-gpt-ad-1416042025558-3" style="width:728px; height:90px;"> 
<script type="text/javascript"> 
googletag.cmd.push(function() { googletag.display("div-gpt-ad-1416042025558-3"); }); 
</script> 
</div> 
</div> 
											<a class="pp_close" href="#">Close</a> 
										</div> 
									</div> 
								</div> 
							</div> 
							</div> 
						</div> 
						<div class="pp_bottom"> 
							<div class="pp_left"></div> 
							<div class="pp_middle"></div> 
							<div class="pp_right"></div> 
						</div> 
					</div> 
					<div class="pp_overlay"></div>',social_tools: '<div class="pp_social"></div><!-- BNL_Gallery_Bottom --><div id="div-gpt-ad-1416042025558-3" style="width:728px; height:90px;"><script type="text/javascript">googletag.cmd.push(function() { googletag.display("div-gpt-ad-1416042025558-3"); });</script></div>',changepicturecallback: function(){
            googletag.cmd.push(function() { googletag.display("div-gpt-ad-1416042025558-3"); });
            _gaq.push(['_trackPageview', location.href]);
          }});
    
    
});

you will need to use asynchronous google analytics code like:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

example: http://www.purepixel.co.uk/2011/10/tracking-javascript-lightbox-and-ajax-page-views-with-google-analytics/

 

Leave a Reply

Your email address will not be published. Required fields are marked *