Javascript Omniture 跟踪和 jQuery

Omniture tracking and jQuery

提问by doc holiday

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?

我一直在创建一些网站，内容是通过 jQuery 和 CSS 调用 #div 容器来拉取的。有谁知道在创建这些类型的单页网站时使用 Omniture Site Catalyst 跟踪代码的方法吗？可能的？

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.

以前，我一直在使用 Omniture 和更传统的 html 站点，方法是插入以下由软件提供的难以辨认的代码块。在这种情况下，它似乎跟踪所有 .html 页面。

       <!-- 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#?

有没有办法打破它，并用 if 语句创建几行 Javascript 将跟踪代码应用于特定的#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

我与一位专家进行了交谈，他说您可以在 onClick 事件中添加额外的 st() 调用，以针对您希望作为额外页面查看进行跟踪的任何内容。例如，您为“图书”链接设置了以下点击事件处理程序

$('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:

您可以向此函数添加跟踪代码以指定不同的 pageName 并发送额外的页面视图图像请求，如下所示：

$('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?

但是考虑到站点有多大以及我必须定义多少内容区域，这似乎是一种不切实际的方法，而且有点笨拙，代码明智。有没有办法用 Javascript 数组来做到这一点？

回答by Alban

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.

许多个月前，我不得不为 Web CMS 系统设置 Omniture 的分析工具，特别是我们公司的产品和购物车组件。该代码包含在我们网站模板（即包含文件）的每个页面中。假设您的站点不是完全静态的站点，您也可以这样做，将代码放入您的 .js 文件、模板、包含文件、母版页、视图（您可能使用站点范围重用的任何方法）。如果我没记错的话，Omniture 坚持将其代码完全放在结束正文标签之前。一旦代码就位，编写一些 javascript 来为特定变量分配值，用于在 Omniture 代码中设置适当的值。例如，如果您的页面偶然创建了一个不错的 SEO 标题，您可以从标题中提取值以用于 Omniture 页面名称。那'

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.

另一方面，如果您的站点是静态站点，那么您的选择就不那么容易了。如果你能控制你的 div 是如何生成的，你会更好。我的意思是，如果您能以传统方式将数据返回给您的 div，您就可以通过使用 javascript 或您最喜欢的 javascript 库（例如 jQuery）为您的 Omniture 变量生成适当的信息。更进一步，如果您完全控制了 HTML 的生成方式，您可以添加一个特定的类来注意，就像您的 a.manned-flight 示例一样。但是，我会为所有类型的点击寻找更通用的东西。

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.

就像我说的，如果您可以控制渲染的数据，那么从渲染的 HTML 中提取数据会更容易。否则，将很难提供 Omniture 所需的有意义的信息。希望这可以帮助。

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>

回答by Claudio Sermenghi

I think that Jquery has a plugin library called jquery.addresswhich implement a sort of automatic tracking of JQuery based action. This library if natively configured for Google Analytics, but in the past I added also Omniture SiteCatalyst code.

我认为 Jquery 有一个名为的插件库jquery.address，它实现了一种基于 JQuery 的动作的自动跟踪。这个库如果为Google Analytics本地配置，但在过去我还添加了 Omniture SiteCatalyst 代码。

You can try that.

你可以试试。