Используйте jQuery для прослушивания и передачи отслеживания событий Google Analytics для любого клика

jQuery прослушивание кликов для прохождения отслеживания событий Google Analytics

Я удивлен, что больше интеграций и систем не включают автоматически Отслеживание событий Google Analytics на своих платформах. Большую часть времени, работая над сайтами клиентов, я занимаюсь отслеживанием событий, чтобы предоставить клиенту необходимую информацию о том, какое поведение пользователей работает или не работает на сайте.

Совсем недавно я писал о том, как отслеживать почта по кликам, тел кликаети Представление формы Elementor. Я собираюсь продолжать делиться решениями, которые я пишу, в надежде, что это поможет вам лучше анализировать производительность вашего сайта или веб-приложения.

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

<a href="#" data-gaevent="Category,Action,Label">Click Here</a>

Обязательным условием для вашего сайта является включение в него jQuery… на котором работает этот скрипт. Как только ваша страница загружена, этот скрипт добавляет прослушиватель на вашу страницу для любого, кто щелкает элемент с помощью событие данные… затем он захватывает и анализирует категорию, действие и метку, которые вы указываете в поле.

<script>
  $(document).ready(function() {      
    $(document).on('click', '[data-gaevent]', function(e) {
      var $link = $(this);
      var csvEventData = $link.data('gaevent');
      var eventParams = csvEventData.split(',');
      if (!eventParams) { return; }
        eventCategory = eventParams[0]
        eventAction = eventParams[1]
        eventLabel = eventParams[2]
        gtag('event',eventAction,{'event_category': eventCategory,'event_label': eventLabel})
        //alert("The Google Analytics Event passed is Action: " + eventAction + ", Category: " + eventCategory + ", Label: " + eventLabel);
    });
  });
</script>

Примечание. Я включил предупреждение (закомментировано), чтобы вы могли проверить, что на самом деле было передано.

Если вы используете jQuery на WordPress, вам нужно немного изменить код, так как WordPress не поддерживает ярлык $:

<script>
  jQuery(document).ready(function() {      
    jQuery(document).on('click', '[data-gaevent]', function(e) {
      var $link = jQuery(this);
      var csvEventData = $link.data('gaevent');
      var eventParams = csvEventData.split(',');
      if (!eventParams) { return; }
        eventCategory = eventParams[0]
        eventAction = eventParams[1]
        eventLabel = eventParams[2]
        gtag('event',eventAction,{'event_category': eventCategory,'event_label': eventLabel})
        //alert("The Google Analytics Event passed is Action: " + eventAction + ", Category: " + eventCategory + ", Label: " + eventLabel);
    });
  });
</script>

Это не самый надежный сценарий, и вам может потребоваться дополнительная очистка, но он должен помочь вам начать работу!