WordPress에서 Elementor로 A/B 테스트를 수행하는 방법(및 수행해야 하는 이유)

웹 사이트를 디자인할 때 제품 판매, 서비스 홍보 또는 독자의 반응이나 행동을 유발하는 등의 목적을 가지고 디자인합니다. WordPress에서 웹 사이트를 만들기 위해 Elementor 플러그인을 페이지 빌더로 선택한 경우 디자인이 중요 하다는 것을 알고 매력적이고 현대적이어야 하기 때문입니다. 오늘은 Elementor 웹사이트에서 A/B 테스트를 만드는 방법을 알아보겠습니다.

귀하의 페이지 디자인에 Elementor를 사용하더라도 귀하의 절묘한 취향이 실제로 최상의 결과를 가져올 것인지 어떻게 알 수 있습니까? 당신은 당신 자신의 고객이 아니며 그들의 의견과 취향은 당신과 매우 다를 수 있습니다. 본능에 따라 행동하는 것은 매우 낭만적일 수 있지만 사용자 경험을 개선하고 전환율을 높이려는 경우, 즉 독자가 목표에 부합하는 조치를 취하도록 하려는 경우(구매, 양식 작성, 연락 등) , 가장 좋은 방법은 웹사이트에서 A/B 테스트를 수행하는 것입니다.

A/B 테스트란 무엇입니까?

웹사이트 방문자 수는 방문자가 전환이라고도 하는 원하는 액션을 수행할 수 있는 기회의 수와 같습니다. 이것은 구독, 구매, 양식 작성 등입니다.

전환율은 방문수 대비 달성된 전환수입니다. 따라서 웹사이트에서 하루에 총 100번의 방문이 있고 그 중 2번이 제품을 구매하는 경우 웹사이트의 전환율은 2% 입니다.

이메일을 받은 사람들의 몇 퍼센트가 구매로 이어지는지 분석하여 이메일 캠페인의 성공을 측정할 수 있는 것과 같은 방식으로 웹사이트에는 성공 또는 전환율을 향상시키는 매우 좋은 도구인 A/B 테스트가 있습니다.

A/B 테스트는 웹사이트에서 전환을 최적화하는 최고의 도구입니다. 간단히 말해서 A/B 테스트는 개선 가설을 기반으로 웹사이트 변경을 제안하는 것으로 구성됩니다(예: 특정 관련 정보를 더 잘 표시하기 위한 방문 페이지 재배포, 더 많은 클릭을 얻기 위한 메뉴 재배열) 내 제품 페이지에 추가하거나 테마를 근본적으로 변경하여 더 매력적으로 만든 다음) 해당 변경 사항이 이전보다 더 잘 작동하는지 확인하세요.

기술적으로 A/B 테스트는 동일한 웹페이지의 두 가지 변형을 웹사이트 방문자의 다른 세그먼트에 동시에 표시하고 어떤 변형이 가장 많은 전환을 발생시키는지 비교하는 실험에 불과합니다.

A/B 테스팅에서 빠르게 발생하는 질문 중 하나는 어떤 유형의 테스트를 테스트해야 하는지입니다. A/B 테스트는 아무 의미 없이 임의로 정의하는 테스트가 아닙니다. 전환율 최적화 또는 CRO 프로세스 로 알려진 보다 야심찬 프로세스의 일부여야 합니다.

전환율 최적화

전환율 최적화 또는 CRO는 이름에서 알 수 있듯이 원하는 작업을 수행하는 웹사이트 방문자의 비율을 높이는 프로세스입니다. 이 프로세스는 간단히 말해 다음 단계로 구성됩니다.

1단계: 목표 정의

모든 CRO 프로세스의 첫 번째 단계는 비즈니스 목표가 무엇인지, 판매 유입 경로의 여러 단계에서 웹사이트의 다양한 전환 목표를 정의하는 것 입니다. 예를 들어 Nelio의 비즈니스 목표는 프리미엄 플랜 가입자를 늘리는 것입니다. 그러나 방문자가 웹 사이트를 방문한 순간부터 고객이 될 때까지 어떤 경로를 선택합니까? 이것은 우리의 판매 깔때기입니다:

우리의 비즈니스 목표가 프리미엄 플랜의 가입자를 늘리는 것이라면 잠재 고객이나 리드는 Google 또는 WordPress 플러그인 디렉토리에서 A/B 테스트 솔루션을 검색했을 때 Nelio A/B Testing에 대해 먼저 알 수 있습니다. 당사 웹 사이트 방문자는 당사 제품에 대해 조금 더 배우기 위해 당사 설명서의 일부 기사를 읽을 것입니다. 해당 페이지의 콘텐츠가 마음에 들면 가격 책정 페이지를 방문하게 됩니다. 이 시점에서 우리 웹사이트의 전환 목표는 가격 책정 페이지 방문이 될 수 있고 목표 측정항목은 해당 페이지에 대한 월별 2,000회의 방문이 될 수 있습니다.

그런 다음 잠재 고객이 흥미로운 정보를 찾으면 더 자세한 정보를 요청하거나 WordPress 디렉토리에서 플러그인을 다운로드하여 우리가 제공하는 무료 버전을 테스트합니다. 두 번째 전환 목표는 방문자가 문의 양식을 작성하는 것입니다. 메트릭은 수신된 문의 양식의 수이며 특정 값으로 월별 목표를 정의할 수 있습니다. 또는 플러그인을 다운로드할 수도 있습니다. 등등.

마지막으로 잠재 고객은 프리미엄 플랜 중 하나에 가입합니다. 이 경우 전환 목표는 분명히 구독 플랜 구매를 포함합니다. 그리고 우리 사업의 목적은 성장이기 때문에 우리는 이 목표를 우리가 갖고 있는 다양한 계획 사이에서 세분화할 수 있습니다.

이미 보았듯이 이 첫 번째 단계는 판매 유입경로를 분석하여 측정항목을 설정하여 전환 목표를 정의하는 것으로 구성됩니다.

2단계: 웹사이트 분석

이 필수 예비 단계 후에 웹 사이트의 현재 상황과 조치를 취할 수 있는 데이터를 찾기 시작해야 합니다. 현재 귀하의 웹사이트에 있는 문제를 식별하십시오. 이것은 수행해야 하는 A/B 테스트에 대한 아이디어를 생성하는 데 도움이 됩니다.

어떻게 데이터를 수집합니까? 처음에는 이전 단계에서 식별한 각 페이지를 경험적으로 평가합니다. 설정한 기준을 충족하는지 스스로에게 물어보고 이러한 결과를 개선할 수 있는지 확인합니다.

• 페이지가 콘텐츠 및 디자인 측면에서 사용자의 기대를 충족합니까?
• 어떻게 개선할 수 있습니까?
• 사이트의 콘텐츠와 제안이 가능한 한 명확합니까?
• 더 명확하거나 간단하게 만들 수 있습니까?
• 이 페이지에서 주저하거나 진행을 방해하는 이유는 무엇입니까?
• 단순화할 수 있습니까?
• 사용자의 행동에 도움이 되지 않는 페이지는 무엇입니까?
• 사용자 동기를 높일 수 있습니까?

잠재적으로 개선할 수 있는 관심 영역 목록을 받게 됩니다. Google Analytics를 사용하여 개선 영역도 찾으십시오. 예를 들어 GA는 제품 버튼을 클릭한 방문자의 비율을 감지하는 데 도움이 될 수 있으며, 이를 예상 수치와 비교할 수 있습니다. 히트맵과 스크롤맵을 사용하여 웹 사용자의 행동을 더 잘 이해할 수도 있습니다.

다음으로, 가장 큰 영향을 미칠 것으로 생각되는 것(방문 횟수가 더 많거나 중요한 문제이기 때문에)에 우선적으로 초점을 맞추고 식별한 문제 또는 개선 영역의 우선 순위를 지정하십시오. 예를 들어, 분석에서 Nelio A/B Testing 제품 페이지를 개선할 필요가 있음을 확인했습니다. 가격 페이지를 방문하는 사용자 수를 늘리고 싶었습니다. 그리고 이것은 중요한 문제였습니다.

