React에서 AB 테스트를 실행하는 방법

5967 단어 react
나는 최근에 React 프로그램에서 AB 테스트를 실행해야 하는 상황을 만났다.우리가 AB테스트를 실행하는 플랫폼은 Google Optimize입니다. 이것은 무료 구글 제품으로 사이트에서 실험을 실행하는 데 도움을 줄 수 있습니다. 방법은 사이트의 각 부분을 바꾸고 관심의 결과 지표를 분석하는 것입니다.
지금까지 우리가 진행한 실험은 관련된 변화가 매우 광범위하고 많기 때문에 React 응용 프로그램에 들어가기 전에 새로운 노선을 설정하고 페이지에서 방문객을 분리하는 것이 의미가 있다.i, e.50% 내 웹 사이트에 전송com/enteringreactnow/v1과 50%를 제 사이트에 보냅니다.com/enteringreactnow/v2.
React와Optimize에 새로운 루트를 설정하는 것은 매우 쉽지만, 프로그램의 구성 요소만 테스트하면 효과적인 선택이 아니다.그럼 어떡하지?

옵션 1: 사용자 고유의 기능 플래그를 사용하여 최적화에서 벗어나십시오.
이 옵션은 일종의 해커 행위와 더욱 비슷하다.나는 특정한 화면 경로를 표시하거나 숨기는 아주 구체적인 상황을 만났다.사용자가 통과하는 화면 순서가 미리 설정되어 있도록 프로그램을 설정했습니다.그리고 내비게이션의 모든 조건 흐름 (useNavigator) 을 확인하기 위해 사용자 정의 갈고리를 사용합니다. 예를 들어 사용자가 이 선형 화면 서열을 눌렀을 때 특정 화면을 표시하거나 숨길지 여부입니다.
내가 하려는 본질은 문자열 그룹 (끝에서 끝까지 흐름) 에 문자열 (경로 이름) 을 표시하거나 숨기는 것이지, 구성 요소를 표시하거나 숨기는 것이 아닙니다.Optimize를 사용하면 이 점을 명확하거나 간단하게 실현할 수 없을 것 같다.따라서 나는 사용자를 무작위 그룹으로 나누는 기능을 실현한 다음에 논리를 작성하여 그들이 하나의 실험 경로를 따라 다른 실험 경로와 비교하도록 하기로 결정했다.
무작위 그룹을 만들려면,
const ALL_GROUPS = ['A', 'B']
type Group = typeof ALL_GROUPS[number]
const randomGroup = (): Group => ALL_GROUPS[Math.floor(Math.random() * ALL_GROUPS.length)]
각 방문자의 그룹 할당은 Redux 상태로 저장되며 로컬 저장소에 저장됩니다.이렇게 하면 애플리케이션에 다시 액세스하는 사용자가 원래 그룹 할당을 유지하여 동일한 애플리케이션 환경을 얻을 수 있습니다.이는 Google Optimize와 유사하며 대신 cookies를 사용합니다.
여기서는 사용자가 속한 그룹에 따라 특정 화면을 표시하거나 숨길지 여부를 쉽게 논리로 작성할 수 있다.더 어려운 것은 실험 결과를 스스로 감시하고 계산해야 한다는 것이다.Google Tage Manager + Google Analytics 같은 도구를 사용하여 이벤트 추적을 설정하고 결과를 통계적으로 파악해야 합니다.구글 최적화를 사용하고 있다면 구글 분석을 설정했을 수도 있기 때문에 이것은 당신이 처리해야 할 결과의 실제 분석일 뿐이다.
찬성 의견
  • React에서 쉽게 수행할 수 있습니다.
    • 기만하다
  • 확장이 불가능합니다.
  • 여러 텍스트를 동시에 실행하려면 Redux 저장소에 여러 개의 그룹을 저장하여 모든 테스트가 진정으로 무작위로 이루어지도록 해야 한다.
  • 당신은 스스로 분석 수집과 분석 결과를 세워야 합니다.

    • 옵션 2: 구글을 사용한 API 최적화
    본질적으로 당신이 해야 할 일은:
  • 최적화된 스크립트를 <head> 파일의 index.html 태그에 붙여넣습니다.이 스크립트에는 Google Analytics ID 및 Optimize ID
    • 가 포함됩니다.
  • 최적화 계기판에 실험을 설치한다.여기에 있을 때, 스크립트가 제대로 설치되어 있고, 응용 프로그램에서 실행 중인지 확인해야 합니다.
  • 계기판을 사용하여 실험에 컨트롤과 변수를 설정하거나 React 프로그램에서 변수를 인코딩할 수 있습니다.변경 사항이나 단추의 색을 복사하는 간단한 변체만 테스트하고 싶다면, 대시보드 보기로 충분할 것입니다.더 복잡한 테스트는 내부에서 설정하기를 원할 수도 있습니다.
  • 이 작업을 수행하려면 다음과 같이 하십시오.
  • 활성화 이벤트가 사용자 정의로 변경되었는지 확인하고 이벤트 이름을 기록합니다.기본값은 Run Diagnostics이지만 원하는 대로 이름을 바꿀 수 있습니다.
  • 실험 ID 기록
  • 코드 라이브러리에서 테스트할 구성 요소 안과 구성 요소가 설치된 후 활성화 이벤트(즉 최적화 시작)를 시작하고 최적화가 언제 준비되었는지 확인한 다음에 이 구성 요소와 관련된 실험 ID를 최적화하기 위해 통신을 합니다.
  • 여기서부터 Optimize가 다양한 변체에 대해 무엇을 보여주고 싶은지 알려주면 Optimize+구글 분석은 남은 것(사용자에서 다른 그룹으로 세분화하고 쿠키를 저장하며 보고까지)을 처리할 수 있습니다.
  • 살펴보기this article 한 걸음 한 걸음 어떻게 실시하는지 알고 싶다면.

    • 옵션 3: 옵션 2와 유사하지만 사전 구축 패키지 사용
  • React가 얼마나 인기가 많은지 가장 중요한 것은 누군가가 어느 곳에서 당신이 직면한 문제에 부딪혔을 수도 있고 가방을 만들었을 수도 있다는 것이다.
  • 이 문제를 해결하는 소프트웨어 패키지의 한 예는 바로 적당한 이름optimize.activate이다.자세한 내용은 해당 GitHub repo를 참조하십시오.
  • 는 기본적으로 옵션 2의 모든 기능을 완성했고 react-optimize와<Experiment id="<experiment-id>"> 등 좋은 패키지 구성 요소를 제공합니다.덮개 아래를 보면 매우 가볍고 정확한 시간에 모든 마운트 관리를 최적화할 수 있습니다.단, 기본 사용자 정의 이벤트 이름 <Variant id="0"> 을 유지해야만 작업을 할 수 있습니다.
  • React의 상하문 갈고리를 통해 모든 내용을 한데 조합한다.

    • 옵션4: 미리 구축된 패키지를 사용하지만 데이터를 다른 곳으로 보내면 구글 분석을 보내지 않습니다
  • 구글 최적화 + 구글 분석을 좋아하지 않는다면 마블 앱optimize.activatepackage를 보세요.
  • 이 패키지에는 Segment 및 Mixpanel에 사용할 수 있는 지원이 있지만 송신기를 사용하여 추적 데이터를 유연하게 저장할 수 있습니다.
  • 구글 최적화 계기판에서 실험, 권중, 변수 수량 등을 설정하지 않았기 때문에 코드에서 모든 내용을 설정할 수 있습니다.모든 물건을 한 곳에 두는 것이 좀 좋다.😎
    • 나의 실험에서 나는 최종적으로 옵션 1과 옵션 3을 선택했다.그것들은 모두 나의 요구를 만족시킬 수 있어, 너무 많은 준비 시간이 필요 없다.이것이 내가 오랫동안 하고 싶었던 일인지 모르겠지만, 또한 내가 신속하고 이해하기 쉽고 회고하기 쉬운 것이 필요하다는 것을 의미한다. (필요하지 않으면 그것을 말살할 수도 있다.)
    댓글 뭐 있나요?인스타그램에서 나랑 얘기해!
    정렬 선택 - 간단 한 정렬 선택
    BootStrap Item 2 깊이 이해 - 간단 한 입문

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage