Coding Tips: May 2008 Archives

Recently, Google updated the javascript code used to track your pages for analysis. The former version was either the secure version or the non-secure version. Now, it's both - which is nice.

There are two bits to the code and here they are:

<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">
  var pageTracker = _gat._getTracker("UA-XXXXXX-X");
  pageTracker._initData();
  pageTracker._trackPageview();
</script>

You must add your Google Analytics ID to the second block where indicated by the "UA-XXXXXX-X"

If you have an Advanced or better ProStores store, most likely at one time or another you will want to add a logoff link to your navigation. This simple SSML snippet will create just that - it makes a link to log on or log off, depending on the user status.

<ss:if test="$customer.isLoggedIn()">
	<ss:link source="$templateSet.logoff">Log Off</ss:link>
<ss:else/>
	<ss:link source="$templateSet.logon">Log On</ss:link>
</ss:if>

Problem: site stalls at some point while waiting on a script to load.

Reason: The script is referencing a different domain than your own, and if that domain is taking a while to load, your page cannot proceed until it's loaded. This is a problem.

Solution: If the location of the code itself is not important (i.e. code doesn't add any visible elements to the page), place it as far down on the page as possible. That simple change will allow most of the page to load immediately for use - even though the offending slow script isn't done yet.

Alternatively: If the code generates some sort of html and needs to be put in a specific place (i.e. live chat module or site seal) the following tip is very handy indeed. It relies on the "domready" function of MooTools (a supertastic Javascript library) that will only start the slow script after the whole page has loaded. We are using this on our contact us page for the live chat and skype scripts.

1. Download and install MooTools (it's awesome)

2. Replace your module code with something like:

<div id="whereTheCodeEndsUp"></div>

3. Place the "module" code near the bottom of the page inside of something like:

<div id="whereTheCodeStarts" style="display: none;">
	<!-- Module Code here -->
</div>

4. Place the following code directly following the call for mootools.js:

<script language="JavaScript" type="text/javascript">
	window.addEvent('domready', function() {
	$('whereTheCodeEndsUp').innerHTML = $('whereTheCodeStarts').innerHTML;
	$('whereTheCodeStarts').innerHTML = "";
});
</script>

There are many different ways to accomplish this type of thing, but this is pretty quick — especially if you already have MooTools installed.