단일 페이지 애플리케이션(SPA)에서 A/B 테스트를 실행하기 위한 모범 사례

이 기사는 단일 페이지 애플리케이션에 대한 A/B 테스트 시리즈의 2부입니다.

1부에서는 SPA(단일 페이지 애플리케이션)의 개념을 소개하고 SPA가 인기를 얻고 있는 이유를 보여주고 단일 페이지 앱에서 사용할 수 있는 최고의 A/B 테스트 플랫폼 10가지를 살펴보았습니다.

그러나 SPA에서 A/B 테스트를 실행하는 것은 작동 방식 때문에 약간 까다로울 수 있습니다. 이 기사에서는 SPA에서 실험을 실행하는 방법과 따라야 할 몇 가지 모범 사례에 대한 실질적인 조언을 제공합니다.

SPA 프레임워크의 진화

SPA는 새로운 개념이 아닙니다.

2002년의 특허에는 최신 버전의 SPA와 유사한 기술이 설명되어 있습니다.

그러나 2006년부터 네트워크 표준으로 사용되고 있는 AJAX 기술로 구현이 쉬워졌다. 다양한 클라이언트 측 기술을 사용하여 비동기 웹 응용 프로그램을 만들기 위한 일련의 전략입니다. 이 소프트웨어는 AJAX 덕분에 페이지의 현재 상태나 콘텐츠 표시 모드를 변경하지 않고 사용자 경험을 방해하지 않고 백그라운드에서 서버에서 데이터를 보내고 받을 수 있습니다.

반면 AJAX의 도입은 SPA 도입의 분수령이 되지 못했습니다.

SPA의 인기 상승은 최근 몇 년 동안 프론트 엔드의 급속한 성장과 UX의 관련성 증가에 힘입은 더 큰 추세의 일부입니다.

SPA는 Java 애플릿 또는 Flash 프로그램과 "순수한" JavaScript 또는 jQuery 라이브러리를 사용하여 처음 만들어졌습니다.

그러나 Angular.js, React.js 및 Vue.js와 같은 프론트엔드 프레임워크(모두 비교적 새로운 JavaScript 프레임워크임)는 개발을 도왔습니다.

SPA 아키텍처 이면의 기술은 무엇입니까?

SPA는 본질적으로 HTML5 및 CSS3를 지원하는 JavaScript 프레임워크입니다.

그러나 이러한 구성 요소를 사용하여 몇 가지 고유한 라이브러리와 프레임워크가 등장하여 개발 세계에서 채택되었습니다.

1. 앵귤러

Google에서 개발한 Angular는 3가지 프레임워크 중 가장 성숙하고 가장 오래된 프레임워크로, 자세한 설명서는 사용할 수 있지만 학습 곡선이 가파릅니다.

원래 MVC(Model View Controller) 아키텍처에 내장되어 있지만 대부분은 여러 개발자가 동일한 앱 섹션에서 개별적으로 작업할 수 있도록 하는 MVVM(Model-View-ViewModel)을 사용합니다. 새 버전으로 업데이트할 때 몇 가지 마이그레이션 문제가 있을 수 있지만 Angular는 확장할 때 가장 안정적이며 크고 복잡한 프로젝트에 적합합니다.

TypeScript 덕분에 Angular는 대규모 개발자 팀에게 환상적인 선택이며 일부 회사는 이미 다른 제품에 이 기술을 사용하고 있습니다.

GitHub에서는 많은 기여자와 함께 확립되고 성숙한 프레임워크입니다.

Google과 Google 드라이브 및 Gmail과 같은 Google 제품과 Wix는 Angular for SPA 사용자 중 하나입니다.

2. 리액트.js

React는 Facebook에서 개발하여 오픈 소스로 만들었습니다. 주로 사용자 인터페이스(Facebook, WhatsApp 및 Instagram)를 만드는 데 사용되었습니다.

가벼운 코드 크기와 다른 프레임워크와 원활하게 통합되는 기능으로 인해 인기가 높습니다. 또한 버전 간 마이그레이션을 위한 간단한 방법이 있습니다. (보통 원클릭 마이그레이션).

애플리케이션 구성 요소의 상태를 관리하기 위해 Redux와 함께 자주 사용됩니다. Uber는 또한 제품에 React.js 기술을 사용합니다.

