AdWords is now Google Ads. Our new name reflects the full range of advertising options we offer across Search, Display, YouTube, and more. Learn more

Analytics
5K members online now
5K members online now
Dive into multiple domain (Cross/Sub) tracking, implementing Ecommerce and Enhanced Ecommerce, setting up Event tracking, and Universal Analytics code.
 
Guide Me
star_border
Reply

Click Event tracking for accordion

Explorer ✭ ✭ ☆
# 1
Explorer ✭ ✭ ☆

Hi,

 

I have this accordion inserted on the page and would like to record the clicks on each question area using analytics event tracking code. To achieve this I'm using onClick=ga('send', 'event', etc...) command.

654654.JPG

My question would be where the code should be placed.

 

To solve this, here are some context about the accordion. The accordion is composed by html, css and javascript(jQuery). By placing the code in the html part, I found out the event tracking code won't record anything. My guess is the command is being written by the java code which controls how the accordion performs.

 

Here is the HTML part:

 

 

<p class="accordion">Question 1</p>
<div class="panel">Answer</div>
<p class="accordion">Question 2</p>
<div class="panel">Answer</div>

 

Below is the java part:

 

document.addEventListener("DOMContentLoaded", function(event) {

var acc = document.getElementsByClassName("accordion");

var panel = document.getElementsByClassName('panel');

for (var i = 0; i < acc.length; i++) {

acc[i].onclick = function() {

var setClasses = !this.classList.contains('active');

setClass(acc, 'active', 'remove');

setClass(panel, 'show', 'remove');

if (setClasses) {

this.classList.toggle("active");

this.nextElementSibling.classList.toggle("show");

}

}

}

function setClass(els, className, fnName) {

for (var i = 0; i < els.length; i++) {

els[i].classList[fnName](className);

}

}

});

 

Does anyone might know where to place the tracking code? Or if you can achieve this with a similar way?

 

Thanks a lot!

 

Jason

1 ACCEPTED SOLUTION

Accepted Solutions
Marked as Best Answer.
Solution
Accepted by topic author Jason Zhang
May 2017

Click Event tracking for accordion

Participant ✭ ✭ ☆
# 6
Participant ✭ ✭ ☆

Hi @Jason Zhang,

 

I checked the page. It does not break the function, you had a very small syntax error on the event statement.

About question number; I added it. basically I created an html attribute that keeps the order of the each accordion element and I used it as the question number Smiley Happy

 

Just replace the following code and it should work fine. (I already tried it, you might see some events already)

 

document.addEventListener("DOMContentLoaded", function() {
  var acc = document.getElementsByClassName("accordion");
  var panel = document.getElementsByClassName('panel');

  for (var i = 0; i < acc.length; i++) {
    acc[i].setAttribute("questionNo", ""+(i+1));

    acc[i].onclick = function() {
      var setClasses = !this.classList.contains('active');
      setClass(acc, 'active', 'remove');
      setClass(panel, 'show', 'remove');

      if(setClasses) {
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
      }

      var questionNo = "Q" + this.getAttribute("questionNo").toString();
      if(this.classList.toString().indexOf('active') !== -1){
        ga('send', 'event', 'FAQ', 'Open', questionNo);
      }else{

        ga('send', 'event', 'FAQ', 'Close', questionNo);
      }
    }
  }

 

  function setClass(els, className, fnName) {
    for(var i = 0; i < els.length; i++) {
      els[i].classList[fnName](className);
    }
  }
});

 

I hope this solves your issue!

Regards,

Güney

View solution in original post

Click Event tracking for accordion

A T
Participant ✭ ✭ ✭
# 2
A T
Participant ✭ ✭ ✭

<p class="accordion" onClick="ga('send', 'event', etc...)">Question 1</p>

 

This didn't work?

Re: Click Event tracking for accordion

Participant ✭ ✭ ☆
# 3
Participant ✭ ✭ ☆

 Hi Jason,

 

Please try the following approach. I marked the event code that you need as bold(please don't forget to set your event values).

 

document.addEventListener("DOMContentLoaded", function(event) {
  var acc = document.getElementsByClassName("accordion");
  var panel = document.getElementsByClassName('panel');
  for (var i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
      var setClasses = !this.classList.contains('active');
      setClass(acc, 'active', 'remove');
      setClass(panel, 'show', 'remove');
      if (setClasses) {
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
      }

 

      if(this.classList.toString().indexOf('active') !== -1){

        ga('send', 'event', etc...) //send event when an accordion item opens

      }else{

        ga('send', 'event', etc...) //send event when an accordion item closes

      }
    }
}
function setClass(els, className, fnName) {
for (var i = 0; i < els.length; i++) {
els[i].classList[fnName](className);
}
}
});

 

I hope my answer solves your issue.

Regards,

Güney

Click Event tracking for accordion

Explorer ✭ ✭ ☆
# 4
Explorer ✭ ✭ ☆

Hi @A T,

 

Nope. I did try this and nothing happen. But the code does work when i put it after the <div class="panel"> but that's for answer area.

 

Thanks,

Jason

Click Event tracking for accordion

Explorer ✭ ✭ ☆
# 5
Explorer ✭ ✭ ☆

Hi @Gny

 

Thanks for contributing the code!

 

Unfortunately, it seems to break the open function of the accordion. I have this same problem when I add code into the JQuery. Below is the live page with your code:

 

http://teachingcareers.englishfirst.com/demo2

 

Also another challenge is, even if this work, is it possible to see the click events from different questions of the accordion? I guess in this case we'll need more than 2 ga event values. (Qq, Q2, Q3, etc)

 

Thanks,

Jason

Marked as Best Answer.
Solution
Accepted by topic author Jason Zhang
May 2017

Click Event tracking for accordion

Participant ✭ ✭ ☆
# 6
Participant ✭ ✭ ☆

Hi @Jason Zhang,

 

I checked the page. It does not break the function, you had a very small syntax error on the event statement.

About question number; I added it. basically I created an html attribute that keeps the order of the each accordion element and I used it as the question number Smiley Happy

 

Just replace the following code and it should work fine. (I already tried it, you might see some events already)

 

document.addEventListener("DOMContentLoaded", function() {
  var acc = document.getElementsByClassName("accordion");
  var panel = document.getElementsByClassName('panel');

  for (var i = 0; i < acc.length; i++) {
    acc[i].setAttribute("questionNo", ""+(i+1));

    acc[i].onclick = function() {
      var setClasses = !this.classList.contains('active');
      setClass(acc, 'active', 'remove');
      setClass(panel, 'show', 'remove');

      if(setClasses) {
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
      }

      var questionNo = "Q" + this.getAttribute("questionNo").toString();
      if(this.classList.toString().indexOf('active') !== -1){
        ga('send', 'event', 'FAQ', 'Open', questionNo);
      }else{

        ga('send', 'event', 'FAQ', 'Close', questionNo);
      }
    }
  }

 

  function setClass(els, className, fnName) {
    for(var i = 0; i < els.length; i++) {
      els[i].classList[fnName](className);
    }
  }
});

 

I hope this solves your issue!

Regards,

Güney

Click Event tracking for accordion

Explorer ✭ ✭ ☆
# 7
Explorer ✭ ✭ ☆

Hi @Gny

 

Geez it does work now! And I found the syntax error as well.

 

Thanks so much for this. I'll have a good reading to see how do you realize the function.

 

Have a nice day.

 

Jason