Dynamic Tracking Code Loading in HTTPS or HTTP

The following is a guest blog from Gustavo Cornejo of Multiplica, one of the members of our Consultant Network (YWACN). They are located in Barcelona and specialize in web measurement, testing, and intelligent analysis. You can find the original post in Spanish here.

Monitoring websites with secure pages requires the use of two different sets of Yahoo Web Analytics tracking code, one for secure pages and the other for non-secure pages. The drawback to this is that you are left with inconsistent tracking code across the site and care must be exercised to ensure that the correct tracking code is being used in the right place.

An alternative to this would be to use the secure tracking code on all pages but this would lead to unnecessary load time on the pages that do not need it.

Another solution is to integrate a discriminator according to the protocol used on the page to load only the code necessary for that page. Additionally, we must know when the JavaScript is loaded and execute the tracking code without causing execution errors.

The solution is taken in 4 steps:

1. TrackPage. Page tracking function.
2. Dynamic loading of JavaScript. Load the appropriate JS source from YWA.
3. Execute TrackPage. Once the JS is loaded, execute TrackPage.
4. NoScript. Element for non-JavaScript enabled tracking.

TrackPage

Code:

function TrackPage(docName, docGroup){
	var _yat;
	if(typeof(docName)=="undefined") docName="";
	if(typeof(docGroup)=="undefined") docGroup="";
	try{
	_yat = YWA.getTracker("1000621731362");
	_yat.setDocumentName(docName);
	_yat.setDocumentGroup(docGroup);
	//_yat.setDomains("*.metriplica.com");
	//_yat.setCookieDomain("www.metriplica.com");
	//_yat.setMemberId("");
	_yat.submit();
	}catch(err){
	 if(typeof(console)=="undefined")
	  console.log("Error tracking Yahoo: %o", err);
	};
 };

Explanation:
A function that takes two optional parameters: docName and docGroup. The first line declares de variable _yat, which we use to track with YWA. The following two lines are used to initialize variables, docName and docGroup, with empty strings, “”, if they aren’t provided. The following lines try to execute the YWA tracking code within a try-catch, if no errors occur it will send the information to Yahoo, and if not and the Firebug console exists it will show the error in it.

Dynamic loading of JavaScript

Code:

(function(d, t){
 var s, h;
 s = d.createElement(t);
 s.type = 'text/javascript'; s.async = 1;
 s.src = ('https:' == d.location.protocol ? 'https://s' : 'http://d') + '.yimg.com/mi/ywa.js';
 h = d.getElementsByTagName(t)[0];
 h.parentNode.insertBefore(s, h);
})(document, 'script');

Explanation:
The code is very similar to the asynchronous loading of GA, and the important part of the code is identifying the protocol and loading the appropriate URL. For the secure case:
‘https://s’ + ‘.yimg.com/mi/ywa.js’

And for the non-secure case:
‘http://d’ + ‘.yimg.com/mi/ywa.js’

Execute TrackPage

Code:

s.onreadystatechange = function () {
  if (js.readyState == 'complete') {
   TrackPage();
  }
 }
 s.onload = function () {
  TrackPage();
 };

Explanation:
Add the previous code to the dynamic loading code, just after defining the source (attribute SRC) to the SCRIPT tag. It’s necessary to use two different events for proper load completion detection. This is an interoperability issue between browsers. For IE the onreadystatechange event is used, and for the rest the onload event. In both events the function TrackPage is executed without parameters, but you can customize them.

NoScript

Code:

<noscript>
<div><img src="https://a.analytics.yahoo.com/p.pl?a=10001502141662&amp;js=no" width="1" height="1" alt="" /></div>
</noscript>

Explanation:
Use the secure image reference (https protocol). This avoids any kind of alert within the browser related to unsafe elements in the page.

The complete code

<script type="text/javascript">
 function TrackPage(docName, docGroup){
	var _yat;
	if(typeof(docName)=="undefined") docName="";
	if(typeof(docGroup)=="undefined") docGroup="";
	try{
	_yat = YWA.getTracker("1000621731362");
	_yat.setDocumentName(docName);
	_yat.setDocumentGroup(docGroup);
	//_yat.setDomains("*.metriplica.com");
	//_yat.setCookieDomain("www.metriplica.com");
	//_yat.setMemberId("");
	_yat.submit();
	}catch(err){
	 if(typeof(console)!="undefined")
	  console.log("Error tracking Yahoo: %o", err);
	};
 };
(function(d, t){
 var s, h;
 s = d.createElement(t);
 s.type = 'text/javascript'; s.async = 1;
 s.src = ('https:' == d.location.protocol ? 'https://s' : 'http://d') + '.yimg.com/mi/ywa.js';
 s.onreadystatechange = function () {
  if (js.readyState == 'complete') {
   TrackPage();
  }
 }
 s.onload = function () {
  TrackPage();
 };
 h = d.getElementsByTagName(t)[0];
 h.parentNode.insertBefore(s, h);
})(document, 'script');
</script>
<noscript>
<div><img src="https://a.analytics.yahoo.com/p.pl?a=10001502141662&amp;js=no" width="1" height="1" alt="" /></div>
</noscript>

Using the above code allows us to use the same code for all pages, and also provide a generic function to keep track of additional actions within the page.

Comments are closed.