我经常使用jQuery幻灯片，并收到一个请求，想方设法衡量人们使用Google Analytics进入展会的程度 - 即他们是在查看所有幻灯片，还是在＃3，＃4等之后停止
我通常会添加一个onClick事件标记来跟踪它（你可以在下面的HTML中看到这个例子），但在这种情况下，它不起作用，因为导航箭头根本不会改变，所以我我不确定如何将人们正在查看的特定幻灯片与他们的点击操作联系起来。
我看过SO和互联网，找不到任何有关如何实现这一目标的想法。我唯一能想到的是重新编程滑块，以便所有内容都发生变化，包括导航箭头，这样我就可以将单独的点击事件分配给单击它时显示的幻灯片上的箭头。我不认为幻灯片显示会像这样光滑，我想保持原样。我还想将所有幻灯片放在一个URL上，这样每次点击都不会重新加载整个网站。
提前感谢任何建议。 A working example is here，但如果您需要它，这里是幻灯片的jQuery代码：
<script type="text/javascript">
$(document).ready(function(){
var thumbs = $('ul.thumbHolder li');
var thumbs = $('ul.thumbHolder li');
var bigImgs = $('ul.imgHolder li');
var mask = $('.imgHolder');
var imgW = $('ul.imgHolder li').width();
var speed = 300;
thumbs.removeClass('selected').first().addClass('selected');
thumbs.click(function() {
var target = $(this).index();
mask.animate({'left':'-'+imgW*target+'px'},speed);
thumbs.removeClass('selected');
$(this).addClass('selected');
});
$('.Bleft').on('click',function() {
var i = $('ul.thumbHolder li.selected').index();
i--;
$('ul.thumbHolder li.selected').removeClass('selected');
thumbs.eq(i).addClass('selected');
if ( i === -1 ) { mask.animate({'left':'-'+imgW*$('ul.thumbHolder li').index()+'px'},speed); }
else{ mask.animate({'left':'-'+imgW*i+'px'},speed); }
clearInterval(counter);
});
$('.Bright').on('click',function() {
var i = $('ul.thumbHolder li.selected').index();
i = i >= thumbs.length-1 ? 0 : i+1;
$('ul.thumbHolder li.selected').removeClass('selected');
thumbs.eq(i).addClass('selected');
mask.animate({'left':'-'+imgW*i+'px'},speed);
clearInterval(counter);
});
var count = 0;
var counter = window.setInterval(timer, 5000);
function timer() {
count=count+0;
if (count >= 0) { count = 0; return; }
mask.animate({'left':'-'+ imgW*count +'px'},speed);
thumbs.removeClass('selected');
thumbs.eq(count).addClass('selected');
}
});
</script>
这是HTML：
<div id="slideshow-container">
<div class="control Bleft"></div>
<div class="control Bright"></div>
<div class="mask">
<ul class="imgHolder">
<li>
<div id="office-tour-slide01">
<p>In April we rolled out the orange carpet to celebrate the grand opening of our new North American Marketing Office and Culinary Center. L’Atelier Le Creuset (French for “The Le Creuset Workshop”) is situated on the banks of the Ashley River in Charleston, SC.<br /><br />The front entrance to the nearly 9,000 square feet of renovated office space is flanked by entirely edible landscaping. Fresh herbs such as mint, thyme and cilantro are put to good use in our Atelier kitchen.
</p>
<img width="900" height="425" src="/wcsstore/CVWEB/images/home/office-slide_01.jpg" alt="Front Entrance" />
</div><!--//END office-tour-slide01-->
</li>
<li>
<div id="office-tour-slide02">
<p>The glass walled boardroom is more than just a meeting space. It also doubles as a museum for a few of our heritage pieces. The lighting pattern on the ceiling subtly mimics our three-ring logo.</p>
<img width="900" height="425" src="/wcsstore/CVWEB/images/home/office-slide_02.jpg" alt="Le Creuset Board Room" />
</div><!--//END office-tour-slide02-->
</li>
<li>
<div id="office-tour-slide07">
<p>A white marble counter just outside the conference room showcases our newest sun-inspired color, <a href="/cookware/CatalogSearchResultCmd?storeId=10151&catalogId=20002&langId=-1&docType=1&searchTerm=Soleil&shopBy=color" onclick="_gaq.push(['_trackEvent','Office Tour', 'Click', 'Soleil']);">Soleil</a>. The backlit seagrass panel is a nod to our coastal location.</p>
<img width="900" height="425" src="/wcsstore/CVWEB/images/home/office-slide_07.jpg" alt="Soleil Showcase" />
</div><!--//END office-tour-slide07-->
</li>
<li>
<div id="office-tour-slide03">
<p>Even the bathrooms feature an unexpected twist— <a href="/cookware/product_Goose-Pot_10151_-1_20002_83103" onclick="_gaq.push(['_trackEvent','Office Tour', 'Click', 'GoosePot']);">Goose pots</a> – yes, goose pots! – double as sink basins.</p>
<img width="900" height="425" src="/wcsstore/CVWEB/images/home/office-slide_03.jpg" alt="Le Creuset Sinks" />
</div><!--//END office-tour-slide03-->
</li>
<li>
<div id="office-tour-slide04">
<p>While the <a href="/cookware/content_Le-Creuset-Truckette_10151_-1_20002" onclick="_gaq.push(['_trackEvent','Office Tour', 'Click', 'Truckette']);">Le Creuset Truckette</a> has to stay parked outside, our custom vintage-style cruiser brings a bit of whimsy to the lobby.</p>
<img width="900" height="425" src="/wcsstore/CVWEB/images/home/office-slide_04.jpg" alt="Le Creuset Beach Cruiser" />
</div><!--//END office-tour-slide04-->
</li>
<li>
<div id="office-tour-slide05">
<p>An open workspace allows for both collaboration and optimal light exposure. The center island acts as a runway for our collection of pots autographed by our favorite chefs.</p>
<img width="900" height="425" src="/wcsstore/CVWEB/images/home/office-slide_05.jpg" alt="Le Creuset Studio" />
</div><!--//END office-tour-slide05-->
</li>
<li>
<div id="office-tour-slide06">
<p>L’Atelier – the workshop – is a fully equipped demonstration kitchen with the highest-quality Miele appliances. Intended to be a hub for community activity, it’s already hosted our first Guest Chef, with a second soon to follow. Our Guest Chef Series invites innovative chefs to prepare dishes and demonstrate techniques to a ticketed audience.</p>
<img width="900" height="425" src="/wcsstore/CVWEB/images/home/office-slide_06.jpg" alt="L’Atelier" />
</div><!--//END office-tour-slide06-->
</li>
<li>
<div id="office-tour-slide08">
<p>Our communications team maintains a media wall with tears and inspirations from recent photo shoots, magazines and campaigns.</p>
<img width="900" height="425" src="/wcsstore/CVWEB/images/home/office-slide_08.jpg" alt="Communications Team Wall" />
</div><!--//END office-tour-slide08-->
</li>
<li>
<div id="office-tour-slide09">
<a href="/cookware/product_Herb-Planter_10151_-1_20002_89624" onclick="_gaq.push(['_trackEvent','Office Tour', 'Click', 'HerbPlanter']);">
<img width="162" height="279" src="/wcsstore/CVWEB/images/home/office-slide_08_01.jpg" alt="Plant Your Own Herbs: Herb Planter" />
</a>
<a href="/cookware/product_5-Shelf-Cookware-Display-Stand_10151_-1_20002_10056" onclick="_gaq.push(['_trackEvent','Office Tour', 'Click', '5ShelfCookwareDisplayStand']);">
<img width="174" height="279" src="/wcsstore/CVWEB/images/home/office-slide_08_02.jpg" alt="Display Your Cookware: 5 Shelf Cookware Display Stand" />
</a>
<a href="/cookware/product_5-1%2F2-qt.-Round-French-Oven_10151_-1_20002_10138" onclick="_gaq.push(['_trackEvent','Office Tour', 'Click', '512qtRoundFrenchOven']);">
<img width="167" height="279" src="/wcsstore/CVWEB/images/home/office-slide_08_03.jpg" alt="Stock Your Shelves: 5 1/2 qt. Round French Oven" />
</a>
<a href="/cookware/product_16-Piece-Dinnerware-Set_10151_-1_20002_10168_24076" onclick="_gaq.push(['_trackEvent','Office Tour', 'Click', '16PieceDinnerwareSet']);">
<img width="202" height="279" src="/wcsstore/CVWEB/images/home/office-slide_08_04.jpg" alt="Feed a Crowd: 16-Piece Dinnerware Set" />
</a>
<a href="/cookware/content_cooking-techniques-ruhlman_10151_-1_20002" onclick="_gaq.push(['_trackEvent','Office Tour', 'Click', 'Ruhlman']);">
<img width="195" height="279" src="/wcsstore/CVWEB/images/home/office-slide_08_05.jpg" alt="Learn to Cook: Technique Series from Michael Ruhlman" />
</a>
</div><!--//END office-tour-slide09-->
</li>
</ul>
</div>
<div style="clear: both;"></div>
<div id="office-tour-nav" style="display: none;">
<ul class="thumbHolder">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div><!--//END soleil-nav-->
</div><!--//END slideshow-container-->
答案 0 :(得分：0)
我为追踪点击而做的其中一件事就是添加了点击事件。
使用analytics.js
在你的＆＃34; a＆＃34;标签 - ＆gt; onclick="ga('send','event','CATEGORY', 'ACTION', 'LABEL')"
事件追踪
Google的Event Tracking Documentation（analytics.js）
用户时间
https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingTiming