JQuery를 사용하여 Google 애널리틱스 이벤트에서 Elementor 양식 제출을 추적하는 방법

Google Analytics 이벤트에서 Elementor 양식 제출을 추적하는 방법

나는 지난 몇 주 동안 꽤 복잡한 클라이언트 WordPress 사이트에서 작업했습니다. 그들은 사용하고 있습니다 워드프레스(WordPress) 통합으로 ActiveCampaign 리드 및 Zapier 통합 Zendesk 판매 를 통해 엘리멘터 폼. 그것은 훌륭한 시스템입니다… 정보를 요청하는 사람들에게 드립 캠페인을 시작하고 요청이 있을 때 적절한 영업 담당자에게 리드를 푸시합니다. 저는 Elementor의 형태 유연성과 모양과 느낌에 깊은 인상을 받았습니다.

마지막 단계는 Google Analytics를 통해 고객에게 양식 제출에 대한 월별 실적을 제공하는 분석 대시보드를 제공하는 것이었습니다. Google 태그 관리자가 설치되어 있으므로 사이트에서 전자 상거래 및 YouTube 보기 활동을 이미 캡처하고 있습니다.

Elementor에 대한 성공적인 양식 제출을 캡처하기 위해 Google 태그 관리자 내에서 DOM, 트리거 및 이벤트를 활용하려고 여러 번 시도했지만 전혀 운이 없었습니다. AJAX를 통해 팝업되는 성공 메시지를 확인하면서 페이지를 모니터링하는 다양한 방법을 테스트했지만 작동하지 않았습니다. 그래서... 검색을 해보니 Tracking Chef에서 훌륭한 솔루션을 찾았습니다. GTM으로 Bulletproof Elementor 형태 추적.

스크립트 활용 jQuery를 푸시하는 Google 태그 관리자 구글 애널리틱스 이벤트 양식이 성공적으로 제출되었을 때. 약간의 수정과 한 가지 구문 개선으로 필요한 모든 것을 갖추게 되었습니다. 코드는 다음과 같습니다.

<script>
jQuery(document).ready(function($) {
    $(document).on('submit_success', function(evt) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
            'event': 'ga_event',
            'eventCategory': 'Form ',
            'eventAction': evt.target.name,
            'eventLabel': 'Submission'
        });
    });
});
</script>

꽤 독창적입니다. 성공적인 제출을 지켜본 다음 통과합니다. 형태 카테고리로, 목적지 이름 액션으로, 그리고 복종 레이블로. 대상을 프로그래밍 방식으로 만들면 모든 페이지의 바닥글에 이 코드를 포함하여 양식 제출을 관찰할 수 있습니다. 따라서… 양식을 추가하거나 수정할 때 스크립트를 업데이트하거나 다른 페이지에 추가하는 것에 대해 걱정할 필요가 없습니다.

Elementor 사용자 정의 코드를 통해 스크립트 설치

에이전시라면 모든 고객에게 무제한 업그레이드 및 Elementor 활용을 적극 권장합니다. 견고한 플랫폼이며 파트너 통합의 수가 계속해서 급증하고 있습니다. 다음과 같은 플러그인과 결합하십시오. 문의 양식 DB 또한 모든 제출 양식을 수집할 수도 있습니다.

Elementor 프로 훌륭한 스크립트 관리 옵션이 내장되어 있습니다. 코드를 입력하는 방법은 다음과 같습니다.

Elementor 사용자 정의 코드

  • 로 이동 Elementor > 사용자 정의 코드
  • 코드 이름 지정
  • 위치를 설정합니다. 이 경우 끝 바디 태그.
  • 삽입하려는 스크립트가 두 개 이상 있는 경우 우선 순위를 설정하고 순서를 설정합니다.

GTM을 통해 GA 이벤트에 Elementor 양식 제출

  • 업데이트 클릭
  • 조건을 설정하고 모든 페이지의 기본값으로 설정하라는 메시지가 표시됩니다.
  • 캐시를 새로 고치면 스크립트가 실행됩니다!

Google 태그 관리자 통합 미리보기

Google 태그 관리자에는 브라우저 인스턴스에 연결하고 실제로 코드를 테스트하여 변수가 제대로 전송되는지 여부를 관찰할 수 있는 환상적인 메커니즘이 있습니다. 이는 Google Analytics가 실시간이 아니기 때문에 필수적입니다. 테스트하고 테스트하고 테스트하고 실제로 깨닫지 못한 경우 데이터가 Google 애널리틱스에 표시되지 않는다는 사실에 좌절할 수 있습니다.

나는 여기서 어떻게 하는 지에 대한 튜토리얼을 제공하지 않을 것이다. Google 태그 관리자 미리보기 및 디버그... 당신이 알고 있다고 가정하겠습니다. 연결된 테스트 페이지에서 내 양식을 제출하고 필요한 대로 GTM 데이터에 푸시된 데이터를 볼 수 있습니다.

Google 태그 관리자 데이터 영역

이 경우 범주는 양식으로 하드 코딩되었으며 대상은 문의 양식이며 레이블은 제출입니다.

Google 태그 관리자에서 데이터 변수, 이벤트, 트리거 및 태그 설정

마지막 단계는 이러한 변수를 캡처하고 이벤트에 대해 설정된 Google 애널리틱스 태그로 보내도록 Google 태그 관리자를 설정하는 것입니다. Elad Levy는 다른 게시물에서 이러한 단계를 자세히 설명합니다. Google 태그 관리자의 일반 이벤트 추적.

설정이 완료되면 Google Analytics에서 이벤트를 볼 수 있습니다!

엘리멘터 프로 받기

공개 :이 기사 전체에서 제휴 링크를 사용하고 있습니다.

댓글 6

  1. 1
  2. 3

    요소 형식에서 다단계를 사용하고 있지만 사용자가 다음 버튼을 클릭할 때 이벤트를 추적하고 싶습니다.
    이 이벤트를 알 수 있습니까? 감사!

  3. 5

당신은 어떻게 생각하십니까?

이 사이트는 Akismet을 사용하여 스팸을 줄입니다. 댓글 데이터 처리 방법 알아보기.