jquery UI 탭에 제휴 추적 태그 배치

Question

내 jquery 기반 asp.net C# 웹 응용 프로그램의 페이지에서 jquery UI를 사용하고 있습니다. 탭을 통해 콘텐츠가 잘 분리되어 사용자가 여러 페이지로 이동한다는 경험을 얻을 수 있습니다.

본인은 사용자 행동을 추적해야하는 타사 제휴 회사가 있으므로 각 페이지 ("탭")에 픽셀 태그를 배치하려고합니다.

태그를 각 탭에 직접 추가하면 페이지로드시 모든 태그가 실행되므로 올바르게 추적 할 수 없습니다.

사용자가 탭을 이동하면서 자바 스크립트를 사용하여 이미지를로드하는 것을 생각하고있었습니다. 이것이 최선의 접근 방법인가요? 그렇다면 어떻게해야합니까? 다른 제안. 사용자가 그들을 통해 이동할 때 탭 당 포함 할 필요가 무엇의 샘플은 다음과 같습니다

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> 

그런 다음, 그 이미지를로드하기 위해 선택 이벤트 핸들러에 전달합니다.

자바 스크립트 :

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