단일 페이지 애플리케이션(SPA)에서 실험을 실행할 때 VWO가 마찰 없는 방문자 경험을 만드는 방법

동적 웹 사이트에 대한 VWO의 기본 지원을 통해 방문자를 위한 원활한 경험을 구축할 때 실험을 쉽게 만드는 방법에 대해 자세히 알아보세요.

많은 웹 사이트는 기존의 정적 웹 사이트에 비해 주요 이점이 거의 없기 때문에 SPA(단일 페이지 응용 프로그램)로 구축됩니다. 동적 웹 사이트는 빠르고 컴팩트하며 반응이 좋습니다. 이러한 웹 사이트를 통해 사용자가 보는 콘텐츠를 최적화하여 매력적이고 독특한 경험을 만들 수 있습니다. 개발 팀으로부터 웹 사이트가 React, Vue, AngularJS, Ember 또는 Backbone을 사용하여 구축되었다는 소식을 들었다면 아마도 SPA로 작업하고 있을 것이며 이 기사는 귀하와 관련이 있을 것입니다.

이 기사에서는 VWO에서 SPA 테스트에 대한 내장 지원을 통해 동적 웹사이트에 대한 실험을 효과적이고 쉽게 수행하여 사용자가 웹사이트 경험 최적화 노력에만 집중할 수 있도록 하는 방법에 대해 설명합니다.

하지만 먼저, 당신을 여기로 데려온 문제에 대해 먼저 이야기합시다.

동적 웹사이트에서 실험을 실행할 때의 과제

SPA에서 실험을 실행할 때 방문 페이지에 대한 변경 사항이 최종 사용자에게 표시되지 않기 때문에 여기에 있는 것 같습니다. 결과적으로 원하는 만큼 빨리 아이디어를 테스트하고 검증할 수 없으며 좌절감을 느끼게 됩니다.

먼저 SPA가 기존 웹사이트와 다르다는 것을 이해합시다. 전체 웹 페이지는 누군가가 기존 웹사이트를 방문할 때마다 로드됩니다. 그러나 SPA에서는 페이지의 일부 섹션만 업데이트됩니다. 이는 SPA에서 웹 페이지의 모양과 느낌을 구성하는 HTML, CSS, 스크립트 등과 같은 리소스가 한 번만 로드되기 때문입니다.

사용자가 웹 페이지의 다른 부분과 상호 작용하는 방식에 따라 페이지의 특정 섹션에 표시되는 내용은 사용자의 작업에 대한 응답으로 동적으로 변경됩니다. 사용자가 버튼을 클릭하면 팝업이 열립니다. 이 팝업은 성능에 영향을 주지 않고 사용자 상호 작용에 따라 프레임워크에 의해 동적으로 변경됩니다. SPA에 동적 변경이 있는 몇 가지 추가 예는 다음과 같습니다.

• 세부 정보를 보기 위해 확장할 수 있는 검색 결과 목록의 항목입니다.
• 양식에서 방문자가 드롭다운에서 미리 정의된 값을 선택하는 경우에만 일부 필드가 페이지에 나타납니다.
• 웹사이트는 사용자가 사용해야 할 때마다 다시 로드되는 캘린더, 색상 선택기 등과 같은 일부 구성 요소를 사용합니다.

이것이 사용자 경험에는 좋지만 웹 페이지에서 이러한 동적 요소(예: 검색 결과 목록, 드롭다운, 위젯, 팝업, 배너 등)를 변경하여 테스트 캠페인을 실행하는 것은 어렵습니다. 이는 웹 사이트에서 동적으로 변경될 때마다 구성 요소에 대한 수정 사항을 적용해야 하기 때문입니다.

이런 식으로 생각하십시오. 웹 페이지에서 테스트를 실행하고 있습니다. 웹 페이지가 로드될 때마다(사용자가 페이지를 방문하여) 페이지가 위에서 설명한 대로 동적 요소를 생성할 때마다 SPA 프레임워크는 원래 상태를 표시합니다(테스트의 일부로 표시하려는 변형과 다름).

필요한 것은 테스트 변형이 원본 보기를 대체하여 사용자가 보고 싶은 변형을 볼 수 있도록 하는 실험 플랫폼입니다. 따라서 SPA에서 테스트를 설정하는 동안(팝업 상자 내에서 콘텐츠를 테스트한다고 가정) 테스트 컨트롤 및 변형이 다음과 같이 보일 것으로 예상합니다.

그러나 SPA 지원이 없으면 변형에 대한 변경 사항이 제어로 되돌아가 둘 다 동일하게 보입니다. 다음과 같습니다.

이것은 일어나고 있는 일의 단순화된 버전일 뿐입니다. 화면 뒤에서 일어나는 일을 기술적으로 이해하는 데 관심이 있다면 계속 읽으십시오. 그렇지 않으면 기사의 다음 섹션으로 건너뛸 수 있습니다.

GatsbyJS, Next.js, ReactJS 등과 같은 일부 웹 사이트 프레임워크는 서버 측 렌더링을 사용하고 로드해야 할 원본 웹 페이지의 스냅샷을 저장합니다. 따라서 테스트 목적으로 페이지의 요소를 수정하면 프레임워크는 변경 사항을 '문제'로 감지하고 저장된 스냅샷에 표시되는 원래 상태로 페이지를 되돌립니다. 이것은 차례로 A/B 테스트를 방해합니다.

둘째, React, Gatsby, Next.js, Vue.js, Angular 등과 같은 최신 프레임워크는 상태 기반 렌더링의 개념을 사용합니다. 예를 들어 React에서 A/B 테스트 변형으로 인해 상태 중 하나에서 변경이 구현될 때마다 웹사이트의 인터페이스는 자동으로 원래 형식으로 다시 로드되므로 사용자는 변형을 볼 수 없습니다. 이는 웹사이트 방문자에게 차선의 경험을 제공합니다.

VWO가 단일 페이지 응용 프로그램에 대한 실험을 손쉽게 수행하는 방법

문제에 대해 논의했으므로 이제 솔루션에 대해 이야기해 보겠습니다. VWO Testing의 일부인 Visual Editor에서 VWO의 고급 기본 SPA 지원을 통해 실험에서 수정한 사항이 SPA에 적용되어 캠페인의 신뢰성을 보장하고 방문자에게 원활한 경험을 제공할 수 있습니다.

1. 웹사이트에서 동적 요소 테스트

이전 섹션에서 동적 요소를 정의했지만 구체적인 예를 들어 자세히 살펴보겠습니다. 전자 상거래 웹 사이트가 있다고 가정하십시오. '장바구니 페이지'에서 'X'(닫기) 버튼을 클릭하면 팝업으로 경고가 나타납니다. 이제 실행 가능한 메시지와 클릭 유도문안이 사람들이 장바구니 페이지를 닫는 것을 방지할 수 있는지 확인하기 위해 작업 상자에서 사본 변경 사항을 테스트하려고 합니다. 경고 상자는 처음에는 웹사이트 코드에 나타나지 않지만 방문자가 'X'(닫기) 버튼을 클릭하면 SPA 프레임워크에 의해 추가됩니다. 여기에서 테스트를 실행 중인 팝업을 여는 버튼을 대상 요소라고 합니다.

VWO는 테스트하려는 변경 사항이 로드되는 즉시 팝업에 적용되도록 합니다. 버튼 클릭으로 설정을 활성화하기만 하면 됩니다. 이 설정에 대한 자세한 내용은 기술 자료 문서에서 읽을 수 있습니다.

VWO는 변경 사항이 올바르게 적용되도록 어떻게 보장합니까?

쉬운.

VWO는 페이지 요소(비디오, 이미지, 표, 섹션 등)에서 언제든지 변경 사항을 확인합니다. 따라서 대상 요소(위의 예에서 닫기 'X' 버튼)가 로드되면 VWO가 이를 감지하고 변형에서 수정한 내용을 적용합니다. 이것은 웹 페이지가 다시 로드되지 않은 경우에도 발생하지만 사용자가 웹 사이트의 섹션과 상호 작용하기만 하면 됩니다.

약간의 기술을 습득하고 더 자세히 살펴보겠습니다. 기술적인 세부 사항이 적합하지 않은 경우 이 단계를 건너뛰고 다음 단계로 이동할 수 있습니다.

동적 웹 사이트에서는 사용자 행동에 따라 요소가 추가, 제거 또는 수정됩니다. DOM 트리는 모든 웹사이트 구성요소(버튼, 배너, 팝업, 위젯 등)의 저장소와 같으며 웹사이트의 현재 상태에 대한 스냅샷을 유지합니다.

VWO의 라이브러리는 VWO가 SPA의 DOM 트리 변경 사항을 관찰할 수 있도록 하는 브라우저 인터페이스인 Mutation Observer를 사용합니다. 이렇게 하면 페이지에서 추가, 제거 또는 수정된 새 요소를 감지하는 데 도움이 됩니다. 이러한 경우 VWO는 요소에 변경 사항을 자동으로 적용합니다. 따라서 요소가 동적으로 로드될 때마다 방문자에게 표시되기 전에 변경 사항이 적용됩니다. 이렇게 하면 캠페인의 안정성이 향상되어 변형의 변경 사항이 완전히 적용됩니다.

VWO는 프레임워크 렌더링으로 인해 방해를 받는 변경 사항을 어떻게 관리 합니까?

VWO는 프레임워크 렌더링이 완료될 때까지 CTA 버튼을 숨긴 상태로 유지합니다. VWO는 렌더링이 완료되었는지 반복적으로 확인합니다. 프레임워크 렌더링이 완료되면 VWO 캠페인이 실행되기 시작합니다.

이러한 설정에 대한 자세한 내용은 기술 자료 문서에서 읽을 수 있습니다.

2. 웹사이트의 다른 페이지 요소 테스트

페이지가 로드되면 최신 SPA 프레임워크는 웹사이트가 로드될 때마다 수정된 요소를 원래 상태로 되돌립니다. 따라서 페이지를 테스트하는 경우 모든 수정 사항이 원본으로 되돌아갑니다. 동적 요소뿐만 아니라 페이지의 모든 요소에 대해 VWO는 SPA 프레임워크로 테스트하는 문제를 해결하기 위해 수행한 변경 사항을 추적합니다. 이러한 변경 사항을 웹 페이지에 적용하는 동안 VWO는 테스트에 의해 페이지에서 이루어진 모든 변경 사항(DOM 노드의 삽입, 삭제 및 수정)을 감지하고 다시 적용하여 사용자 경험의 규칙성을 보장합니다.

VWO에서 이 개선 사항을 사용하려면 명시적인 작업이 필요하지 않습니다. 이것은 웹사이트가 구축된 프레임워크와 상관없이 Visual Editor로 구축된 모든 VWO 캠페인에 사용할 수 있는 내장 기능입니다.

VWO Visual Editor가 처리하는 변경 사항의 몇 가지 사용 사례를 살펴보겠습니다.

1. 전자상거래 웹사이트에서 보조 CTA 버튼(예: "위시리스트에 추가")을 제거하여 이러한 변경이 기본 CTA(예: "장바구니에 추가")의 클릭 수에 영향을 미치는지 테스트한다고 가정해 보겠습니다. 웹사이트에서 요소를 삭제하는 테스트 사용 사례입니다. 버튼을 삭제하더라도 React와 같은 프레임워크에서 생성한 가상 DOM에 유지되며 웹사이트가 로드될 때 오류가 발생합니다.

2. 이제 전자 상거래 웹 사이트에 '지금 제출' 버튼 외에 방문자의 이메일 주소를 캡처하는 텍스트 입력 상자를 표시하는 등록 흐름이 있다고 가정합니다. 텍스트 입력 상자의 모양과 느낌을 변경하면 이와 연결된 웹 사이트의 스타일 구성 요소가 변경됩니다. VWO의 Visual Editor는 최신 적용된 변경 사항이 사용자에게 표시되도록 합니다. SPA에서 양식 필드를 변경하는 방법을 살펴보고 변형에 대해 샘플링된 방문자가 컨트롤을 보는 대신 변경 사항을 볼 수 있는지 확인하십시오.

단일 페이지 애플리케이션에 VWO를 사용하는 방법은 무엇입니까?

SPA에 VWO를 사용하려면 웹사이트의 헤드 섹션에 VWO SmartCode를 추가하고 SPA 웹사이트에 대한 기본 지원을 즐기기만 하면 됩니다.

이렇게 간단한 통합으로 바로 시작할 수 있습니다. 무료 평가판에 등록하거나 VWO의 기능을 탐색하거나 제품 전문가에게 데모를 요청하십시오. 또한 흥미로운 최신 제품 업데이트에 대해 자세히 알아볼 수 있습니다.