WordPress 블록 편집기로 A/B 테스트 만들기 – 전체 가이드
게시 됨: 2021-07-01워드프레스 블록 에디터로 웹사이트를 만들었다면, 그것을 최대한 활용하고 변환을 최적화해야 할 때입니다. A/B 테스트를 구현하면 가능합니다. 이 게시물에서는 A/B 테스트가 무엇인지, 왜 필요한지, Nelio A/B Testing 플러그인 덕분에 모든 WordPress 웹사이트에서 쉽게 생성할 수 있는 방법에 대해 간략히 알아보겠습니다.
목차
- 웹 전환이란 무엇이며 A/B 테스트를 만드는 이유는 무엇입니까?
- A/B 테스트를 만들기 전 단계
- 블록 편집기에서 A/B 테스트 생성
- 생성할 테스트 유형 선택
- 테스트 변형 정의
- 페이지 A/B 테스트
- 사후 A/B 테스트
- 사용자 정의 게시물 유형의 A/B 테스트
- 헤드라인 A/B 테스트
- 테마의 A/B 테스팅
- 템플릿의 A/B 테스트
- 메뉴 A/B 테스팅
- 위젯의 A/B 테스트
- CSS의 A/B 테스팅
- WooCommerce 제품 요약 A/B 테스트
- 전환 목표 및 액션 정의
- Nelio A/B 테스팅에서 전환 목표와 액션을 어떻게 정의합니까?
- 트래픽 세분화
- 생성된 테스트 실행 및 진행 상황 분석
- 성공적인 대안 적용
- WordPress 블록 편집기로 A/B 테스트를 생성하기 위해 무엇을 기다리고 계십니까?
웹 전환이란 무엇이며 A/B 테스트를 만드는 이유는 무엇입니까?
온라인 마케팅에서 더 깊이 다루어지는 두 가지 주제는 SEO 최적화와 웹 전환율 최적화입니다.
웹 전환은 사용자가 웹사이트에 도달할 때 취해야 하는 모든 작업을 말합니다. 제품 세부 정보 또는 가격 페이지 방문, 뉴스레터 구독, 문의, 기사 읽기 등 그리고 전환율은 방문 횟수 대비 달성된 전환 횟수입니다. 즉, 총 100회의 일일 방문이 있고 그 중 2회가 제품을 구매하는 경우 웹사이트의 전환율은 2% 입니다.
Google Analytics를 사용하면 언제든지 전환율을 측정할 수 있지만 전환율을 높이는 데 도움이 되는 가장 좋은 도구는 A/B 테스트입니다. 간단히 말해서 A/B 테스트는 개선 가설을 기반으로 웹사이트의 변경을 제안하는 것으로 구성됩니다(예: 특정 관련 정보를 더 잘 표시하기 위한 방문 페이지 재배포, 더 많은 클릭을 위한 메뉴 재배열) 내 제품 페이지에 표시하거나 테마를 근본적으로 변경하여 더 매력적으로 만든 다음) 해당 변경 사항이 이전보다 더 잘 작동하는지 확인합니다.
기술적으로 A/B 테스트는 동일한 웹페이지의 두 가지 변형을 웹사이트 방문자의 다른 세그먼트에 동시에 표시하고 어떤 변형이 더 많은 전환을 생성하는지 비교하는 실험에 불과합니다.

A/B 테스트는 무작위로 수행하는 실험이 아니며 전환율 최적화 또는 CRO 프로세스 로 알려진 보다 야심찬 프로세스의 일부여야 합니다.
A/B 테스트를 만들기 전 단계
전환을 개선하기 위해 가장 먼저 알아야 할 사항은 비즈니스 목표, 웹사이트 전환 목표, KPI 및 해당 목표에 대한 측정항목을 정의합니다.
웹사이트 목표를 정의하려면 전환 유입경로 , 즉 방문자가 웹사이트를 방문하는 순간부터 고객이 될 때까지 하는 행동을 이해해야 합니다. 이렇게 하면 유입경로의 각 단계를 최적화할 수 있습니다.
예를 들어, 당사 웹사이트인 Nelio Software의 경우 당사의 목표는 당사 플러그인의 프리미엄 플랜 가입자를 늘리는 것입니다. 방문자는 A/B 테스팅에 대한 정보를 Google에서 검색했을 때 Nelio A/B 테스팅에 대해 처음 알 수 있습니다. 웹 사이트에 도착하면 제품 설명서의 일부 기사를 읽고 이에 대해 자세히 알아봅니다. 그런 다음 방문자가 흥미로운 정보를 찾으면 더 자세한 정보를 요청하거나 플러그인의 무료 버전을 테스트하기 위해 WordPress 디렉토리에서 플러그인을 다운로드합니다. 마지막으로 방문자는 프리미엄 플랜 중 하나에 가입합니다.

각 단계에 대해 달성하려는 다양한 전환 목표를 정의해야 합니다. 예를 들어, 전환 목표는 제품 설명서에 대한 최소 방문 횟수일 수 있습니다.
이미 가지고 있는 도구(Google 애널리틱스, 히트맵, 스크롤맵, 클릭맵)를 사용하여 무슨 일이 일어나고 있고 어디에서 방문자를 잃는지 분석하고 이해하려고 노력하십시오.

다음 질문에 답해 보십시오.
- 페이지가 콘텐츠 및 디자인 측면에서 사용자의 기대를 충족합니까?
- 어떻게 개선할 수 있습니까?
- 사이트의 콘텐츠와 제안이 가능한 한 명확합니까?
- 더 명확하거나 간단하게 만들 수 있습니까?
- 이 페이지에서 주저하거나 진행을 방해하는 이유는 무엇입니까?
- 사용자의 행동에 도움이 되지 않는 페이지는 무엇입니까?
- 사용자 동기를 높일 수 있습니까?
그리고 여기에서 변경 가설을 생성하십시오. 예를 들어 Nelio A/B Testing 방문 페이지에서 많은 방문자가 첫 번째 접힌 부분만 보고 페이지를 아래로 스크롤하지 않는 것을 보았습니다. 다양한 대안을 논의한 후, 우리는 텍스트를 다시 생각해 보기로 결정했습니다. 우리의 가설은 다음과 같습니다. 웹사이트의 첫 번째 섹션에서 긴급성 대신 호기심을 불러일으키도록 메시지를 변경하면 전환이 개선될 것입니다.
변경 가설에서 이미 수행할 수 있는 새로운 A/B 테스트 아이디어가 있습니다.


블록 편집기에서 A/B 테스트 생성
WordPress 웹사이트에서 A/B 테스트를 수동으로 생성하려면 Google Analytics를 사용하여 전환 분석을 수행할 수 있습니다. 그러나 시장에서 사용 가능한 도구 중 하나를 사용하는 것이 좋습니다. 특히 Nelio A/B Testing(무료 및 프리미엄 버전 월 29유로부터)을 사용하는 것이 좋습니다. 기본 WordPress 플러그인이고 블록 편집기와 100% 호환되기 때문입니다. 작동을 위해 다른 외부 도구를 배우거나 사용할 필요가 없습니다.
Nelio A/B Testing을 사용하면 A/B 테스트에 대한 대안을 만드는 것이 WordPress에서 페이지, 게시물, 메뉴, 위젯 등을 만드는 것과 정확히 동일할 뿐만 아니라 트래픽을 분할해야 하는 작업을 절약할 수 있습니다. 귀하의 웹사이트에서 귀하가 찾고 있는 지표와 결과를 직접 제공합니다.
WordPress 블록 편집기로 Nelio A/B Testing을 사용하여 A/B 테스트를 생성하기 위해 따라야 하는 다양한 단계를 아래에서 살펴보겠습니다.
- 생성할 테스트 유형 선택
- 테스트 변형 정의
- 전환 목표 및 액션 정의
- 분석하려는 세그먼트가 있는 경우 정의
- 테스트 실행 및 진행 상황 분석
- 승리한 변형을 적용하고 영구적으로 만드십시오.
생성할 테스트 유형 선택
탐색 메뉴보다 페이지의 A/B 테스트를 생성하는 것은 다릅니다. 변형 생성은 다르지만 Nelio A/B Testing과 같은 도구를 사용하는 것의 가장 큰 장점은 WordPress 자체 내에서 프로세스를 안내하여 완전히 직관적이고 간단하게 만든다는 것입니다.
가장 먼저 해야 할 일은 생성하려는 A/B 테스트 유형을 선택하는 것이며 선택할 수 있는 다양한 요소를 제공합니다.

테스트 유형을 선택하면 테스트 변형 생성이 WordPress 요소를 생성할 때와 정확히 동일하다는 것을 알 수 있습니다.
테스트 변형 정의
선택한 테스트 유형에 대해 테스트할 요소를 선택하고 해당 변형을 정의해야 합니다. 예를 보자…
페이지 A/B 테스트
최근 Nelio Content 제품의 판매를 늘리기 위해 가격 페이지를 A/B 테스트하기로 결정했습니다. 특히, 서로 다른 계획의 어떤 색상 조합이 가장 많은 수익을 낼 수 있는지 분석하고 싶었습니다.

우리는 원래 버전 외에 다음과 같은 색상 조합으로 두 가지 다른 변형을 만들기로 결정했습니다.

첫 번째 변형에서는 올해 매우 유행하는 파스텔 색상을 선택하여 계획을 보여주기로 결정했습니다.

그리고 두 번째 변형에서는 위의 이미지에서 볼 수 있듯이 Standard 플랜만 강조 표시하고 싶었습니다.
Nelio A/B Testing으로 이 테스트를 어떻게 생성합니까? 페이지 테스트를 수행하기로 선택한 후 가장 먼저 테스트할 이름을 지정하고 테스트할 페이지를 선택합니다.

드롭다운 선택기를 사용하여 테스트된 페이지를 선택할 수 있습니다. 페이지가 없으면 제목, URL 또는 식별자를 입력하여 검색할 수 있습니다. 이 페이지를 제어 페이지 또는 제어 버전이라고 합니다.
다음으로 하나 이상의 변형(이름 지정 가능)을 생성할 수 있습니다. 기본적으로 각 변형은 이전에 선택한 제어 페이지의 정확한 복사본이 됩니다. 변형의 편집 링크를 클릭하면 원하는 모든 변경을 수행할 수 있는 이미 알고 있는 WordPress 블록 편집기가 표시됩니다.

원하는대로 변형 페이지에서 원하는 블록과 패턴을 추가, 수정 및 삭제하십시오. 보시다시피 제어 페이지를 만들 때 사용한 것과 동일한 편집기를 사용하게 되므로 원하는 대로 변형을 조정할 수 있는 모든 권한이 있습니다. 그러나 변형 버전의 오른쪽 사이드바에서 편집 중인 페이지가 A/B 테스트의 일부임을 확인할 수 있습니다.

사후 A/B 테스트
게시물에 대한 A/B 테스트를 만드는 것은 페이지와 매우 유사합니다. 게시물 테스트 생성을 선택하면 테스트할 원본 게시물을 선택하는 드롭다운에 게시된 게시물 목록이 표시됩니다. 제목, URL 또는 식별자를 입력하여 항목을 검색할 수도 있습니다.

나머지 프로세스는 이전 프로세스와 완전히 동일합니다.

사용자 정의 게시물 유형의 A/B 테스트
웹사이트에서 만든 강좌, 자주 묻는 질문 등 페이지와 포스트와는 다른 커스텀 포스트 타입의 A/B 테스트를 만들고 싶다면 Nelio A/로도 가능합니다. B 테스트. 이 유형의 테스트를 수행할 것인지 선택하기만 하면 됩니다. 이제 선택기를 통해 먼저 원하는 사용자 정의 게시물 유형 유형을 선택한 다음 테스트할 특정 콘텐츠를 선택할 수 있습니다.

헤드라인 A/B 테스트
더 매력적인 헤드라인을 만들고 싶다면 Nelio A/B Testing을 사용하면 매우 쉽습니다. 게시물 제목, 발췌문 및 추천 이미지의 다양한 버전을 테스트하고 어떤 조합이 더 많은 독자를 확보하는지 확인할 수 있습니다.
Nelio A/B Testing으로 헤드라인 테스트를 수행하기 위해 블록 편집기로 이동할 필요가 없습니다. 플러그인 자체를 사용하면 테스트 에디션에서 직접 수행할 수 있습니다.

헤드라인을 테스트하고 하나 이상의 변형을 생성하려는 게시물을 선택합니다.

테마의 A/B 테스팅
웹사이트를 분석한 후 웹사이트에 보다 근본적인 변화가 필요하다는 가설이 있다면 테마를 변경하는 것이 대안이 될 수 있습니다. Nelio A/B Testing을 사용하면 테마 테스트를 만드는 것이 매우 쉽습니다. 테스트하려는 WordPress 테마를 설치하고 테마의 A/B 테스트에서 선택하기만 하면 됩니다.

템플릿의 A/B 테스트
웹 사이트의 테마를 변경하는 대신 웹 사이트의 일부 페이지에 대해 다른 템플릿을 만들 수 있습니다. 블록에디터로 미리 디자인한 후 A/B 테스트를 해보세요.

항상 그렇듯이 특정 템플릿을 사용하는 모든 페이지에서 템플릿 변형으로 사용하려는 다양한 템플릿 변형을 선택하는 것만 큼 쉽습니다.
메뉴 A/B 테스팅
메뉴의 A/B 테스트를 만드는 것은 현재 가지고 있는 메뉴 중 하나를 선택하고 원하는 변형을 만드는 것만큼 간단합니다.

변형을 수정하려면 기존 메뉴를 편집하는 것과 동일한 방식으로 메뉴를 편집하고 수정하는 링크를 클릭하기만 하면 됩니다. 생성되면 이미 이 테스트의 변형으로 사용할 수 있습니다.

원하는 대로 요소를 변경하여 메뉴 구조를 수정하고 준비가 되면 테스트로 돌아갑니다.
위젯의 A/B 테스트
WordPress에서 위젯 테스트를 생성해야 하는 경우 위젯 테스트 생성을 선택한 후 새 위젯 변형의 이름을 표시하고 편집 링크를 클릭하기만 하면 됩니다.

변형을 편집할 때 Nelio는 몇 가지 추가 컨트롤과 함께 WordPress의 자체 위젯 편집기를 사용합니다. 원하는 대로 변형 위젯을 추가, 삭제 및 정렬한 다음 테스트로 돌아갑니다.

CSS의 A/B 테스팅
다양한 버전의 CSS 스타일 규칙을 테스트하고 목표 달성에 가장 적합한 규칙을 측정하려는 경우 CSS 테스트 생성을 선택할 수 있습니다. 위젯의 경우와 마찬가지로 새 변형의 이름을 입력하고 편집 링크를 클릭하기만 하면 됩니다. 이 경우 실시간으로 효과를 미리 보면서 원하는 CSS 스타일을 추가할 수 있는 편집기가 열립니다.

새 규칙을 정의했으면 게시를 클릭하면 테스트의 CSS 변형이 생성됩니다.
WooCommerce 제품 요약 A/B 테스트
마지막으로 WooCommerce 제품 요약 A/B 테스트는 이름, 간단한 설명 및 제품 이미지의 다양한 조합을 테스트하는 WooCommerce 전용 테스트로, 해당 제품을 가장 많이 구매한 제품을 찾아냅니다. 이 유형의 테스트를 만드는 방법은 이전에 본 헤드라인의 방법과 매우 유사합니다.
이 유형의 테스트를 생성하도록 선택한 경우 Nelio A/B Testing은 사용 가능한 제품을 드롭다운에 표시하며 생성하려는 변형만 수정하면 됩니다. 테스트 편집기. 제품을 수정하러 갈 필요가 없습니다.

전환 목표 및 액션 정의
테스트에 변형을 정의한 후 다음 단계는 테스트의 전환 목표를 정의하는 것입니다. 즉, 테스트의 목적은 무엇입니까? 예를 들어 목표는 더 많은 판매, 더 많은 구독자 또는 가격 책정 페이지 방문 수를 늘리는 것일 수 있습니다. 목표가 무엇이든 방문자가 특정 작업을 수행하면 목표가 달성됩니다. 예를 들어, 사용자가 웹사이트에서 구독 양식을 제출하거나 가격 페이지에서 "구독" 버튼을 클릭했을 때 새로운 구독자를 얻었다고 생각할 수 있습니다.
Nelio A/B 테스팅에서 전환 목표와 액션을 어떻게 정의합니까?
전환 목표 및 작업 섹션에서 + 새로 만들기 링크를 클릭하여 원하는 만큼 목표를 추가할 수 있으며 선택적으로 목표에 이름을 추가할 수 있습니다. Nelio A/B Testing은 정의한 각 목표에 대해 각 변형이 얼마나 효과적인지에 대한 정보를 보여줍니다.

정의한 각 목표에 대해 방문자를 추적하기 위한 다양한 유형의 전환 액션이 있습니다. 예를 들어 사용자가 특정 페이지에 액세스할 때, 웹사이트의 특정 요소를 클릭할 때 또는 문의 양식을 제출할 때를 모니터링할 수 있습니다. 관심 있는 작업 버튼을 클릭하고 각 작업 유형에 대해 고유한 구성 매개변수를 정의합니다.
Nelio Content 가격 페이지의 테스트 예에서 테스트 내에서 측정할 4가지 목표를 정의했습니다.
- 모든 계획의 버튼을 클릭합니다.
- 기본 계획의 버튼을 클릭합니다.
- 표준 계획의 버튼을 클릭합니다.
- 플러스 플랜 버튼을 클릭합니다.