React는 JavaScript 프론트엔드 프레임워크를 막 시작하는 사람들과 신생 기업 및 애자일 개발자에게 적합합니다. 또한 이 JavaScript 라이브러리는 다양한 다른 프레임워크 및 기술과의 귀중한 통합 옵션을 제공하므로 대규모 환경에서 프로젝트를 수행할 때 매우 유용합니다. 모든 SPA 프레임워크 중에서 React는 개발자가 잠재적인 문제를 해결하는 데 도움이 되는 GitHub에서 가장 많은 기여를 했습니다.

3가지 프레임워크 중 학습 곡선이 가장 쉬우며, 많은 확장성을 필요로 하는 기한이 짧은 프로젝트에 가장 적합합니다.

3. 뷰.js

Vue.js는 Facebook이나 Google과 같은 주요 회사의 소유가 아니지만 특히 아시아에서 새로운 사용자와 함께 여전히 보조를 맞추고 있습니다. 위의 SPA 프레임워크 중 최신 버전으로, 전 Google 직원인 Evan You가 2014년에 설립했습니다. 많은 문서가 일반적으로 중국어로 되어 있지만 여전히 교육 소스가 있습니다.

프레임워크는 매우 가볍고 고성능 애플리케이션을 만드는 데 사용할 수 있습니다.

대부분의 개발자는 이러한 프레임워크에서 생성하는 데 큰 문제가 없으며 결정은 실제로 각 프레임워크의 주요 기능으로 귀결됩니다.

Vue.js는 현재 Baidu, GitLab 및 Alibaba와 같은 기업에서 필요에 따라 사용하고 있습니다.

단일 페이지 앱 작동 방식

SPA는 단순한 디자인을 가지고 있습니다. 클라이언트 측 및 서버 측 렌더링 기술이 모두 사용됩니다.

비 SPA 웹 사이트에서 브라우저에 URL을 입력하면 브라우저는 서버에 요청을 보내고 응답으로 HTML 페이지를 받습니다.

SPA 웹사이트에서 서버는 초기 요청의 HTML 문서만 전달하고 후속 요청의 JSON 데이터만 전달합니다. 이는 SPA가 전체 웹사이트를 다시 로드하지 않고 현재 페이지의 내용을 다시 작성함을 나타냅니다.

간단히 말해서 SPA는 다음과 같이 작동합니다.

1. 클라이언트는 먼저 서버와 연결을 설정하고 주로 HTML 코드, CSS 및 응용 프로그램 논리를 실행하는 데 필요한 모든 스크립트를 포함하는 JavaScript 번들로 구성된 페이지 콘텐츠를 얻습니다.
2. 사용자의 작업은 관련 JavaScript의 실행을 활성화한 다음 서버에 AJAX 요청을 보냅니다. 데이터는 일반적으로 JSON 형식이며 전체 웹 페이지를 새로 고칠 필요가 없습니다.

브라우저가 완전히 새로운 페이지를 시작하는 일반적인 기술 대신 단일 페이지 응용 프로그램은 웹 서버의 새로운 데이터로 기존 웹 페이지를 강제로 수정하여 사용자와 상호 작용합니다. 브라우저는 필요한 HTML, JavaScript 및 CSS 코드 또는 기타 적절한 리소스를 검색하고 필요에 따라 페이지에 추가합니다.

HTML5 히스토리 API 또는 위치 해시를 사용하여 웹 애플리케이션의 다양한 논리적 페이지에 대한 탐색 가능성과 인식을 제공할 수 있지만 페이지는 절차 중에 언제든지 다시 로드되지 않으며 제어를 다른 페이지로 이전하지 않습니다.

실행 중인 단일 페이지 응용 프로그램의 예를 보려면 이 링크로 이동하여 메인 페이지, 가장 최근 과정 목록 및 상위 메뉴를 클릭하십시오. 그렇게 하면 페이지가 완전히 다시 로드되지 않고 사용자가 응용 프로그램 전체를 이동할 때 유선을 통해 새 데이터만 전송된다는 것을 알 수 있습니다.

이것은 SPA의 예입니다.

SPA는 누구에게 가장 적합합니까?

SPA의 이점으로 인해 이제는 많은 상황에서 선호되는 솔루션입니다.

그들은 콘텐츠보다 성능과 만족스러운 사용자 경험이 더 중요한 다양한 웹 기술과 관련된 프로젝트에서 탁월합니다.

SPA를 사용하는 많은 대기업이 있습니다. Facebook, Gmail, Google Maps, Netflix 및 Paypal은 이러한 유형의 기술의 가장 두드러진 예입니다(아래 참조).

