What is the correct way to send an event to GA?

Question

We are using the slick carousel and the arrows have been enabled. When the arrow is clicked we want to send an event to GA with the following below. However, when we click the arrow element, it does not send. There is no error message and none of the extensions I have such as GA Debugger for Chrome seem to return any results.

Here is what we tried but did not work. In our local test environment, we are able to add the google-analytics.js file, but can't load it here.

We have installed GA through GTM using this article

 $(document).ready(function () { var carsl = $('.carousel'); carsl.slick(); carsl.on('click', '.slick-arrow', function() { // Create GA event; // this does not work. ga('send', { hitType: 'event', eventCategory: 'Slick', eventAction: 'arrow', eventLabel: 'clicked' }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <div class="carousel"> <div class="carousel__item">item 1</div> <div class="carousel__item">item 2</div> <div class="carousel__item">item 3</div> <div class="carousel__item">item 4</div> </div>

This is also in the <head>

 <script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script>

Answer 1

The problem here is that you are not using the correct method to send the event to GA.

You have implemented GA through GTM, but the function you are using when the arrow is clicked on is for if you implemented GA through analytics.js.

There are many ways to how you can track an event with GTM, but since you already have on page javascript, then it is simplest to solution it based on what you have so far.

This solution will utilize datalayer events in gtm.

Change the GA part of your code to be like so:

$(document).ready(function () {

  var carsl = $('.carousel');
  carsl.slick();

  carsl.on('click', '.slick-arrow', function() {

    // push event to datalayer, the event name is whatever you like
    // this does should work
     dataLayer.push({'event': 'mySlickArrowEvent'});

  });

});

GTM Setup:

In GTM, set up a trigger. Go into GTM, go to the "Trigger" screen, add a new trigger of "Custom Event" type and in the "Event Name" field, put in that name "mySlickArrowEvent" from above. Like so:

Now go to the "Tags" screen and add a new Google Analytics Tag. This time pick "Event" type, fill in all the event category, action and label as you wish for it to appear in GA and attach the trigger we just created to this new tag. Like so:

Now, either preview everything using the debug mode or just publish the container and the event should be registered in GA.