WordPress 블록 패턴으로 A/B 테스트를 빠르게 생성

게시 됨: 2021-09-02

이전 게시물에서 논의한 바와 같이 WordPress 5.8 및 곧 출시될 패턴 디렉토리를 통해 WordPress 블록 패턴이 추진력을 얻고 있습니다. 우리가 블록 패턴에 대해 가장 좋아하는 점은 디자인 관점에서 페이지나 게시물에 다른 섹션을 추가하기 위한 단일 단위로 의미가 있다는 것입니다.

예를 들어, 신뢰성을 높이고 웹사이트 방문자의 신뢰를 얻으려면 제품의 주요 기능을 강조하는 섹션, 고객의 로고가 포함된 섹션, 하나 이상의 사용 후기 또는 추천을 포함하는 섹션을 포함할 수 있습니다. 서비스에 대한 리뷰 등. 그리고 각 섹션의 디자인을 위해 선택할 수 있는 다양한 패턴 레퍼토리를 갖는 것이 완벽합니다.

홈페이지 섹션
홈페이지의 다른 섹션.

페이지 레이아웃 단위로 이해되는 패턴도 A/B 테스트에 이상적인 후보입니다. A/B 테스트를 생성하여 웹사이트에서 전환을 개선하는 데 어떻게 도움이 되는지 아래에서 살펴보겠습니다.

A/B 테스트로 웹 전환 개선

웹 전환은 웹사이트를 방문하는 모든 사람이 수행할 것으로 예상되는 모든 작업을 의미합니다. 제품 세부정보 또는 가격 페이지 방문, 뉴스레터 구독, 문의, 기사 읽기, 내 제품 구매 등 전환율은 방문 수와 관련하여 달성된 전환 수입니다. 즉, 웹사이트에 일일 총 100번의 방문이 있고 그 중 2번 제품을 구매하는 경우 웹사이트의 전환율은 2% 입니다.

전환율을 높이는 데 도움이 되는 도구는 A/B 테스트입니다. A/B 테스트는 개선가설을 바탕으로 웹상에서 변경을 제안하고 더 잘 작동하는지 확인하는 것으로 구성됩니다. 예를 들어, 방문 페이지의 첫 번째 블록을 더 많은 호기심을 유발하는 메시지로 변경하고, 가격 페이지에 다른 제품이 표시되는 순서를 변경하고, 게시물 끝에 제품 프로모션을 추가하는 등의 작업을 수행합니다.

기술적인 관점에서 A/B 테스트는 동일한 웹 페이지의 두 개 이상의 버전 또는 변형(메뉴 또는 테마 등이 될 수도 있음)을 다른 웹 방문자 집합에 표시하고 어떤 변형이 생성하는지 비교하는 것으로 구성됩니다. 더 많은 전환.

A/B 테스트 작동 방식을 보여주는 이미지: 트래픽이 분할되고 각 세그먼트에 하나의 변형이 표시되며 어떤 변형이 더 많은 전환을 얻었는지 확인합니다.
가장 간단한 형태의 A/B 테스트는 방문자의 50%가 A 디자인을 보고 나머지 50%가 B 디자인을 볼 수 있도록 사이트에 대한 트래픽을 두 그룹으로 무작위로 분할하는 것을 제안합니다. 각 그룹의 사용자 반응을 모니터링하여 각 그룹의 전환율을 계산할 수 있으며 둘 사이에 통계적으로 유의한 차이가 있는 경우 승자 디자인을 선언합니다.

위에서 논의한 예에서 이미 보았듯이 많은 경우에 생성하는 변형은 테스트된 페이지에서 섹션을 추가, 수정 또는 제거하는 것으로 구성됩니다. 이러한 이유로 우리는 블록 패턴의 개념이 생성 과정에서 특히 유용하다는 것을 알게 되었습니다. A/B 테스트.

생성 패턴을 사용한 A/B 테스트

당신이 만들 수 있지만 WordPress 웹 사이트에서 수동으로 A/B 테스트를 수행하는 경우 시장에서 사용 가능한 도구 중 하나를 사용하는 것이 좋습니다. 특히 블록 패턴을 최대한 활용하려면 A/B 테스트는 Nelio를 사용하는 것입니다. A/B 테스팅(무료 및 프리미엄(€29/월) 사용 가능)은 기본 WordPress 플러그인이므로 WordPress 블록 편집기와 완전히 통합됩니다.

생성하려면 Nelio를 사용한 A/B 테스트 WordPress 블록 편집기를 사용한 A/B 테스트, 따라야 할 단계는 다음과 같습니다.

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

이 가이드에서는 Nelio를 사용한 A/B 테스트 블록 편집기에서 A/B 테스트.

몇 가지 예를 통해 블록 패턴이 A/B 테스트; 특히 테스트 변형의 정의에서.

웹 사이트에서 수행하려는 세 가지 다른 테스트 예제를 가정해 보겠습니다.