3단계: 가설 만들기

A/B 테스트를 생성하기 전에 다음 단계는 이전에 식별된 문제 목록을 일련의 가설로 변환하는 것입니다.

예를 들어 Nelio A/B Testing 방문 페이지에서 많은 방문자가 첫 번째 블록만 보고 페이지 아래로 스크롤하지 않는 것을 보았습니다. 웹의 히트맵과 스크롤맵을 분석한 결과 알 수 있었습니다. 또한 방문자의 45%만이 가격 책정 페이지를 방문했습니다.

이러한 사실을 감안할 때 우리는 긴급성 대신 호기심을 불러일으키는 보다 명확한 메시지를 첫 번째 폴더에 사용함으로써 더 많은 사람들이 지금 시작 버튼을 클릭하는 데 관심을 갖게 할 것이라고 가정했습니다. 주문한 목록의 각 문제에 대해 동일한 연습을 할 수 있습니다.

4단계: 테스트 아이디어 생성

다음으로 우리는 "호기심을 불러일으키는" 새로운 헤드라인을 구현해야 했습니다. 우리의 특별한 경우에는 다음을 사용하기로 결정했습니다. 빨강 또는 파랑? 정사각형 또는 원형? 위 또는 아래? 당신의 워드프레스를 테스트해보세요 .

또한 이미지와 같이 헤드라인 아래의 텍스트를 변경하기로 결정했습니다. 우리가 가진 아이디어는 사람들이 우리가 제품 대신 사이트와 목표에 대해 이야기하는 것을 선호한다는 것이 사실인지 확인하는 것이었습니다.

5단계: A/B 테스트 생성 및 실행

마지막으로, 이미 상상할 수 있듯이 웹 사이트에서 테스트를 만드는 일만 남았습니다. 처음에 언급했듯이 A/B 테스트는 페이지의 두 가지 버전 또는 변형을 만드는 실험에 불과합니다(게시물, 메뉴, 위젯, 양식 또는 기타 WordPress 웹사이트의 요소). 테스트가 실행되면 방문자를 분할하여 방문자의 약 절반이 항상 변형 A를 보고 나머지는 변형 B를 보도록 할 수 있습니다.

A/B 테스트를 정의할 때 테스트의 변형(A/B 또는 다변수 테스트의 경우 다중)을 정의해야 할 뿐만 아니라 전환 목표도 정의해야 합니다. 이전 예에서 보았듯이 전환 목표는 프리미엄 플랜의 가격 페이지 방문수를 계산하는 것이었습니다. 또한 A/B 테스트에서 테스트 참가자를 분류할 수도 있습니다. 즉, 테스트에 참여하고 싶은 방문자를 나타냅니다.

테스트를 실행한 후 변형 중 하나가 승자인지 확인하고 웹사이트에 최종 변형으로 확실하게 적용하여 전환이 개선되는지 확인할 수 있습니다.

상상할 수 있듯이 웹사이트 전환을 최적화하는 프로세스는 지속적이고 주기적입니다. 웹사이트를 개선하기 위해 A/B 테스트를 중단하지 마십시오.

Elementor에서 A/B 테스트 만들기

예를 들어 전환 분석을 위해 Google Analytics를 사용하여 Elementor를 사용하여 WordPress 웹 사이트에서 A/B 테스트를 수동으로 만들 수 있습니다. 그러나 Nelio A/B Testing(무료 및 프리미엄 버전 월 29유로부터), Convertize(프리미엄 버전 월 49달러부터), VWO(프리미엄 버전: $199/월), Convert Expriences(프리미엄 버전: $699/월) 또는 Optimizely(맞춤 가격이지만 약 $800/월) 등을 통해 트래픽을 분류해야 하는 수고를 덜 수 있습니다. 귀하의 웹사이트에 귀하가 찾고 있는 지표와 결과를 직접 제공합니다.

