Send GA Events using onClick event

Question

I am trying to send an event to Google Analytics when clicking on a specific button.

this is my button ID: (#data_243342)

This is my GA script to push on clicking on the above button.

onclick="dataLayer.push({"event": "eventGA","eventCategory" : "data1","eventAction" : "data-1-click","eventLabel" : "yes"})"

How can i pass this in a jqueryor javascript?

Danny Fardy Jhonston Bermúdez · Accepted Answer · 2015-10-13 22:30:42Z

4

There are many ways to do this:

With Javascript:

(function() {
  
    
  var button = document.getElementById("data_243342");
  button.addEventListener("click", function() {
    dataLayer.push({
      "event": "eventGA",
      "eventCategory": "data1",
      "eventAction": "data-1-click",
      "eventLabel": "yes"
    });
  });
  
   
})();

<button id="data_243342" type="button">Send</button>

With jQuery:

$(function() {
  
  
  $("#data_243342").on("click", function() {
    dataLayer.push({
      "event": "eventGA",
      "eventCategory": "data1",
      "eventAction": "data-1-click",
      "eventLabel": "yes"
    });
  });
  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="data_243342" type="button">Send</button>

Update:

To add more button with the same function, you could try something like this:

With Javascript: By using document.getElementsByTagName to find the buttons to bind with the function.

(function() {
  
  
  onload = function() {
    var buttons = document.getElementsByTagName("button");
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].addEventListener("click", function() {
        dataLayer.push({
          "event": "eventGA",
          "eventCategory": "data1",
          "eventAction": "data-1-click",
          "eventLabel": "yes"
        });
      });
    }
  };


})();

<button id="data_243342" type="button">Send 1</button>
<button id="data_243343" type="button">Send 2</button>
<button id="data_243344" type="button">Send 3</button>

With jQuery: By using the #id selectors of the buttons.

$(function() {

  // Set the buttons id in the jQuery function.
  $("#data_243342, #data_243343, #data_243344").on("click", function() {
    dataLayer.push({
      "event": "eventGA",
      "eventCategory": "data1",
      "eventAction": "data-1-click",
      "eventLabel": "yes"
    });
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="data_243342" type="button">Send 1</button>
<button id="data_243343" type="button">Send 2</button>
<button id="data_243344" type="button">Send 3</button>

Update:

Another way in jQuery is by using class selectors.

$(function() {

  // Every button with the btn-GA class can execute the function.
  $(".btn-GA").on("click", function() {
    dataLayer.push({
      "event": "eventGA",
      "eventCategory": "data1",
      "eventAction": "data-1-click",
      "eventLabel": "yes"
    });
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="data_243342" class="btn-GA" type="button">Send 1</button>
<button id="data_243343" class="btn-GA" type="button">Send 2</button>
<button id="data_243344" class="btn-GA" type="button">Send 3</button>

Hope this helps.

edited Oct 13, 2015 at 22:30

answered Oct 13, 2015 at 17:49

Danny Fardy Jhonston Bermúdez

5,5915 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

99problems Over a year ago

thank you, this is what i wanted. one more question, i would like to track another button. In this case i just add the script two times in the same <script> ..</script>? Because i am passing this script inside a GTM tag, so i do not want to start creating multiple tags in GTM. I would like to create a custom tag with all these event tracking scripts in it.

Danny Fardy Jhonston Bermúdez Over a year ago

@99problems I've updated my answer with a possible solution.

Danny Fardy Jhonston Bermúdez Over a year ago

And another way in jQuery is by using class selectors. I've updated my answer.

99problems Over a year ago

thank you, but this would not work because i would like to have my own event category and event action naming convention. I would want to be able to differentiate the click on the button, so each of them will have its own naming convention.

99problems Over a year ago

I think repeating the script would be the only option. do you know if i could do this in a single GTM tag?

|

Collectives™ on Stack Overflow

Send GA Events using onClick event

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related