jQuery를 사용하여 모든 클릭에 대한 Google Analytics 이벤트 추적을 수신 및 전달

jQuery는 클릭을 수신하여 Google 애널리틱스 이벤트 추적을 전달합니다.

더 많은 통합 및 시스템이 자동으로 구글 애널리틱스 이벤트 추적 그들의 플랫폼에서. 클라이언트 사이트에서 작업하는 대부분의 시간은 사이트에서 작동하거나 작동하지 않는 사용자 행동에 대해 필요한 정보를 클라이언트에 제공하기 위해 이벤트 추적을 개발하는 것입니다.

가장 최근에 나는 추적하는 방법에 대해 썼습니다. 메일투 클릭, 전화 클릭의 메이크업 시연, 그리고 한국에서 사랑을 담아 보낸 Elementor 양식 제출. 귀하의 사이트 또는 웹 응용 프로그램 성능을 더 잘 분석하는 데 도움이 되기를 바라며 제가 쓰고 있는 솔루션을 계속 공유할 것입니다.

이 예에서는 Google 애널리틱스 이벤트 카테고리, Google 애널리틱스 이벤트 작업 및 Google 애널리틱스 이벤트 레이블을 포함하는 데이터 요소를 추가하여 Google 애널리틱스 이벤트 추적을 앵커 태그에 통합하는 매우 간단한 방법을 제공합니다. 다음은 데이터 요소를 통합하는 링크의 예입니다. 이벤트:

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

알림: 실제로 통과된 항목을 테스트할 수 있도록 경고(주석 처리)를 포함했습니다.

WordPress에서 jQuery를 실행하는 경우 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>

가장 강력한 스크립트는 아니며 추가 정리를 수행해야 할 수도 있지만 시작하는 데 도움이 됩니다!