트래픽 세분화
일부 A/B 테스트 도구의 흥미로운 기능 중 하나는 트래픽을 세분화할 수 있다는 것입니다. 즉, 특정 방문자만 테스트에 참여하도록 설정할 수 있습니다. 예를 들어 국가별, 시간별, 언어별, 브라우저별, 기기별 등입니다. Nelio A/B Testing으로 트래픽 세분화를 구현하는 방법에 대해 자세히 알고 싶다면 이 기사에서 Antonio가 자세히 설명합니다.
생성된 테스트 실행 및 진행 상황 분석
이제 끝입니다. 이제 버튼을 눌러 테스트를 시작하고 진행 상황을 분석하면 됩니다. Nelio A/B Testing은 각 방문자가 귀하가 만든 변종 중 하나만 보고 그들의 행동을 추적할 수 있도록 트래픽을 분할할 것입니다. Nelio A/B Testing을 사용할 때 플러그인이 처리하므로 테스트를 실행하거나 데이터의 통계적 신뢰도를 제어해야 하는 시간에 대해 걱정할 필요가 없습니다. 가장 중요한 데이터인 테스트된 각 변형에 대한 총 전환수 및 방문수를 살펴보세요. 또한 원본 버전과 비교하여 각 변형의 개선 비율을 확인할 수 있습니다.
예를 들어 Nelio Content 가격 페이지 테스트를 실행한 지 한 달 9일이 지난 후 이미 거의 100% 신뢰도로 통계적으로 유의미한 결과를 얻었습니다. 그리고 가격표 플랜의 모든 버튼에서 발생한 클릭을 측정하는 것으로 구성된 첫 번째 목표에서 다음과 같은 결과를 얻었습니다.

이 경우 결과 이미지에서 볼 수 있듯이 두 번째 변형인 대안 C가 원본 버전보다 거의 130% 더 많은 클릭을 달성한 것을 보여줍니다. 대조적으로, 파스텔 색상으로 계획을 보여주는 변형은 25.5% 더 나쁩니다. 테스트의 목표인 대안 C만 있었다면 압도적인 결과를 얻었음을 알 수 있습니다.
같은 방법으로 우리가 설정한 각각의 목표를 분석하고 A/B 테스트에서 얻은 결과를 보면 액센트 색상으로 Standard 플랜을 명확하게 강조한 버전 C가 , 변형 A 및 B보다 훨씬 더 잘 작동했습니다.
성공적인 대안 적용
마지막으로 위의 예에서와 같이 테스트에서 승리한 변형을 얻은 경우 Nelio A/B Testing을 사용하면 해당 변형을 웹사이트의 최종 버전으로 적용할 수 있습니다. 이것은 Nelio A/B Testing이 기본 WordPress 플러그인인 또 다른 큰 장점입니다. 우승한 대안을 적용하면 적용 을 클릭하기만 하면 됩니다.

그리고 짜잔 , 이제 입증된 데이터를 사용하여 이전보다 더 나은 웹사이트 디자인을 갖게 되었습니다.
WordPress 블록 편집기로 A/B 테스트를 생성하기 위해 무엇을 기다리고 계십니까?
블록 편집기에서 A/B 테스트를 생성하는 방법에 대한 이 완전한 가이드를 통해 Nelio A/B Testing을 사용하면 WordPress에서 모든 것을 A/B 테스트하는 것이 매우 쉽다는 것을 알게 되었습니다. 또한 이와 같은 도구를 사용하면 웹사이트 트래픽을 분할하거나 방문자의 행동을 분석하는 것에 대해 걱정할 필요가 없습니다. Nelio A/B Testing은 매우 편안한 방식으로 모든 작업을 수행합니다. 우리와 우리 고객의 경험에 따르면 A/B 테스트는 방문자가 웹사이트에서 무엇을 기대하는지 더 잘 이해하고 추가 광고 없이 비즈니스 수익을 늘리는 방법을 이해하는 데 도움이 됩니다.
이 가이드가 유용했다면 소셜 네트워크에서 공유하십시오. 그리고 질문이 있거나 의견이 있거나 추가 정보가 필요하면 주저하지 말고 이 게시물 끝에 의견을 남겨주세요.
Unsplash에서 Maarten Deckers의 주요 이미지 .