양식 제출을 클릭하면 Google Analytics에서 이벤트 추적

양식 제출을 클릭하면 Google Analytics에서 이벤트 추적

---

누군가 양식을 작성하고 제출을 클릭 할 때 Google Analytics에서 이벤트를 추적해야합니다. 표시되는 결과 페이지는 표준 대시 보드 유형 페이지이므로 해당 페이지의 이벤트를 추적하려면 URL에서 이벤트를 전달한 다음 URL을 읽고 Google 애널리틱스 이벤트 추적 자바 스크립트 코드를 출력해야합니다. 그것을 기반으로. 이것은 자주 북마크되는 페이지이고 새로 고침되거나 다시 클릭되는 페이지입니다. 따라서 URL에 추적 이벤트를 전달하지 않고 분석을 망칠 수도 있습니다.

대신 페이지에서 양식을 사용하여 다음 jQuery 코드와 같은 작업을 수행합니다.

$('#form_id').submit(function() {
  _gaq.push('_trackEvent', 'my category', 'my action');
});

위의 문제는 추적되는 일부 이벤트를 놓칠 것이라는 것입니다. javascript를 호출 한 직후 브라우저가 양식을 제출하고 다른 웹 페이지로 이동하기 때문입니다. utm.gif 추적 이미지가 제 시간에로드되지 않으면 이벤트를 놓치게됩니다.

내 두려움이 정당한가요? 추적중인 이벤트를 놓치지 않으려면 어떻게해야합니까?

---

모든 양식 제출 (JS를 활성화하고 GA를 차단하지 않는 사용자 중)이 다음과 같은지 100 % 보장하는 방법은 두 가지뿐입니다.

• AJAX 제출을 수행 한 다음 페이지 변경에 대해 걱정할 필요가 없으므로 GA가 처리하고 새 페이지가 이전 페이지 대신로드되도록 전 세계에서 항상 시간을 할애 할 수 있습니다.
• 양식이 새 창에서 작업을 열도록 강제 할 수 있으므로 기본 페이지의 모든 백그라운드 프로세스가 작동하고 걱정되는 경쟁 조건을 방지 할 수 있습니다.

그 이유는 Google Analytics에 콜백 기능이 없기 때문에 10 초의 지연 시간을 두더라도 모든 제출을 캡처 하고 있는지 확신 할 수 없기 때문입니다 .

또는 제출 된 페이지에 GET 값을 전달하고 해당 페이지에서 값을 확인하도록 설정할 수 있습니다. 설정된 경우 trackEvent 호출을 보낼 수 있습니다.

---

Google Analytics 사용hitCallback

트래커 객체에 사용자 정의 콜백 함수를 지정할 수 있습니다.

_gaq.push(['_set', 'hitCallback', function(){}]);

콜백은 "조회가 성공적으로 전송 된"후에 호출됩니다.

제출 버튼 클릭을 추적하고 나중에 양식을 보내려면 이벤트에 다음 코드 (jQuery 사용)를 사용할 수 있습니다.

var _this = this; // The form input element that was just clicked
_gaq.push(['_set','hitCallback',function() {
    $(_this).parents('form').first().submit(); // Submit underlying form
}]);
_gaq.push(['_trackEvent', 'My category', 'My action']);
return !window._gat; // Ensure that the event is bubbled if GA is not loaded

또는 요소에 onclick대한 하나의 라이너로 <input type="submit">:

onclick="var _this=this;_gaq.push(['_set','hitCallback',function(){$(_this).parents('form').first().submit();}]);_gaq.push(['_trackEvent','My category','My action']);return !window._gat;"

이벤트를 추적하고 My category/My actionjQuery를 사용하여 방금 눌린 제출 버튼의 기본 양식 요소를 찾은 다음 전체 양식을 제출합니다.

참조 : Google Analytics-Google Analytics로 데이터 보내기-콜백 조회 (supervacuo에 감사드립니다)

업데이트 ga () 함수가 정의 된 최신 analytics.js 코드를 사용하는 경우 다음과 같이 작성할 수 있습니다.

var _this = this;
ga('send', 'event', 'My category', 'My action', {
    'hitCallback': function() {
        $(_this).parents('form').first().submit();
    }
});

return !window.ga;

---

Google 애널리틱스 범용을 다루고 hitCallback (유효성 검사 후 fx 추적 이벤트이지만 양식 제출 전 fx 추적 이벤트)을 수행하는 사람들의 경우 google-analytics.js가 잠재적으로 차단 될 수 있지만 ga 함수는 여전히 정의되므로 제출 일어나지 않을 것입니다.

ga('send', 'pageview', event, {
  'hitCallback': function() {
    _this.submit();
  }
})
return !window.ga;

ga가로드되었는지 확인하는 유효성 검사로 수정할 수 있습니다.

ga('send', 'pageview', event, {
  'hitCallback': function() {
    _this.submit();
   }
})
return !(ga.hasOwnProperty('loaded') && ga.loaded === true)

