단일 페이지 애플리케이션(SPA) 구현 web-spa-implementation

Adobe Experience Platform Web SDK는 단일 페이지 애플리케이션(SPA)과 같은 차세대 클라이언트측 기술에 대한 개인화를 실행하도록 기업을 지원하는 다양한 기능을 제공합니다.

기존 웹 사이트는 웹 사이트 디자인이 URL과 밀접하게 연결되어 있고 한 웹 페이지에서 다른 웹 페이지로 전환하려면 페이지를 로드해야 하는 다중 페이지 애플리케이션으로도 알려진 "페이지-투-페이지" 탐색 모델에서 작동합니다.

단일 페이지 애플리케이션(SPA)과 같은 최신 웹 애플리케이션에서는 대신 종종 페이지 다시 로드와 무관한 브라우저 UI 렌더링을 촉진하는 모델을 채택했습니다. 이러한 경험은 스크롤, 클릭 및 커서 움직임과 같은 고객 상호 작용에 의해 트리거될 수 있습니다. 최신 웹의 패러다임이 발전함에 따라 개인화 및 실험을 배포하기 위한 페이지 로드와 같은 기존 일반 이벤트와의 관련성이 더 이상 작동하지 않습니다.

페이지 라이프사이클 다이어그램입니다.

SPA용 Web SDK 사용의 이점 web-spa-benefits

단일 페이지 애플리케이션에 Web SDK를 사용하면 다음과 같은 몇 가지 이점이 있습니다.

  • 페이지 로드 시 모든 오퍼를 캐시하여 여러 서버 호출을 하나의 서버 호출로 줄일 수 있습니다.
  • 오퍼가 기존 서버 호출로 인해 초래되는 지연 없이 캐시를 통해 즉시 표시되므로 사이트의 사용자 경험을 크게 향상시킬 수 있습니다.
  • 일회용 개발자 설정을 사용하면 마케터가 SPA에서 Adobe Journey Optimizer Web Visual Editor를 통해 개인화 및 실험 활동을 만들고 실행할 수 있습니다.

XDM 보기 및 단일 페이지 애플리케이션 web-spa-xdm

Journey Optimizer 웹 편집기는 보기 ​라는 개념을 사용합니다.

보기는 SPA 경험을 함께 구성하는 시각적 요소의 논리 그룹입니다. 따라서 단일 페이지 애플리케이션은 사용자 상호 작용을 기반으로 URL 대신 보기를 통해 전환으로 간주할 수 있습니다. 보기는 일반적으로 전체 사이트, 단일 페이지 또는 페이지 내의 그룹화된 시각적 요소를 나타낼 수 있습니다.

보기에 대해 자세히 설명하기 위해 다음 예제에서는 가상의 온라인 전자 상거래 사이트를 사용합니다.

  • 홈 사이트로 이동하면 영웅 이미지는 사이트에서 사용할 수 있는 다양한 제품 카탈로그뿐만 아니라 시즌 컬렉션을 홍보합니다. 이 경우, 전체 홈 화면에 대해 뷰를 정의할 수 있습니다. 이 견해는 간단히 "홈"이라고 할 수 있다.

    홈 페이지를 표시하는 샘플 웹 사이트 이미지입니다.

  • 고객이 비즈니스에서 판매하는 제품에 더 관심이 많아지면 남성 링크를 클릭하기로 합니다. 홈 페이지와 마찬가지로 Men 페이지 전체를 보기로 정의할 수 있습니다. 이 보기의 이름은 "men"으로 지정할 수 있습니다.

    특정 보기를 표시하는 샘플 웹 사이트 이미지입니다.

  • 보기를 전체 사이트 또는 사이트의 시각적 요소 그룹으로 정의할 수 있으므로 제품 사이트에 표시된 네 가지 제품을 그룹화하여 보기로 간주할 수 있습니다. 이 보기의 이름은 "products"로 지정할 수 있습니다.

    특정 보기를 표시하는 샘플 웹 사이트 이미지입니다.

  • 고객이 모든 남성용 제품 단추를 클릭하여 사이트에서 더 많은 제품을 탐색하기로 결정하면 이 경우 웹 사이트 URL은 변경되지 않지만, 표시되는 두 번째 제품 행만 표시하는 보기를 여기에 만들 수 있습니다. 보기 이름은 "products-page-2"일 수 있습니다.

  • 고객은 사이트에서 몇 가지 제품을 구매하기로 하고 체크아웃 화면으로 진행합니다. 장바구니 화면 자체를 "장바구니"라는 보기와 연결할 수 있습니다. 또는 아래의 권장 제품을 처리하기 위해 체크아웃 화면 내에서 다른 보기를 사용할 수 있습니다.

    특정 보기를 표시하는 샘플 웹 사이트 이미지입니다.

