Как правильно отправить событие в GA? - PullRequest
Новая
       12

Как правильно отправить событие в GA?

0 голосов
/ 19 сентября 2019

Мы используем гладкую карусель , и стрелки были включены.Когда стрелка нажата, мы хотим отправить событие в GA со следующим ниже.Однако, когда мы нажимаем на элемент стрелки, он не отправляет.Там нет сообщения об ошибке и ни одно из моих расширений, таких как GA Debugger for Chrome , похоже, не возвращает никаких результатов.

Вот то, что мы пытались, но не работали.В нашей локальной тестовой среде мы можем добавить файл google-analytics.js, но не можем загрузить его здесь.

Мы установили GA через GTM, используя эту статью 

$(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>

Это также в <head>

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

1 Ответ

1 голос
/ 19 сентября 2019

Проблема здесь в том, что вы не используете правильный метод для отправки события в GA.

Вы реализовали GA через GTM, но функция, которую вы используете при нажатии на стрелку, предназначена длявы реализовали GA с помощью analytics.js.

Существует много способов отслеживания события с помощью GTM, но, поскольку у вас уже есть javascript на странице, его проще всего решить на основе того, что у вас есть.far.

В этом решении будут использоваться события уровня данных в гтм.

Измените часть кода GA в вашем коде так: 

$(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:

В GTM настройте триггер.Зайдите в GTM, перейдите на экран «Trigger», добавьте новый триггер типа «Custom Event» и в поле «Event Name» вставьте это имя «mySlickArrowEvent» сверху.Вот так: enter image description here

Теперь перейдите на экран «Теги» и добавьте новый тег Google Analytics.На этот раз выберите тип «Событие», заполните все категории событий, действия и метки так, как вы хотите, чтобы они отображались в GA, и присоедините только что созданный триггер к этому новому тегу.Вот так:

enter image description here

Теперь либо просмотрите все, используя режим отладки , либо просто опубликуйте контейнер, и событие должно быть зарегистрированов га.

...