i use jquery slideshow , have received request figure out way measure how far people show using google analytics- i.e. viewing slides, or stopping after #3, #4, etc.
i add onclick event tag track (you can see examples of in html below), in case, wouldn't work because navigation arrows don't change @ all, i'm not sure how tie specific slide person viewing click action.
i've looked on , internet , can't find ideas on how achieve this. thing can think of reprogram slider content changes, including navigation arrows can assign unique click event arrow tied slide showing when clicked. don't think slideshow slick way though , keep is. keep slides on 1 url whole site doesn't reload each click.
thanks in advance advice. a working example here, in case need it, here jquery code slideshow:
<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 = $('ul.thumbholder li.selected').index(); i--; $('ul.thumbholder li.selected').removeclass('selected'); thumbs.eq(i).addclass('selected'); if ( === -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 = $('ul.thumbholder li.selected').index(); = >= 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> and here 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 rolled out orange carpet celebrate grand opening of our new north american marketing office , culinary center. l’atelier le creuset (french “the le creuset workshop”) situated on banks of ashley river in charleston, sc.<br /><br />the front entrance 9,000 square feet of renovated office space flanked entirely edible landscaping. fresh herbs such mint, thyme , cilantro put 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 more meeting space. doubles museum few of our heritage pieces. lighting pattern on 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 outside 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>. backlit seagrass panel nod 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 bathrooms feature 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 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 <a href="/cookware/content_le-creuset-truckette_10151_-1_20002" onclick="_gaq.push(['_trackevent','office tour', 'click', 'truckette']);">le creuset truckette</a> has stay parked outside, our custom vintage-style cruiser brings bit of whimsy 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 both collaboration , optimal light exposure. center island acts runway our collection of pots autographed 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 – workshop – equipped demonstration kitchen highest-quality miele appliances. intended hub community activity, it’s hosted our first guest chef, second follow. our guest chef series invites innovative chefs prepare dishes , demonstrate techniques 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 media wall tears , inspirations recent photo shoots, magazines , 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 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 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 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 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 cook: technique series 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-->
one of things i've done track click through adding event click.
uses analytics.js
in "a" tag -> onclick="ga('send','event','category', 'action', 'label')"
event tracking
google's event tracking documentation (analytics.js)
user timings
https://developers.google.com/analytics/devguides/collection/gajs/gatrackingtiming
Comments
Post a Comment