기본 WordPress 플러그인이라는 큰 장점이 있는 도구인 Nelio A/B Testing을 사용하여 Elementor로 어떤 유형의 A/B 테스트를 만들 수 있는지 알아보겠습니다. 사실, 다른 플러그인처럼 웹사이트에 Nelio A/B Testing 플러그인을 설치하기만 하면 되며, 일단 설치되면 다른 도구 사용법을 배우지 않고도 사용할 수 있습니다.

따라야 할 단계는 다음과 같습니다.

• 생성할 테스트 유형 선택
• 테스트 변형을 정의합니다.
• 전환 목표 및 액션 정의
• 또는 세분화를 적용할지 여부를 정의합니다.
• 테스트 실행 및 진행 상황 분석
• 승리한 대안을 최종으로 적용

생성할 테스트 유형 선택

모든 유형의 테스트를 생성하려면 먼저 표시된 목록에서 생성하려는 테스트 유형을 선택합니다.

생성하려는 A/B 테스트 유형을 선택한 후에는 웹사이트에서 실행할 테스트의 주요 특성을 정의해야 합니다.

테스트 변형 정의

우선, 각각에 대해 테스트할 요소를 선택하고 해당 변형을 정의해야 합니다.

페이지의 A/B 테스트

아주 간단한 예를 살펴보겠습니다. Elementor 페이지의 새 이미지를 사용하여 더 많은 사람들이 도구에 대한 더 많은 정보에 관심을 갖게 되어 클릭 유도문안 버튼을 클릭하게 될 것이라고 가정해 보겠습니다.

페이지 테스트 생성을 선택하면 WordPress 편집기에 테스트를 편집해야 하는 페이지가 표시됩니다.

테스트 이름을 "Testing Different Images(다른 이미지 테스트)"로 지정하고 테스트할 페이지(이 경우 홈 페이지)를 선택하기만 하면 됩니다.

다음으로 이름만 지정하여 원본 페이지의 변형인 "변형 B"를 만듭니다. 원하는 경우 새 변형 버튼을 클릭하여 가능한 한 많은 변형을 생성할 수 있습니다. 기본적으로 생성된 각 변형은 이전에 선택한 원본 페이지의 정확한 복사본이 됩니다. 수정하려면 편집 링크를 클릭하십시오.

기본 WordPress 플러그인을 사용할 때의 이점은 일반적으로 페이지를 만드는 데 사용하는 것과 동일한 시각적 편집기를 사용하여 A/B 테스트의 변형을 직접 수정할 수 있다는 것입니다. 이 경우 편집기는 분명히 Elementor입니다. 즉, 편집 링크를 클릭하면 새 변형이 Elementor에 로드되고 원하는 대로 변경할 수 있습니다.

페이지를 조정하고(이 예에서는 이미지만 변경함) 초안으로 저장합니다.

그게 다야! 첫 번째 변형을 만들었습니다!

게시물의 A/B 테스트

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

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

커스텀 포스트 타입의 A/B 테스트

웹사이트에서 생성한 강좌, FAQ 등 페이지 및 게시물과 다른 맞춤형 게시물 유형의 A/B 테스트를 생성하려는 경우 Nelio A/B Testing으로 수행할 수도 있습니다. . 이 유형의 테스트를 수행할 것인지 선택하기만 하면 됩니다. 이제 선택기를 통해 원하는 콘텐츠 유형과 테스트하려는 특정 콘텐츠를 선택할 수 있습니다.

헤드라인의 테스트 A/B

웹사이트를 분석할 때 독자가 웹사이트의 내용을 읽도록 하는 것이 어렵다는 것을 알게 된다면 아마도 헤드라인이 그다지 매력적이지 않기 때문일 것입니다. 매우 흥미로운 테스트는 헤드라인 테스트입니다. 즉, 게시물 제목, 발췌문 및 추천 이미지의 다른 버전을 시도하고 어떤 조합이 더 많은 독자를 확보하는지 알아내십시오.

