We just did a new website redesign with a combination of accordions and carousels. These two design components are flashy but I’m not always certain if they’re necessary (or if anyone actually cares) so I wanted to be able to track the clicks on both the carousel & the accordions.
It took some searching and I was able to figure out how to use jQuery and Google Analytics event tracking to do this thanks to a blog from Outlier.com.
Tracking Accordion Clicks as Google Analytics Events
So my accordion is designed with h4 as the accordionheader, as follows:
<div class="accordionheader">
<h4><a id="name" href="#name">Header Test</h4>
</div>
In order to track the click, I used:
<script>
$('h4').click(function() {
var linkText = $(this).text();
ga('send', 'event', 'accordion', 'click', linkText);
});
</script>
What this does it triggers Google Analytics to send an event when the h4 is clicked. The event is labeled as category = accordion, action = click and linkText refers to the text of the h4. If you wanted to make sure you tracked only opens, you could get fancy and mess around with accordion jQuery but I like to keep things simple.
Tracking Carousel Clicks as Google Analytics Events
So this seemed like it should have been easier because essentially, you’re just tracking clicks, but because a link could exist in the carousel and the page, I wanted to make sure I knew where that click was attributed to. I also wanted to track every time the carousel slide in order to accurately calculate ratios of impressions vs. clicks.
I used cbp-fwslider for my carousel. First my slide is encompassed within a unordered list with each slide as a list item, so each slide looks like this:
<li id="slide1">
<a href="link.html" target="_blank"><img alt="img01" src="images/6.png"></a>
<div class="carousel-caption-right wordwrap">
<h3>Heading</h3>
<small>Dummy text.</small>
<p><a class="web-seemore" href="link.html" target="_blank">Link Text</a></p>
</div>
<p id="captionone"><a href="Link" target="_blank">Link Text</a></p>
</li>
So then in order to track, I used the below code:
<script>
$('#cbp-fwslider').on('click', function() {
ga('send', 'event', 'slider', 'slide', {'nonInteraction': 1});
});
$('#slide1').on('click', function() {
var slideID = document.getElementById('slide1');
var slideLink = slideID.getElementsByTagName('a')[0];
var slideURL = slideLink.href;
ga('send', 'event', 'slider', 'slide1', slideURL);
});
$('#slide2').on('click', function() {
var slideID = document.getElementById('slide2');
var slideLink = slideID.getElementsByTagName('a')[0];
var slideURL = slideLink.href;
ga('send', 'event', 'slider', 'slide2', slideURL);
});
$('#slide3').on('click', function() {
var slideID = document.getElementById('slide3');
var slideLink = slideID.getElementsByTagName('a')[0];
var slideURL = slideLink.href;
ga('send', 'event', 'slider', 'slide3', slideURL);
});
</script>
What’s important to note is that the slide simulates a click on #cbp-fwslider so an event is sent on the simulated slide click. the note on NonInteraction set to 1 is to denote that this event should not affect bounce rate.
Following that, each slide’s ID is handled by their list-item ID and upon click of that list item three variables are set:
- var SlideID = looks for slide1 on the page
- var slideLink = looks for anchor (a) in the above mentioned slide1
- var slideURL = identifies the URL within the above-mentioned anchor in slide1
Once these are defined, Google Analytics sends an event category = slider, action = click, label = the URL of the link as defined by the SlideURL variable.
This should be repeated based on how many carousel images you have. Just make sure you update the areas in yellow.