클릭하면 AJAX 게시물을 만들고 심지어 원래 작업으로 계속 수행하는 JavaScript

Question

WordPress 용 A/B 테스트 방문 페이지 플러그인을 구축 중입니다.

WordPress에 landingpage이라는 새로운 사용자 정의 게시 유형이 추가되었습니다. 방문 페이지 관리자에

/편집 화면을 만들어는 A/B 테스트 기능을위한 5 개 가지 주요 섹션이 있습니다

• A/B 테스트 변환 규칙
• A/B 테스트 변화 수상작 규칙
을
• A/B 테스팅
• A/B 테스팅 페이지 변형을
• A/B 테스팅 통계

를 초기 설정 17,451,515,

---

A/B 테스트 페이지 유사
다음은 A/B 테스트의 각 버전에 대한 다른 페이지의 콘텐츠입니다. 각 유사 콘텐츠는 본문 텍스트/html과 페이지의 새 제목으로 구성됩니다.

방문객이 처음으로 방문 페이지를 볼 때. 임의의 변형이 선택됩니다. 그런 다음이 유사 콘텐츠가 쿠키에 저장되므로 해당 방문 페이지를 볼 때이 버전의 페이지를 항상보아야합니다.

A/B 테스트 변환 규칙
이 페이지에 대한 관리자 패널에 정의 된 규칙의 집합입니다. 그러면 해당 페이지에서 전환이 발생/계산되고 방문자가 전환을 완료 할 때 A/B 테스트 변형에 대한 전환이 기록됩니다.

관리자 패널에서 이것은 규칙 집합과 같습니다. 페이지에 규칙이 여러 개 있으면 규칙이 충족 될 때 해당 페이지에서 모두 전환을 트리거합니다.

변환 규칙의 3 종류 현재이 같습니다 CSS와 이름 속성 = _____

양식 또는 링크 클래스 속성 =와

• 양식 _____
• 양식 또는 CSS와 연결 ID 속성 = _____

---

DEMO : 나는 도움을 필요로하는 곳에 https://jsfiddle.net/jasondavis/88wx3hjz/9/

이입니다. 사용자가 해당 페이지의 데이터베이스에 변환 규칙이있는 페이지를 방문 할 때 해당 페이지에 정의 된 규칙을 기반으로 변환을 트리거 할 JavaScript를 생성해야합니다.

페이지에 2 가지 규칙이있는 경우 ....

클래스 속성 1) 링크 = cta-link-1는 form1가

를 제출 =
2) 이름 속성을 가진 폼에 클릭 그럼 난 CSS 클래스 = cta-link-1과 이벤트를 제출와 버튼을 일치하는 클릭 이벤트에 대한 자바 스크립트가 필요합니다 이름이 form1 인 양식의 경우 두 작업 중 하나가 발생할 때 변환을 기록하는 AJAX 게시물을 서버에 작성하십시오.

변환 후 AJAX 게시물을 작성한 후에 양식 게시물 및 링크 클릭이 원래 작업을 계속하는 것이 중요합니다.

---

내 첫 번째 시도/데모

이 데모는 CSS 클래스를 링크에 대한 클릭에 클릭 이벤트 처리기를 부착

=을 클릭 ON cta-link-1

:
-의 존재에 대한 확인 플래그 변수
- 플래그가 설정되어 있지 않으면 페이지에 대한 변환을 저장하기 위해 AJAX 게시를 만듭니다.
- 플래그 변수를 true로 설정하여 다음 클릭시 AJAX 저장 부분을 무시합니다.
- 그런 다음 링크를 다시 클릭합니다. 이번에는 플래그 var가 표시되고 AJAX 부분을 건너 뜁니다. 링크를 열면 내 데모에서 링크가 열리지 않습니다. 콘솔을보고 내 데모 링크를 클릭하면 아약스 게시물을 본 다음 트리거 조치로 링크를 다시 클릭하면 아무 것도 볼 수 없습니다.

// version 1 for click event on class .cta-link-1 
$('.cta-link-1').on('click', function (e, options) 
{ 
    options = options || {}; 

    /* if options.record_ab_test_conversion_done flag not yet set to true, make AJAX post to record a conversion */ 
    if(!options.record_ab_test_conversion_done) 
    { 
    e.preventDefault(); 
    console.log('%c [1-Link Clicked] - Make AJAX post to save conversion', 'background: #222; color: #bada55'); 

    var pageData = { 
     pageId: '123456789', 
     abTestVariation: '2' 
    }; 
    $.ajax({ 
     url : 'https://posttestserver.com/post.php?dir=jason', 
     type: 'POST', 
     data : pageData, 
     //dataType : 'json', 
     success: function(data, textStatus, jqXHR) 
     { 
      //data - response from server 
      console.log(data); 

      // retrigger the click event with record_ab_test_conversion_done set to true so that this code will 
      // run again but next time will bypass the AJAX conversion saving part 
      $(e.currentTarget).trigger('click', { 
       'record_ab_test_conversion_done': true 
      }); 
     }, 
     error: function (jqXHR, textStatus, errorThrown) 
     { 

     } 
    }); 

    /* if options.record_ab_test_conversion_done flag is set to true, carry on with with default action */ 
    }else{ 
    /* allow default behavior to happen */ 
    console.log('%c [2-Link Clicked] - Triggered from AJAX success so this click should not record a conversion and should instead open the link as normal!', 'background: #222; color: #bada55'); 
    return true; 
    } 
}); 

---

DEMO : https://jsfiddle.net/jasondavis/88wx3hjz/9/

그래서 내가

은 지금 클릭이 AJAX 포스트를하게하고 건너 뜁니다 클릭을 다시 트리거 100 % 내 데모 작업을 만드는 데 도움이 필요 두 번째 클릭에 AJAX 게시. 이 두 번째 클릭은 링크를 따르지 않지만 어떤 이유로

Answer 1

는 다음과 같은 시도 :

$('.cta-link-1').on('click', function (e, options) 
{ var el = $(this); 
... 



success: function(data, textStatus, jqXHR) 
     { 
      if (el.is('a')) {//links 
      window.location = el.attr('href');//redirect to the intended url 
      } else {//forms 
      el.closest('form').submit();//submit that form 
      } 
     },