SPA에서 A/B 테스트가 어려운 이유는 무엇입니까?

세 가지 프레임워크(React.js, Angular.js 및 Vue.js) 모두 더 나은 사용자 경험과 더 높은 전환율을 생성하는 정교한 사용자 인터페이스를 개발할 수 있기 때문에 JavaScript 개발자들 사이에서 매우 인기가 있습니다.

개발자에게 매우 바람직하기 때문에

• 페이지를 새로 고칠 필요가 없습니다
• 페이지 로드 속도가 더 빠름
• 상호 작용이 풍부하고 유동적입니다.
• 데이터 전송 감소
• 재사용 가능한 조각으로 더 빠른 개발 가능
• 개발자 커뮤니티가 잘 구축되어 있습니다.

또한 새로운 SPA를 시작하는 모든 사람을 위한 리소스이기도 합니다.

그러나 한 가지 큰 단점이 있습니다. 이러한 프레임워크가 작동하는 방식으로 인해 클라이언트 측 A/B 테스트 도구가 제대로 작동 하기 어렵습니다.

누군가 SPA에서 웹 페이지를 탐색할 때 URL을 포함한 페이지는 새로 고쳐지지 않습니다. 페이지 상태는 각 사용자 상호 작용(예: 화면에 표시되는 다양한 요소)에 따라 다릅니다.

A/B 테스트 도구는 일반적으로 초기 페이지 로드 중에 한 번만 조정하기 때문에 이러한 후속 상호작용은 고려되지 않습니다.

다음은 두 가지 일반적인 시나리오입니다.

1. SPA에서 페이지뷰 를 활성화한 경우 누군가가 URL을 방문할 때 페이지뷰를 수신하지만 페이지뷰가 활성화된 다른 페이지를 탐색하는 경우 두 번째 페이지뷰를 수신하지 않습니다. 이는 자료가 새 페이지가 아닌 현재 페이지에 로드되고 있기 때문입니다.
2. 이벤트를 특정 URL 로 제한하려고 하면 동일한 문제가 발생합니다. A/B 테스트 도구는 사용자가 다른 페이지에 있다고 생각하더라도 처음 로드된 동일한 페이지에 그대로 유지된다고 "믿습니다". 조각이 사이트 안팎으로 이동하기 때문에 클릭이나 기타 이벤트를 모니터링하는 데 어려움이 있을 수 있습니다.

경험을 렌더링하기 위해 클라이언트 측 A/B 테스트 소프트웨어 및 개인화 플랫폼은 완전한 페이지 로드에 의존합니다.

React, Angular 또는 Vue와 같은 SPA 프레임워크를 사용할 때는 이 개념이 없기 때문에 페이지에 새 콘텐츠가 추가되었는지 또는 기존 콘텐츠의 상태가 변경되었는지, 더 중요하게는 맞춤형 콘텐츠를 언제 주입할지 결정하는 것이 더 어려워집니다.

따라서 A/B 테스트 도구는 방문자가 제품 목록, 세부 정보 또는 장바구니 페이지에 도달했는지 여부와 새로운 자료를 제공해야 하는 시점과 같은 방문자의 컨텍스트를 인식할 수 있어야 합니다.

즉, 기술 팀은 모듈화된 React SPA 또는 Angular SPA 구성 요소의 변화를 지속적으로 파악하고 이러한 구성 요소에 영향을 미치는 경험을 실시간으로 업데이트해야 합니다.

예를 들어 React.js의 각 사용자 상호 작용은 하나 이상의 UI 요소를 새로 고쳐 A/B 테스트 솔루션에서 수행한 모든 변경 사항을 삭제합니다.

SPA에 대한 클라이언트 측 테스트와 서버 측 테스트

SPA에 대한 A/B 테스트에는 두 가지 옵션이 있습니다.

1. 테스트하려는 애플리케이션의 다양한 "상태"를 분리한 다음 각 "상태"가 표시될 때 적절한 변경을 수행하기 위해 API가 호출되도록 설정합니다. 이것을 조건부 활성화라고 하며 클라이언트 측에서 수행됩니다 .

"상태"의 몇 가지 예에는 구독 양식 표시, 검색 결과 목록 로드 등이 포함됩니다.

2. 서버 측 에서 수정 사항을 하드코딩하거나 각각의 새로운 경험에 대한 사용자 지정 배포.

