Question

I’ve been creating a few websites with content being pulled with jQuery and CSS calling to the #div containers. Does anyone know a way to use Omniture Site Catalyst tracking code while creating these types of one page websites? Possible?

Previously I’ve been utilizing Omniture with more traditional html sites by inserting the below chunk of hardly legible code provided by the software. It which case it seems to track all the the .html pages.

       <!-- SiteCatalyst Code version: H.17.
Copyright 1997-2008 Omniture, Inc. More info available at
http://www.omniture.com -->
<script language="JavaScript" type="text/javascript" src="http://www.urlofsite.com/js/s_code.js"></script>
<script language="JavaScript" type="text/javascript"><!--
/************* DO NOT ALTER ANYTHING BELOW THIS LINE ! **************/
var s_code=s.t();if(s_code)document.write(s_code)//--></script>
<script language="JavaScript" type="text/javascript"><!--
if(navigator.appVersion.indexOf('MSIE')>=0)document.write(unescape('%3C')+'\!-'+'-')
//--></script><noscript><a href="http://www.omniture.com" title="Web Analytics"><img
src="http://code.urlofsite.com/b/ss/ranhrollup/1/H.17--NS/0"
height="1" width="1" border="0" alt="" /></a></noscript><!--/DO NOT REMOVE/-->

<!-- End SiteCatalyst code version: H.17. -->
</body>
</html>

Is there anyway to break that up, and create a few lines of Javascript with if statements that apply the tracking code to specific #div#?

Update:

I spoke with a specialist and he stated that you can add additional s.t() calls in the onClick events for anything you wish to track as an additional page view. As an example, you have the following click event handler set up for the “Books” link

$('a.manned-flight').click(function() {
  $('html, body').animate({
  scrollTop: 1250
}, 1000, function() {
  parallaxScroll(); // Callback is required for iOS
});
  return false;
});

You can add tracking code to this function to specify a different pageName and send off an additional Page View image request as follows:

$('a.manned-flight').click(function() {
  s.pageName = "www.urlofwebsite.com:Books";
  s.t();
  $('html, body').animate({
    scrollTop: 1250
  }, 1000, function() {
    parallaxScroll(); // Callback is required for iOS
  });
  return false;
});

But with how large the site is and how much content areas I’d have to define, this seems like an impractical approach and somewhat clunky, code wise. Is there anyway to do this with a Javascript array?

Answer 1

Many moons ago, I had to set up Omniture’s analytics tool for a Web CMS system, specifically our companies product and shopping cart components. The code was included on every page in our site template (ie. include file). Assuming your site is not completely static site, you could do the same, putting the code in your .js file, template, include file, master page, view (whatever method you might be using site-wide reuse). If I recall correctly, Omniture was adamant on having it’s code EXACTLY before the closing body tag. Once the code is in place, write up some javascript to assign values to particular variables to be used to set the appropriate values in the Omniture code. For example, if, by chance, your page is creating a nice SEO title, you could pull the value from the title to be used for the Omniture page name. That’s just an example.

On the other hand, if your site is a static site, your options are not as easy. You would be better off if you had control of how your div’s were being generated. What I mean by that is if you could return the data to you div’s in a conventional manner, you could generate the appropriate information for your Omniture variables by using javascript or your favorite javascript library (eg. jQuery). Even further, if you had complete control of how the HTML was generated, you could add a specific class to watch out for, as is the case with your example of a.manned-flight. However, I would be looking for something more generic for all types of clicks.

Like I said, if you have control of the data that gets rendered, things will be easier to pull the data from the rendered HTML. Otherwise, it will be harder to provide the meaningful info needed by Omniture. Hope this helps.

This is kind of what I’m thinking with my limited understanding of your problem. Assuming your data is in a standard format like sample below.

<div class="product-item">
    <input class='item-title' type='hidden' value='Book Title #1 Specific Page Name'/>
    <input class='other-stuff-for-analytics' type='hidden' value='More stuff here'/>
    <h3>Book Title #1</h3>
    <p>Description of Book Title #1 and some junk...</p>
</div>
<div class="product-item">
    <input class='item-title' type='hidden' value='Book Title #2 Specific Page Name'/>
    <input class='other-stuff-for-analytics' type='hidden' value='More stuff here'/>
    <h3>Book Title #2</h3>
    <p>Description of Book Title #2 and some junk...</p>
</div>
<div class="product-item">
    <input class='item-title' type='hidden' value='Book Title #3 Specific Page Name'/>
    <input class='other-stuff-for-analytics' type='hidden' value='More stuff here'/>
    <h3>Book Title #3</h3>
    <p>Description of Book Title #3 and some junk...</p>
</div>

<!-- The code below could be in your template/include file/master page/view/ .js file -->
<script>
    $('div.product-item').click(function () {
        var analyticsPageName = "";
        /* Possibly pull the value from hidden input  */
        analyticsPageName = $(this).children('input.item-title').val();

        /* OR Pull the information from the block of HTML that has the page title */
        analyticsPageName = $(this).children('h3').text();

        // ---OR---
        //whatever else you need to do to scrape your HTML
        //to get the information to plug into a variable

        s.pageName = analyticsPageName;
        s.t();
        $('html, body').animate({
            scrollTop: 1250
        }, 1000, function () {
            parallaxScroll(); // Callback is required for iOS
        });
        return false;
    });
</script>