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の「data」属性に入れます。タブが選択された後

、画像をロードします。

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> 

その後、あなたは、タブを作成するときに、それらの画像をロードするためにselectイベントハンドラに渡します。

Javascriptを：

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