在 jquery ui 选项卡上放置联属营销跟踪标签

Question

我在 jquery 驱动的 asp.net c# Web 应用程序的页面上使用 jquery ui 选项卡。这些选项卡很好地分隔了内容，为用户提供了跨多个页面移动的体验。

我有一家第三方附属公司，他们需要跟踪用户操作，因此希望在每个页面（“选项卡”）上放置像素标签。

如果我将标签直接添加到每个选项卡，那么它将无法正确跟踪，因为所有标签都会在页面加载时被触发。

我正在考虑当用户在选项卡中移动时使用 java 脚本动态加载图像。这是最好的方法吗？如果是，我该如何实现这一目标？任何其他建议。当用户浏览选项卡时，每个选项卡需要包含的内容示例如下：

Tab 1: <img src="https://xxxxx.com/xxxx.html?p=xxxx&d=1" width="0" height="0" />
Tab 2: <img src="https://xxxxx.com/xxxx.html?p=xxxx&d=2" width="0" height="0" />
Tab 3: <img src="https://xxxxx.com/xxxx.html?p=xxxx&d=3" width="0" height="0" />
Tab 4: <img src="https://xxxxx.com/xxxx.html?p=xxxx&d=4" width="0" height="0" />

我想放置一些结构，以便我可以轻松添加更多标签以无缝加载每个 ui 选项卡。

Answer 1

您可以将图像放在各自的选项卡中，但将其 src 属性保留为空。将图像链接放入 HTML5“数据”属性中。

然后，当选择选项卡时，加载图像：

HTML：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">First Tab</a></li>
        <li><a href="#tabs-2">Second Tab</a></li>
        <li><a href="#tabs-3">Third Tab</a></li>
    </ul>

    <div id="tabs-1">
        <img class="affiliate" src="" height="0" width="0" data-src="https://xxxxx.com/xxxx.html?p=xxxx&d=1" />
        <p>The tabs contents goes here.</p>
    </div>

    <div id="tabs-2">
        <img class="affiliate" src="" height="0" width="0" data-src="https://xxxxx.com/xxxx.html?p=xxxx&d=2" />
        <p>The tabs contents goes here.</p>
    </div>

    <div id="tabs-3">
        <img class="affiliate" src="" height="0" width="0" data-src="https://xxxxx.com/xxxx.html?p=xxxx&d=3" />
        <p>The tabs contents goes here.</p>
    </div>
</div>

然后，当您创建选项卡时，传入选择事件处理程序来加载这些图像。

Javascript：

$('#tabs').tabs({
    select: function(event, ui)
    {
        $(ui.panel).find('img.affiliate').each(function()
        {
            $(this).attr( 'src', $(this).data('src') );
        });
    }
});