Before you can gather insights into what your visitors are doing, you’ll need to install YWA on your site as well as verify that it is functioning correctly.  In this post we will explain how to install the basic YWA tracking code and then how to check if it is actually sending data from the end user’s browser.  We will also illustrate the difference between the pixel only tracking code vs JavaScript tracking code and how YWA uses both to ensure accurate tracking of the users of your site.

Basic Tracking Code Installation

The basic tracking code for your project can be generated by YWA with with 4 easy steps:

1. Click on the “Installation” section of the YWA interface
2. Choose the correct project URL from the dropdown menu
3. Select tracking code for non-secure (http) or secure (https) pages
4. Click the next button

YWA will then generate customized HTML tracking code for your project.  You’ll then want to highlight (ctrl/cmd – a) and then copy (ctrl/cmd – c) this code:

Next you will need to paste (ctrl/cmd – v) the copied code into each page of your site that you want YWA to track.  This code should be placed just before the closing body statement:

You will then need to save/upload the pages to your live site.   YWA has now been deployed to your site and will begin collecting data in near real-time within 30 minutes of the first execution of the tracking code.  So at this point YWA will not have collected any data and so the reporting interface should look like this:

Pixel Tracking

YWA can use multiple techniques for measuring visits to your site.  The simplest of these techniques is Pixel Tracking, which utilizes a call to the YWA servers requesting a 1×1 pixel tracking image.  This call is made through a standard HTML image tag embedded in the web page you wish to track:

<img src="http://a.analytics.yahoo.com/p.pl?a=1000508780245&amp;js=no" width="1" height="1">

The url for the requested pixel contains a query string parameter containing the project ID (in this example: a=1000508780245) which is how YWA knows which project this tracking request belongs to.

JavaScript Tracking

While functional, pixel tracking provides limited support for advanced YWA tracking functions.  A better version of the tracking code utilizes a JavaScript file called ‘ywa.js’ that is hosted on a Yahoo! server.  This JavaScript code provides more advanced activity tracking such as exit link tracking and file download tracking.  This in turn generates fuller analytics data which can be used to determine what visitors are doing on your site.

Here is the minimalist code fragment that can be utilized to enable JavaScript tracking on a page:

<script type="text/javascript" src="http://d.yimg.com/mi/ywa.js"></script>
<script type="text/javascript">
var YWATracker = YWA.getTracker("1000508780245");
YWATracker.submit();
</script>

The first line downloads the JavaScript file which contains all of the YWA tracking functions:

<script type="text/javascript"  src="http://d.yimg.com/mi/ywa.js"</script>

Next a tracking object is created in the end user’s browser which is associated with your project ID:

var YWATracker = YWA.getTracker("1000508780245");

Finally a submit function is called which sends the analytics tracking information for a pageview to the YWA servers:

YWATracker.submit();

Combined JavaScript and Pixel Tracking Code

JavaScript tracking is the prefered method of running YWA, however not all end users have browsers that support it (as well the users that disable JavaScript).  To adapt for this we designed our default tracking code use JavaScript tracking but to fall back to pixel tracking if JavaScript is unsupported.

JavaScript enabled browsers use the section of code denoted by the <script type=”text/javascript”> tags and non-JavaScript enabled browsers run the code in the <noscript> tags.

The minimal version of the combined tracking code looks like this:

<script type="text/javascript" src="http://d.yimg.com/mi/ywa.js"></script>
<script type="text/javascript">
  var YWATracker = YWA.getTracker("1000508780245");
  YWATracker.submit();
</script>

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

Is The Tracking Code Working?

Once your tracking code is installed you will want to confirm that it is working correctly.  This can be accomplished by browsing to the web page(s) that you have added tracking code which will then create a visit event tracked by YWA.  You can then confirm this visit by checking the YWA UI to see if it successfully logged.

First you will want to browse to a page on your site that has the tracking code installed (while there you can view the page’s source code to confirm that the tracking code there). Then load up the YWA reporting interface for your project and browse to the Last Visitor Details report, there you should be able to find your visit. This will confirm that your tracking code is installed correctly and YWA is recording visits.

One thing to note here is that this method will not work if you have configured the YWA IP filtering setting to block your public IP address or if you have excluded your browser from being tracked by YWA.   Also remember that YWA takes up to 30 minutes to start collecting data after it has first been deployed.

Viewing Tracking Calls To YWA

Firefox has a couple of 3rd party add-ons that can be used to troubleshoot your YWA installation.

The first add-on we will demonstrate is HttpFox, this handy tool can be used to monitor all of the HTTP traffic between your Firefox web-browser and the web servers you browse to with it.  Once you have installed HttpFox you activate it by clicking on the icon in the lower right corner of your browser and then clicking on the start button in the toolbar.

After HttpFox has been loaded and started then all of your subsequent http requests in that browser will be shown in the HttpFox logger. For our purpose we are looking for requests to “analytics.yahoo.com” and when we find one we can use the Query String tab to view the request the browser sent to the YWA server.  Each parameter listed here is a piece of data that is processed by YWA and stored in that project’s database.  The first parameter you see is ‘a’ which stores the projectID and it is vital that this ‘a’ parameter is sent with the correct projectID.  Failure to use the correct projectID will result in no data collection for that project.  The correct projectID can be cross checked by looking in the installation section of the YWA interface for that particular project.

And if JavaScript happens to be disabled in the browser, then you should see the pixel tracking call to “analytics.yahoo.com” that we setup in the <noscript> tag:

If you are unable to see any calls to “analytics.yahoo.com” then you may want to double check the tracking code installation for the site.

JavaScript Debugging

Another great Firefox Add-on you can use to test your YWA installation is Firebug.  Firebug includes a JavaScript debugger that can used to ensure that there are no JavaScript errors on the web page.  It is very important that there are no JavaScript errors as they can prevent the browser from sending tracking calls to YWA.

Conclusion

If you have confirmed that the tracking calls are being made to the YWA servers without error (and you can see the tracked data in your last visitor details report) then you know your YWA tracking code is functioning correctly on your site.  You’re now ready to customize your tracking code in order to fully capture all the interactions happening on your site!