Nelio A/B Testing을 사용하면 이러한 유형의 테스트를 수행하기 위해 Elementor로 이 정보를 편집할 필요가 없습니다. 플러그인 자체를 사용하면 테스트를 편집할 때 직접 수행할 수 있습니다. 새로운 헤드라인 테스트 생성을 선택하면 Nelio A/B Testing은 블로그에 있는 게시물의 헤드라인을 보여줍니다.

테스트하려는 헤드라인의 게시물을 선택하고 게시물을 편집할 필요 없이 원하는 변형을 생성합니다.

WooCommerce 제품 요약 A/B 테스트

WooCommerce 제품 요약 A/B 테스트는 특정 유형의 WooCommerce 테스트로 이름, 간단한 설명 및 제품 이미지의 다양한 조합을 테스트하여 해당 제품을 더 많이 구매하는 제품을 찾아냅니다. 이 유형의 테스트를 만드는 방법은 위에서 본 헤드라인의 방법과 매우 유사합니다.

이 유형의 테스트를 생성하도록 선택한 경우 Nelio A/B Testing은 사용 가능한 제품을 드롭다운에 표시하며 생성하려는 변형만 수정하면 됩니다. 테스트 편집기. 제품을 수정할 필요가 없습니다.

테마 A/B 테스트

웹사이트를 분석한 후 웹사이트에 보다 근본적인 변화가 필요하다는 가설이 있다면 테마를 변경하는 것이 필요할 수 있습니다. 그러나 깊이 들어가기 전에 데이터로 어떤 테마가 더 나은지 확인할 수 있는 A/B 테스트를 생성한다는 것을 기억하십시오.

Nelio A/B Testing을 사용하면 테마 테스트를 쉽게 만들 수 있습니다. 테스트할 테마만 워드프레스에 설치하고 A/B 테마 테스트에서 선택해야 합니다.

Elementor로 가지고 있는 페이지가 하나씩 완전히 사용자 정의된 경우 테마 변경이 미칠 수 있는 영향은 최소화됩니다.

템플릿의 A/B 테스트

웹 사이트의 테마를 변경하는 대신 웹 사이트의 일부 페이지에 대해 다른 템플릿을 만들 수 있습니다. Elementor 페이지 빌더로 이전에 디자인한 다음 A/B 테스트를 수행하십시오.

항상 그렇듯이 특정 템플릿을 사용하는 모든 페이지에서 템플릿 변형으로 사용하려는 다양한 템플릿 변형을 선택하는 것만 큼 쉽습니다.

메뉴의 A/B 테스트

Elementor를 사용하면 WordPress에서 직접 탐색 메뉴 구조를 만들 수 있으며 Elementor의 Pro 버전을 사용하는 경우 탐색 메뉴 위젯을 사용하여 메뉴를 만들 수도 있습니다. 기존 방식으로 생성한 경우 A/B 테스트 생성은 현재 보유하고 있는 메뉴 중 하나를 선택하고 원하는 변형을 생성하는 것만 큼 간단합니다.

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

Elementor Pro 버전 탐색 메뉴 위젯으로 메뉴를 생성한 경우 테스트 생성은 아래 설명된 대로 위젯의 A/B 테스트를 생성하는 것과 동일합니다.

위젯의 A/B 테스트

WordPress(위에서 설명한 탐색 메뉴 포함)에서 위젯 테스트를 생성해야 하는 경우 위젯 테스트 생성을 선택한 후 새 위젯 변형의 이름을 표시하고 편집 링크를 클릭하기만 하면 됩니다.

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

CSS의 A/B 테스트

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

새 규칙을 정의했으면 게시를 클릭하면 테스트의 CSS 변형이 생성됩니다.

전환 목표 및 액션 정의

테스트의 변형을 정의한 후 다음 단계로 이동합니다. 생성한 A/B 테스트는 더 많은 판매, 더 많은 구독자 또는 더 많은 가격 페이지 방문과 같은 일부 전환 목표를 테스트하기 위한 아이디어로 수행되었습니다. 등. 이러한 목표는 방문자가 특정 작업을 수행할 때 충족됩니다. 예를 들어 사용자가 웹사이트에서 특정 양식을 완료하면 더 많은 구독자를 확보하거나 사용자가 버튼을 클릭할 때 가격 페이지를 더 많이 방문할 수 있습니다.