이 두 옵션 모두 사용 중인 SPA 프레임워크의 영향을 받습니다. 따라서 짐작할 수 있듯이 좋은 작업을 유지하려면 기술 팀과 마케터 간의 많은 협력이 필요합니다.

이제 이 두 가지 옵션을 모두 살펴보고 팀이 성공하기 위해 수행해야 하는 작업을 살펴보겠습니다.

클라이언트 측에서 조건부 활성화

SPA 애플리케이션에서 여전히 클라이언트 측 테스트를 수행해야 하는 경우 해결 방법이 있습니다.

애플리케이션이 원하는 상태에 도달할 때만 테스트 스크립트가 실행되도록 하기 위해 웹 개발자는 조건부 활성화 모드 라는 기능을 사용할 수 있습니다.

조건부 활성화에 익숙하지 않은 경우 이해하기 쉬운 개념입니다.

본질적으로 조건부 활성화는 페이지를 새로 고칠 때 수행하는 표준 방법을 통하지 않고 실험이 활성화되어야 하는 시기를 정의할 수 있는 기능을 제공합니다.

이것은 약간의 JavaScript를 작성하여 수행할 수 있습니다. 두 가지 방법이 있습니다.

1. 폴링 기능

폴링 기능은 조건부 활성화를 사용하는 가장 기본적인 방법입니다. 이 함수는 지정된 요소가 나타날 때까지 50ms마다 페이지를 스캔합니다. 이것은 모달, div 또는 전체 페이지일 수 있습니다.

실험은 요소가 나타나면 시작됩니다.

A/B 테스트 플랫폼은 폴링 기능이 찾길 원하는 요소에 따라 수정할 JavaScript 몇 줄을 생성합니다.

함수가 TRUE 로 평가되면 실험이 활성화됩니다.

2. 콜백 함수

콜백 함수의 실행은 폴링 함수의 실행과 유사하지만 약간의 유연성이 추가됩니다.

이 기능을 사용하면 원하는 JavaScript 조건을 입력할 수 있으며 TRUE 로 평가되면 실험을 시작할 수 있습니다.

폴링 함수가 지정된 요소가 있는지 확인하기 위해 페이지를 지속적으로 핑하는 동안 콜백 함수는 더 수동적이며 이벤트 핸들러에 의존합니다.

서버 측 테스트

서버 측 테스트를 수행할 때 브라우저 수준에서 변경 사항이 적용되지 않습니다. 오히려 실험 변형 매개변수("사용자 1이 변형 A를 봅니다")가 서버 수준에서 결정되고 서비스 제공자를 통해 JavaScript 애플리케이션에 직접 연결되어 정적 범위를 넘어 확장되는 더 복잡하고 동적인 콘텐츠를 더 쉽게 테스트할 수 있습니다. 웹사이트의 사용자 인터페이스.

예를 들어 대부분이 SPA인 소셜 미디어 앱을 예로 들어 보겠습니다. 프론트엔드 클라이언트 측 테스트를 사용하여 이를 실험할 수 있지만 관련된 동적 콘텐츠로 인해 훨씬 ​​더 복잡하므로 서버 측 테스트로 전환하면 프로세스가 훨씬 쉬워집니다.

SPA에 대한 A/B 테스트의 예

단일 페이지 애플리케이션에 대한 A/B 테스트의 실제 사례는 무엇입니까?

랜딩 페이지에서 이미지 변경

특정 페이지를 방문한 청중의 50%에게 동적 이미지를 표시하기 위해 SPA에 대한 실험을 설정해야 한다고 가정해 보겠습니다. 이 예제에서 사용된 SPA 프레임워크는 React.js입니다. 즉, 페이지가 변경되고 이미지가 정기적으로 교체됩니다.

변형 이미지를 표시하면 깜박임 문제가 발생할 수 있습니다. 즉, 원본 이미지-변형 이미지-원본 이미지의 시퀀스가 ​​관찰됩니다.

이 문제는 특정 방문 페이지가 로드될 때 폴링을 트리거하여 완전히 피할 수 있습니다.

CTA 아래 추가 사본 테스트

Angular.js로 구축된 SPA 사이트에 대한 또 다른 실험은 대상 고객의 30%에게 주 CTA 아래에 추가 사본 한 줄을 표시하는 것과 관련될 수 있습니다.

이 예에서 버전 A는 기본 CTA 아래에 추가 사본 행을 표시하지만 버전 B는 표시하지 않습니다. 트래픽의 30%를 버전 A로, 70%를 버전 B로 보낸 다음 결과를 비교하여 전환율에 상당한 차이가 있는지 확인합니다.