---

이 질문은 이제 몇 년이 지났으며 Google Analytics가 위에 제공된 해킹없이이를 수행 할 수있는 방법을 제공 한 것으로 보입니다.

로부터 구글 분석 문서 :

명령 배열 외에도 함수 객체를 _gaq 대기열에 푸시 할 수 있습니다. 함수는 임의의 JavaScript를 포함 할 수 있으며 명령 배열과 마찬가지로 _gaq에 푸시 된 순서대로 실행됩니다.

이것을 다중 명령 푸시와 결합하여 aboslute가 순서대로 추가되었는지 확인하고 호출을 저장할 수 있습니다.

$('input[type="submit"]').click(function(e) {
    // Prevent the form being submitted just yet
    e.preventDefault();

    // Keep a reference to this dom element for the callback
    var _this = this;

    _gaq.push(
        // Queue the tracking event
        ['_trackEvent', 'Your event', 'Your action'],
        // Queue the callback function immediately after.
        // This will execute in order.
        function() {
            // Submit the parent form
            $(_this).parents('form').submit();
        }
    );
});

---

100 % 정확도에 대해 너무 신경 쓰지 않는다면 1 초 지연을 유지할 수 있습니다.

$('#form_id').submit(function(e) {
  var form = this;
  e.preventDefault(); // disable the default submit action

  _gaq.push('_trackEvent', 'my category', 'my action');

  $(':input', this).attr('disabled', true); // disable all elements in the form, to avoid multiple clicks

  setTimeout(function() { // after 1 second, submit the form
    form.submit();
  }, 1000);
});

---

hitCallback 솔루션은 좋지만 쿠키를 설정하고 다음 페이지에서 이벤트를 트리거하는 것을 선호합니다. 이런 식으로 GA의 실패는 내 사이트를 중지하지 않습니다.

// Function to set the event to be tracked:
function setDelayedEvent(category, action, label, value) {
  document.cookie='ev='+escape(category)+'!'+escape(action)+'!'+escape(label)+'!'+value
      +'; path=/; expires='+new Date(new Date().getTime()+60000).toUTCString();
}

// Code run in every page, in case the previous page left an event to be tracked:
var formErrorCount= formErrorCount || 0;
var ev= document.cookie.match('(?:;\\s*|^)ev=([^!]*)!([^!]*)!([^!]+)!([^!]+)(?:;|\s*$)');
if (ev && ev.length>2) {
  _gaq.push(['_trackEvent', unescape(ev[1]), unescape(ev[2]),
     unescape(ev[3]), parseInt(ev[4])]);
  document.cookie='ev=; path=/; expires='+new Date(new Date().getTime()-1000).toUTCString();
}

---

gtag.js페이지 URL을 변경하기 전에 Google 웹 로그 분석 데이터가 전송되도록 에서 이벤트 콜백을 수행하는 방법 은 다음과 같습니다.

gtag('event', 'view_promotion', { myParameter: myValue, event_callback: function () {
    console.log('Done!');
    // Now submit form or change location.href
} });

출처 : https://developers.google.com/analytics/devguides/collection/gtagjs/sending-hits

---

좋습니다. 유니버설 애널리틱스로 이동 했으므로 GTM과 UA를 사용하여 동일한 답변을 드리고자합니다.

---

GTM :

양식 제출을 클릭 할 때 Google 애널리틱스에서 이벤트를 추적하는 것은 GTM을 사용하면 매우 쉽습니다.

• Create a UA tag and set the type to event in GTM.
• Fill your desired Event Action, Category and Label
• Create the trigger of type Form Submission.
• Put more conditions to target the button you desire

This is the best, optimal and easy going approach for the OP.

---

When it's crucial that every submit is tracked, I usually set a cookie on the backend with all required data. Then set up a rule in GTM to fire off a tag based on existence of this 1st party cookie. The tag parses the cookie for required values and does whatever is required with them and remove the cookie.

더 복잡한 예는 구매 추적입니다. 사용자가 구매를 수행 할 때 5 개의 다른 태그를 실행하려고합니다. 경쟁 조건과 일부 환영 페이지로의 즉각적인 리디렉션으로 인해 단순한 "onSubmit"추적에 의존하기가 어렵습니다. 그래서 저는 모든 구매 관련 데이터로 쿠키를 설정하고 사용자가 GTM에서 끝나는 모든 페이지에서 쿠키를 인식하고 쿠키를 파싱 할 "입력 점"태그를 실행하고 모든 값을 dataLayer에 푸시하고 쿠키를 제거하고 그러면 태그 자체가 이벤트를 dataLayer로 푸시하여 구매 데이터가 필요한 5 개의 태그 (이미 dataLayer에 있음)를 트리거합니다.

참고 URL : https://stackoverflow.com/questions/4086587/track-event-in-google-analytics-upon-clicking-form-submit