예 1 : 한편으로는 Nelio 페이지에서 서비스의 이점을 보여주는 섹션을 변경하여 대체 디자인을 테스트하고 싶습니다.

당사 제품의 장점을 보여주는 페이지 섹션
당사 제품의 장점을 보여주는 페이지 섹션.

예 2 : 마찬가지로 동일한 페이지에서 평가 섹션의 대체 디자인을 테스트하고 어느 것이 더 매력적인지 확인하고 싶습니다.

Nelio 홈페이지 후기 섹션
Nelio 홈페이지의 후기 섹션.

예 3 : 모든 게시물의 끝에 행동 유도 섹션이나 배너를 추가하면 뉴스레터 구독자가 증가하는지 테스트하고 싶습니다. 이 게시물의 끝 부분에서 볼 수 있듯이 현재 블로그에는 댓글을 추가할 수 있는 섹션만 있습니다.

우리는 이것을 어떻게 생성합니까? A/B 테스트? Nelio와 같은 도구를 사용하면 몇 가지 추가 단계를 통해 해당 페이지의 디자인을 변경하는 것만큼 실제로 쉽습니다. 어떤 것을 보자…

생성하려는 테스트 유형 선택

만드는 것과 다르지 않다. 템플릿보다 페이지의 A/B 테스트. 변종 생성은 다르지만 Nelio와 같은 도구를 사용하면 큰 이점이 있습니다. WordPress의 고유한 A/B 테스트는 처음에 만들려는 테스트 유형을 선택하면 다음 단계가 WordPress 컨텍스트 내에서 완전히 직관적이라는 것입니다.

넬리오와 함께 A/B 테스팅, 가장 먼저 해야 할 일은 유형을 선택하는 것입니다. 만들고 싶은 A/B 테스트:

Nelio A/B Testing의 테스트 선택기
Nelio A/B Testing의 테스트 선택자.

테스트 유형을 선택하면 테스트 변형 생성이 WordPress 요소를 생성할 때와 정확히 동일하다는 것을 알 수 있습니다.

위의 예 1과 2에서 우리가 원하는 것은 페이지의 섹션을 변경하는 것이기 때문에 페이지 테스트를 생성하도록 선택할 것입니다. 예제 3에서 우리가 원하는 것은 게시물 끝에 섹션을 추가하는 옵션이므로 템플릿 테스트를 만드는 것이 더 합리적입니다.

테스트 변형의 정의

예 1 : 페이지 테스트를 수행하기로 선택한 후 테스트 유형에 이름을 지정하고 테스트를 수행할 페이지(컨트롤 페이지라고도 함)를 선택해야 합니다. 웹사이트에 게시한 페이지 목록에서 선택할 수 있습니다. 저희의 경우 저희 웹사이트의 메인 페이지입니다.

페이지 A/B 테스트의 변형 생성
페이지 변형 생성 Nelio를 사용한 A/B 테스트 A/B 테스트.

그런 다음 새 변형을 만들 수 있습니다. 기본적으로 컨트롤 페이지의 정확한 복사본이 됩니다. 변형의 편집 링크를 클릭하면 테스트 생성의 몇 가지 추가 속성과 함께 원하는 모든 변경을 수행하기 위해 이미 알고 있는 WordPress 블록 편집기가 있음을 알 수 있습니다.

페이지 테스트의 변형 수정
Nelio를 사용한 페이지 테스트 변형 버전 A/B 테스트.

원하는대로 변형의 디자인을 변경하려는 블록을 추가, 수정 및 삭제할 수 있습니다. 그러나 블록 패턴의 가장 큰 장점은 무엇입니까? 이제 예를 들어 이미지에 표시된 섹션의 디자인을 변경하는 것이 각 블록을 하나씩 만들고 편집하는 것보다 훨씬 쉽습니다. 간단히 패턴 추가 버튼을 클릭하면 가장 마음에 드는 디자인을 선택할 수 있습니다.

새 패턴 추가
새로운 패턴을 추가합니다.

이런 식으로 한 번의 클릭으로 디자인을 설정한 후에는 이미지를 미디어 라이브러리에 이미 있는 이미지로 바꾸고 원본 텍스트를 복사하여 붙여넣어 이 섹션의 모양을 변경하기만 하면 됩니다.

패턴을 사용하여 재설계된 섹션
패턴을 사용하여 재설계된 섹션.

예제 2 : 이 경우 테스트 유형에 대한 선택 프로세스는 이전 예제와 정확히 동일합니다. 페이지 테스트를 생성하기로 선택한 후 테스트에 이름을 추가하고 기본 페이지를 선택한 다음 새 변형을 생성합니다.

메인 페이지의 평가 섹션에서 새로운 A/B 테스트
새로운 메인 페이지의 평가 섹션에서 A/B 테스트.

그것을 편집할 때 전과 같이 우리는 우리가 선택할 수 있는 다양한 평가 섹션 디자인이 있다는 것을 알게 되었습니다.

평가 패턴 선택
평가 패턴을 선택합니다.

