jQuery .live() 附加 Omniture 点击跟踪处理程序？

发布于 2024-12-01 10:46:55 字数 525 浏览 3 评论 0原文

我们正在尝试消除我们网站上通常有数百个元素上的内联 onclick="" 处理程序。其中大部分是通过 onclick 属性附加的 Omniture 点击跟踪功能。

由于它们都是相同的代码，我想使用 jQuery 的 .live() 函数简单地将单个处理程序绑定到文档。然后我们更新我们想要跟踪的链接/按钮/元素，使其具有像 class="trackable" 这样的唯一标记。我们会让处理程序注册如下所示的内容（考虑这个伪代码）：

$('.trackable').live('click', function(e) { 
  trackClick();
};

显然我们需要一些参数，并且我们可能通过数据属性或其他方式从事件源对象中推断出这些参数。

我主要关心的是可靠性。根据我的阅读，live() 处理程序不会被中断 - 例如，事件应该在浏览器卸载页面之前冒泡并进行处理。不过我不确定。我还对浏览器兼容性有一些担忧。

有人有 live() 事件绑定和 Omniture （或 Google Analytics）的经验吗？

原文

We are trying to rid our site of what is often 100s of inline onclick="" handlers on elements. The majority of these are Omniture click tracking functions attached via the onclick attribute.

Since they are all the same code, I want to simply bind a single handler to the document, using jQuery's .live() function. Then we'd update the links/buttons/elements we want tracked to have a unique marker like class="trackable". We'd have the handler registered something like as follows (consider this pseudocode):

$('.trackable').live('click', function(e) { 
  trackClick();
};

Obviously we'd need some params in there, and we'd deduce those from the event source object, maybe via data-attributes or something.

My concern is mainly with reliability. From my reading, live() handlers don't get interrupted - the event should bubble up and be handled before the browser unloads the page, for instance. I'm not sure of that, though. I also have some concerns about browser compatibility.

Does anyone have any experience with live() event binding and Omniture (or Google Analytics)?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

染年凉城似染瑾 2024-12-08 10:46:55

这是我的解决方案。我觉得这很粗糙，但我认为它有效。

// attach omniture tracking to links within search results
jQuery('.app1 .app1-searchresults').on('click', '.app1-entry a', function(event) {
    var jLink = jQuery(event.target);

    s_gi(s_account).tl(true, 'o', 'App1: {instance}: {link}'.supplant({
        'instance': jQuery('.app1 .app1-header').text(),
        'link': jLink.text()
    }));

    setTimeout(function() { window.location = jLink.attr('href'); }, 500);

    event.preventDefault();
    return false;
});

重要的部分不是 jQuery 部分——大概，您有一些方法来识别您有兴趣跟踪的链接，并实现委托的事件处理程序——而是最后 3 条语句。

setTimeout

Adobe 的这篇文章Ben Gaines 指出（在“在链接以外的其他内容上使用链接跟踪”部分）s.tl() 在导航之前引入了 500 毫秒的延迟。这是为了确保异步跟踪调用在页面卸载之前有时间执行。我见过 Chrome“取消”与导航操作同时进行的 HTTP 调用； Fiddler 甚至从其请求列表中删除流量。我没有使用 WireShark 的经验，因此我决定谨慎行事并引入相同的延迟。

event.preventDefault()
return false

这会阻止浏览器在用户单击链接时正常反应并立即导航离开。

这里的粗略之处似乎是setTimeout。我对使用计时器而不是事件驱动的东西感到有点不舒服，因为事件驱动需要花费或多或少的时间来确保进行跟踪调用。然而，如果没有 Omniture 的官方支持，允许显式延续或自定义跟踪捕获事件，这可能是最安全的事情。

我希望这有帮助。

Here's my solution. I feel like it's pretty crude, but I think it works.

// attach omniture tracking to links within search results
jQuery('.app1 .app1-searchresults').on('click', '.app1-entry a', function(event) {
    var jLink = jQuery(event.target);

    s_gi(s_account).tl(true, 'o', 'App1: {instance}: {link}'.supplant({
        'instance': jQuery('.app1 .app1-header').text(),
        'link': jLink.text()
    }));

    setTimeout(function() { window.location = jLink.attr('href'); }, 500);

    event.preventDefault();
    return false;
});

The important piece isn't the jQuery pieces -- presumably, you have some method for identifying the links you're interested in tracking, and for implementing a delegated event handler -- but rather the last 3 statements.

setTimeout

This article by Adobe's Ben Gaines indicates (in the "using Link Tracking on something other than a link" section) that s.tl() introduces a 500ms delay before navigating. This is to ensure the asynchronous tracking call has time to execute before the page unloads. I've seen Chrome "cancel" HTTP calls that are ~simultaneous with navigation operations; Fiddler even erases the traffic from it's request list. I'm not experienced with WireShark, so I've decided to err on the cautious side and introduce the same delay.

event.preventDefault()
return false

This prevents the browser from reacting normally and navigating away immediately when the user clicks the link.

The crudity here seems to be the setTimeout. I'm a little uncomfortable about using a timer instead of something event-driven that takes as much or as little time to ensure the tracking call is made. However, without an officially supported from Omniture allowing for an explicit continuation or a custom tracking-captured event, this may be the safest thing.

I hope this helps.

回复收藏 0 原文