웹사이트는 Angular.js로 구축되었기 때문에 요소는 정기적으로 변경됩니다. 여기에서 콜백 이벤트는 변형에 대한 변경 사항을 표시하는 데 도움이 될 수 있습니다.

상품권 표시

이 예에서 사용자가 프리미엄 브랜드의 제품을 장바구니에 추가할 때 독점 상품권이 표시되기를 원한다고 가정해 보겠습니다. 사용자가 장바구니에서 프리미엄 제품을 제거하면 바우처가 페이지에서 스와이프된다는 조건으로.

1. 여기서 필요한 것은 사용자가 필요한 작업을 수행할 때 수동 활성화 이벤트가 전송되어야 한다는 것입니다. 이 이벤트의 결과로 실험이 활성화됩니다.
2. 사용자가 장바구니에서 프리미엄 제품을 제거하여 실험을 비활성화하면 활성화 이벤트가 시작되어야 합니다.
3. 소비자가 프리미엄 제품을 다시 추가하는 경우 프리미엄 제품을 표시하려면 실험을 다시 활성화해야 합니다.

'지금 구매' CTA 아래에 태그라인 표시

'지금 구매' CTA 버튼 아래에 고유한 태그라인을 표시하고 싶은 경우 이력 변경에 대한 활성화 이벤트를 푸시하면 실험을 활성화할 수 있습니다.

'지금 구매' CTA 버튼이 포함된 페이지가 처음에는 로드되지 않기 때문입니다.

변환이 SPA에 대한 테스트 문제를 우회한 방법

SPA에 대한 실험은 다른 실험과 다르게 처리해야 합니다. 변환 스크립트는 웹사이트 방문자가 탐색하는 URL을 읽을 수 없기 때문에 표준 방법으로 실험을 트리거할 수 없습니다.

대신 수행 방법은 다음과 같습니다.

이 문서에 설명된 대로 변환 추적 코드를 설치하여 시작합니다.

그런 다음 아래 3가지 방법 중 하나를 적용합니다.

1. 폴링 트리거

언급한 바와 같이, 폴링은 경험 조건을 테스트하여 해당 경험이 트리거되어야 하는지 여부를 결정하는 프로세스입니다.

여기에는 방문자 URL, 대상 조건 또는 JavaScript 조건을 모니터링하여 테스트를 실행하는 것이 포함됩니다.

폴링은 일반적으로 새 페이지가 로드될 때 변환에 의해 트리거됩니다. SPA에서는 일반적으로 웹 앱에 새 페이지가 로드되지 않습니다.

이 경우 폴링을 시작하려면 다음 코드가 필요합니다.

 창._conv_q = _conv_q || [];
window._conv_q.push(["실행","참"]);

SPA에서 위의 코드를 트리거하는 가장 좋은 이벤트를 결정해야 합니다. 프로젝트 설정 > 전역 프로젝트 JavaScript 섹션에 추가해야 하는 샘플 코드입니다.

 console.log('글로벌 프로젝트 자바스크립트의 SPA/변환 코드 실행');
if (!window.globalExecutedTs) {
window.globalExecutedTs = true;
var oldPushState = window.history.pushState;
window.history.pushState = 함수(데이터) {
노력하다 {
setTimeout(함수() {
반환 oldPushState.apply(이, 인수);
console.log('푸시 상태에서 활성화된 변환');
창._conv_q = _conv_q || [];
window._conv_q.push(["실행", "참"]);
}, 0);
} 잡기 (e) {
console.log(e);
}
};
window.onpopstate = 함수(이벤트) {
setTimeout(함수() {
console.log('popstate에서 활성화된 변환');
창._conv_q = _conv_q || [];
window._conv_q.push(["실행", "참"]);
}, 0);
};
}

2. 사이트 영역에서 JavaScript 조건 사용

변환 스크립트는 SPA의 URL 변경 사항을 읽을 수 없으므로 URL 일치 조건 대신 JavaScript 조건을 사용하여 실험을 트리거해야 합니다.

다음 문서에서 이 작업을 수행하는 방법에 대한 자세한 설명을 찾으십시오.

3. 수동으로 실험 활성화