Nelio A/B 테스팅에서 전환 목표와 액션을 어떻게 정의합니까?

'전환 목표 및 작업' 섹션에서 +새로 만들기 링크를 클릭하여 원하는 만큼 목표를 추가할 수 있으며 선택적으로 목표에 이름을 추가할 수 있습니다. Nelio A/B Testing은 각 변형이 정의한 각 목표에 얼마나 효과적인지에 대한 정보를 보여줍니다.

각 목표에 대해 방문자를 추적하기 위한 다양한 유형의 전환 액션이 있습니다. 예를 들어 사용자가 특정 페이지에 액세스할 때, 웹사이트의 특정 요소를 클릭할 때 또는 문의 양식을 제출할 때를 모니터링할 수 있습니다. 관심 있는 작업 버튼을 클릭하고 설정합니다. 예를 들어 페이지 방문 전환 액션을 클릭하고 드롭다운 양식에서 가격 책정 페이지 를 선택하거나 양식 제출 을 선택하고 추적하려는 양식 등을 선택할 수 있습니다.

트래픽 세분화

많은 A/B 테스트 도구의 흥미로운 기능 중 하나는 트래픽을 세분화할 수 있다는 것입니다. 즉, 특정 방문자만 테스트에 참여하도록 설정할 수 있습니다. 예를 들어 국가별, 시간별, 언어별, 브라우저별, 장치별 등입니다. Nelio A/B Testing으로 트래픽 분할을 구현하는 방법에 대한 자세한 내용을 알고 싶다면 Antonio가 이 기사에서 자세히 설명합니다.

생성된 테스트 실행 및 진행 상황 분석

이제 끝입니다. 버튼을 눌러 테스트를 시작하고 진행 상황을 분석하기만 하면 됩니다. 위에서 언급한 것과 같은 도구를 사용할 때 도구를 실행하거나 데이터의 통계적 신뢰도를 제어해야 하는 시간에 대해 걱정할 필요가 없습니다.

각 변형의 페이지에 대한 총 전환수 및 방문수를 확인할 수 있습니다. 또한 원본 버전과 비교하여 각 변형의 개선(또는 악화) 비율을 볼 수 있습니다.

성공적인 대안 적용

잠시 후 플러그인은 어떤 변형이 가장 좋은지 알려줍니다(물론 다른 변형보다 더 나은 변형이 있는 경우).

일단 하나가 생기면 남은 것은 그것을 결정적으로 만드는 것뿐입니다. 기본 WordPress 플러그인인 Nelio A/B Testing을 사용하면 우승한 변형을 적용하려면 버튼을 클릭하기만 하면 적용 됩니다. 그리고 그게 다야! 우승한 변형을 다시 만들 필요가 없습니다. 이미 WordPress에 있습니다!

그리고 짜잔, 이제 입증된 데이터를 사용하여 이전보다 더 나은 새로운 웹사이트 디자인을 갖게 되었습니다.

지금 Elementor에서 A/B 테스트를 시작하세요.

Elementor에서 A/B 테스트를 생성하는 방법에 대한 이 완전한 가이드를 통해 자신의 웹사이트 전환 최적화 프로젝트 계획을 시작할 준비를 완전히 갖추게 될 것입니다. A/B 테스트는 웹사이트의 전환율을 높이는 데 매우 중요합니다. 또한 Nelio A/B Testing과 같은 도구를 사용하면 명확한 기준 없이 자신의 직관에만 기반하여 최적화 프로그램을 수행하는 것과 관련된 많은 위험을 줄일 수 있습니다..

이 가이드가 유용하다고 생각되면 소셜 네트워크에서 공유하고 질문, 의견 또는 추가 정보가 필요한 경우 주저하지 말고 이 기사 끝에 의견을 남겨주십시오.

Unsplash에서 Syd Wachs의 추천 이미지 .