보기의 개념은 이보다 훨씬 더 확장될 수 있다. 다음은 사이트에서 정의할 수 있는 보기의 몇 가지 예입니다.

XDM 보기 구현 implement-xdm-views

Adobe Journey Optimizer에서 XDM 보기를 활용하여 마케터가 Journey Optimizer 웹 시각적 편집기를 통해 SPA에서 웹 개인화 및 실험 캠페인을 실행할 수 있도록 할 수 있습니다.

이 경우 일회용 개발자 설정을 완료하려면 다음 단계를 수행해야 합니다.

  1. Adobe Experience Platform Web SDK를 설치하고 웹 채널 필수 구성 요소 페이지를 확인하십시오.

  2. 개인화할 단일 페이지 애플리케이션에서 모든 XDM 보기를 확인합니다.

  3. XDM 보기를 정의한 후 해당 보기에 콘텐츠를 전달하려면 renderDecisions이(가) true(으)로 설정된 sendEvent() 함수와 단일 페이지 애플리케이션에서 해당 XDM 보기를 구현해야 합니다. XDM 보기를 xdm.web.webPageDetails.viewName에 전달해야 합니다. 이 단계를 통해 마케터는 Journey Optimizer 웹 편집기 내에서 이러한 보기를 검색하고 해당 보기에 대한 콘텐츠 수정 사항을 적용할 수 있습니다.

 alloy("sendEvent", {
  "renderDecisions": true,
  "xdm": {
   "web": {
    "webPageDetails": {
    "viewName":"home"
   }
  }
 }
});
NOTE
첫 번째 sendEvent() 호출에서 최종 사용자에게 렌더링해야 하는 모든 XDM 보기를 가져오고 캐시합니다. 전달된 XDM 보기를 사용한 후속 sendEvent() 호출은 캐시에서 읽히고 서버 호출 없이 렌더링됩니다.

sendEvent() 함수 예제

이 섹션에서는 가상의 전자 상거래 SPA에 대해 React에서 sendEvent() 함수를 호출하는 방법을 보여 주는 두 가지 예를 간략하게 설명합니다.

예제 1: A/B 테스트 홈 페이지 web-spa-sample-1

마케팅 팀은 전체 홈 페이지에서 A/B 테스트를 실행하려고 합니다.

단일 페이지 응용 프로그램 샘플 페이지입니다.

전체 홈 사이트에서 A/B 테스트를 실행하려면 XDM viewName을(를) home(으)로 설정하여 sendEvent()을(를) 호출해야 합니다.

function onViewChange() {

  var viewName = window.location.hash; // or use window.location.pathName if router works on path and not hash

  viewName = viewName || 'home'; // view name cannot be empty

  // Sanitize viewName to get rid of any trailing symbols derived from URL

  if (viewName.startsWith('#') || viewName.startsWith('/')) {
    viewName = viewName.substr(1);
  }

  alloy("sendEvent", {
    "renderDecisions": true,

    "xdm": {
      "web": {
        "webPageDetails": {
          "viewName":"home"
        }
      }
    }
  });
}

// react router v4

const history = syncHistoryWithStore(createBrowserHistory(), store);

history.listen(onViewChange);

// react router v3

<Router history={hashHistory} onUpdate={onViewChange} >

예제 2: 개인화된 제품 web-spa-sample-2

마케팅 팀은 사용자가 클릭하여 모든 남성 제품을 표시한 후 가격 레이블 색상을 빨간색으로 변경함으로써 제품의 두 번째 행을 개인화하려고 합니다.

개인 맞춤화된 제품이 있는 단일 페이지 응용 프로그램 샘플 페이지입니다.

function onViewChange(viewName) {

    alloy("sendEvent", {
        "renderDecisions": true,
        "xdm": {
            "web": {
                "webPageDetails": {
                    "viewName": viewName
                }
            }
        }
    });
}

class Products extends Component {

    render() {
        return (

            <
            button type = "button"
            onClick = {
                this.handleLoadMoreClicked
            } > All Men 's Products</button>
        );
    }

    handleLoadMoreClicked() {
        var page = this.state.page + 1; // assuming page number is derived from component's state
        this.setState({
            page: page
        });
        onViewChange('PRODUCTS-PAGE-' + page);
    }
}
recommendation-more-help
ad108910-6329-42f1-aa1d-5920a2b13636