특정 흐름이 발생했음을 확인한 후 수동으로 실험을 트리거할 수 있습니다. 이 방법을 사용하면 코드로 폴링을 트리거한 후에도 사이트 영역 및 대상 조건이 계속 테스트됩니다. 실험을 수동으로 활성화하는 방법에 대한 자세한 내용은 이 문서를 확인하세요.

위의 3가지 방법으로 SPA 앱에서 적절한 순간에 실험을 실행할 수 있어야 합니다.

변환하면 SPA에서 깜박임 위험이 증가합니까?

짧은 대답, 아니요.

모든 SPA 프레임워크는 Convert의 깜박임 방지 기술과 호환됩니다. Convert는 장면 뒤에서 SmartInsert ^TM 기술을 활용하여 동적 페이지를 다시 로드하는 동안에도 SPA에서 적절한 시간에 실험 수정 사항이 적용되거나 다시 적용되도록 합니다.

깜박임 효과에 대한 자세한 내용과 어떤 경우에도 이를 피해야 하는 이유에 대한 백서를 읽는 것이 좋습니다.

단일 페이지 응용 프로그램 사이트에서 A/B 테스트 시 일반적인 문제

보시다시피 SPA 사이트에서 테스트를 실행할 때 염두에 두어야 할 몇 가지 사항이 있습니다. 사용된 프레임워크, 도구 테스트 방법 및 트리거 이벤트를 다뤘다면 주요 문제는 일반적으로 브라우저에 새 페이지나 보기가 표시될 때 테스트 요소가 다시 로드되지 않는 것입니다.

다음과 같은 몇 가지 이유로 인해 발생할 수 있습니다.

1. 첫 페이지 보기에는 표시되지만 후속 페이지 보기에는 표시되지 않는 테스트 변경 사항

표시하려는 변경 사항이 브라우저에 로드한 첫 번째 페이지에만 표시되고 후속 보기에는 표시되지 않는 경우가 있습니다. 실험을 평가하고 활성화하는 변환 스크립트의 일부가 사이트의 새 보기 또는 "페이지"에 액세스할 때 실행되지 않기 때문입니다.

2. Visual Editor에 나타나는 변경 사항은 외부에서 미리 볼 때 나타나지 않습니다.

Visual Editor로 변경한 내용이 편집기 미리보기 외부에 표시되지 않는 경우가 있습니다.

대부분의 SPA 프레임워크는 DOM API를 사용하지 않고 대신 자체 메서드를 사용하여 페이지에 변경 사항을 배포합니다. 이로 인해 SPA에서 업데이트할 때 DOM이 동기화되지 않습니다. 이는 React 및 Angular에서 일반적이므로 Jquery 코드에 있는 CSS 선택기가 작동하지 않습니다.

3. 후속 '보기'에 변경 사항이 계속 나타납니다.

이 시나리오에서는 실험 변경 사항이 올바른(페이지) 보기에 표시됩니다. 그러나 새로운(페이지) 보기를 방문할 때 변경 사항이 사라지지 않습니다. 이것은 SPA 사이트에서 새 페이지를 다시 로드할 때 변경 사항이 제거되지 않기 때문에 발생합니다.

변환 스크립트는 폴링이 호출될 때 변경 사항이 배포된 후속 보기와 실험 조건이 일치하지 않을 때 추가된 코드를 제거합니다. 그러나 페이지의 실험 코드를 제거해도 jquery 변경 사항이 사라지지 않으므로 이것으로 충분하지 않습니다.

실험에서 가져온 변경 사항을 되돌리는 코드를 실행해야 합니다.

귀하의 차례: SPA를 최적화할 때 이러한 실수를 피하십시오

정보 처리 및 제공 방식의 발전으로 인해 SPA가 더 일반적으로 받아들여질 수 있지만 일반적으로 보다 고전적인 설정에서 작동하는 최적화 및 실험 플랫폼과 통합할 때 이 새로운 기술에 문제가 있다는 점에 유의해야 합니다.

이 기사가 SPA의 다양한 구성 요소와 방문자에게 더 빠르고 직관적이며 개인화된 디지털 경험을 제공하기 위해 이러한 장애물을 극복하기 위한 몇 가지 솔루션을 다루기를 바랍니다.

그러나 소스 코드를 수정하지 않고 동적 사용자 지정을 위해 UI 구성 요소 및 페이지 유형의 변경 사항을 감지하는 기능과 같이 SPA에 대한 원활한 지원을 제공할 수 있는 솔루션 공급자와 협력하는 것이 더 나을 것입니다. 아래 상자에 있는 것과 같습니다.