그리고 이전과 마찬가지로 이제 이미지를 교체하고 간단한 텍스트 복사 및 붙여넣기를 통해 이 섹션의 레이아웃을 빠르게 변경했습니다.

카드와 함께 표시되는 평가 섹션
카드와 함께 표시되는 평가 섹션.

예 3. 마지막 예에서 우리는 독자가 뉴스레터를 구독하도록 초대되는 섹션을 모든 게시물 끝에 포함하기를 원합니다. 이를 수행하기 위해 가장 쉬운 방법은 템플릿 테스트를 만들고 원하는 섹션이 포함된 새 템플릿 변형을 사용하는 것입니다. 템플릿 테스트의 경우 테스트를 생성하기 전에 다른 템플릿이 생성되어 있어야 합니다.

WordPress 5.8에서 전체 사이트 편집의 새로운 기능을 설명할 때 말했듯이 이제 새 템플릿을 만들거나 게시물 또는 페이지의 템플릿 편집기에서 기존 템플릿을 편집할 수 있습니다. 따라서 새 템플릿을 만들고 템플릿 편집기에서 직접 위에서 수행한 것과 유사한 패턴을 선택하고 추가할 수 있습니다.

템플릿 편집기에서 패턴 추가
템플릿 편집기에서 패턴을 추가합니다.

삽입된 패턴에 대한 변경은 이 새 섹션을 처음부터 만든 경우보다 훨씬 빠릅니다.

새 템플릿의 디자인
새 템플릿의 디자인입니다.

이제 새 템플릿 테스트를 만들 수 있습니다. 먼저 템플릿 테스트를 생성할 것을 선택한 다음 변형 A와 B에 대해 표시할 템플릿을 선택합니다.

A/B 테스트를 구성하는 템플릿 선택
구성하는 템플릿 선택 A/B 테스트.

그게 다야, 우리는 이미 각 예제에 대한 컨트롤 버전과 그 변형을 만들었습니다. 여기에서 다음 단계는 다양한 유형의 테스트에 대해 동일합니다.

전환 목표 및 액션 정의

테스트의 변형을 정의한 후 다음 단계는 전환 목표를 정의하는 것입니다. 어떤 목적으로 이 테스트를 만들고 있습니까? 더 많은 판매, 더 많은 구독자 또는 더 많은 가격 페이지 방문을 얻으려면? 이러한 목표는 방문자가 특정 작업을 수행할 때 충족됩니다.

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

Nelio A/B 테스트를 통한 개인화된 콘텐츠의 A/B 테스트에서 전환 목표의 정의.
전환 목표의 정의 Nelio를 사용한 A/B 테스트 A/B 테스트.

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

트래픽 세분화

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

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

이제 끝입니다. 버튼을 눌러 테스트를 시작하고 진행 상황을 분석하기만 하면 됩니다. 넬리오 A/B 테스팅은 트래픽을 두 그룹으로 분할하여 각각에 하나의 변형 또는 다른 변형이 표시되도록 처리합니다. 넬리오 사용시 A/B 테스팅을 사용하면 테스트를 실행해야 하거나 데이터의 통계적 신뢰도를 제어해야 하는 시간에 대해 걱정할 필요가 없습니다. 각 변형에 대한 총 전환수 및 페이지 조회수를 확인할 수 있습니다. 또한 원본 버전과 비교하여 각 변형의 개선률을 확인할 수 있습니다.

A/B 테스트에서 각 변형의 전환율 그래프
에서 각 변형의 전환율 A/B 테스트.

승자 대안 적용

마지막으로 테스트에서 승리한 변형을 얻은 경우 Nelio A/B 테스팅을 사용하면 클릭 한 번으로 해당 변형을 웹사이트의 최종 버전으로 적용할 수 있습니다.

A/B 테스트에서 성공적인 대안 적용
에서 승리한 대안을 적용하십시오. A/B 테스트.

즉, 페이지 테스트의 처음 두 가지 예에서 테스트한 변형이 승자이면 원본 콘텐츠를 승자의 콘텐츠로 대체합니다. 템플릿 테스트의 경우 테스트가 끝나면 간단히 원하는 페이지/게시물에서 템플릿을 전환해야 합니다.

결론

A/B 테스트는 웹사이트에서 전환을 최적화하는 최고의 도구입니다. WordPress는 매우 빠르게 발전하고 있으며 WordPress 5.8에 도입된 새로운 기능과 함께 Nelio A/B의 경우와 같이 블록 편집기와 완전히 통합된 기본 WordPress 도구를 사용하면 A/B 테스트를 훨씬 더 쉽게 생성할 수 있습니다. 테스트.

다른 섹션을 만들고 디자인하도록 설계된 패턴은 이 게시물에서 본 것처럼 페이지 및 게시물의 섹션을 추가하고 변경할 수 있을 뿐만 아니라 템플릿도 쉽게 추가할 수 있다는 점을 기억하십시오. WordPress의 다음 새로운 기능을 기대하십시오!

Unsplash에서 Raimond Klavins의 추천 이미지