단일 페이지 애플리케이션 구현

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

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

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

SPA용 Platform Web SDK의 이점

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

XDM 보기 및 단일 페이지 애플리케이션

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

"보기"가 무엇인지 더 설명하기 위해 다음 예제에서는 React에 구현된 가상의 온라인 전자 상거래 사이트를 사용하여 "보기" 예를 살펴봅니다.

홈 사이트로 이동한 후 영웅 이미지는 사이트에서 사용할 수 있는 최신 제품과 부활절 판매를 홍보합니다. 이 경우 전체 홈 화면에 대해 보기 를 정의할 수 있습니다. 이 보기는 간단히 "홈"이라고 할 수 있습니다.

고객이 비즈니스에서 판매하는 제품에 관심이 많아짐에 따라 제품 링크를 클릭하기로 합니다. 홈 사이트와 유사하게, 제품 사이트 전체를 보기로 정의할 수 있습니다. 이 보기의 이름은 "products-all"로 지정할 수 있습니다.

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

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

고객은 사이트에서 몇 가지 제품을 구매하기로 하고 체크아웃 화면으로 진행합니다. 체크아웃 사이트에서는 고객에게 일반 배달 또는 빠른 배달을 선택할 수 있는 옵션이 제공됩니다. "보기"는 사이트에서 임의의 시각적 요소 그룹일 수 있으므로 게재 환경 설정에 대해 보기를 만들고 "게재 환경 설정"이라고 할 수 있습니다.

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

XDM 보기 구현

Adobe Target에서 XDM 보기 를 활용하여 마케터가 시각적 경험 작성기를 통해 SPA에서 A/B 및 XT 테스트를 실행할 수 있습니다. 이 경우 일회용 개발자 설정을 완료하려면 다음 단계를 수행해야 합니다.

sendEvent() 함수 예제

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

예제 1: A/B 테스트 홈 페이지

마케팅 팀은 전체 홈 페이지에서 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: 개인화된 제품

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

function onViewChange(viewName) {

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

class Products extends Component {

  render() {
    return (
      <button type="button" onClick={this.handleLoadMoreClicked}>Load more</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);
  }

}

예제 3: A/B 테스트 게재 환경 설정

마케팅 팀은 빠른 배달 ​을(를) 선택할 때 단추 색상을 파란색에서 빨간색으로 변경하면 전환을 더 끌어올릴 수 있는지 여부를 확인하기 위해 A/B 테스트를 실행하려고 합니다(두 배달 옵션 모두에 대해 단추 색상을 파란색으로 유지하는 것과 대조적으로).

선택한 게재 환경 설정에 따라 사이트에서 콘텐츠를 개인화하기 위해 각 게재 환경 설정에 대해 "보기"를 만들 수 있습니다. 일반 배달 ​을 선택하면 보기의 이름을 "checkout-normal"로 지정할 수 있습니다. 빠른 배달 ​을 선택한 경우 보기의 이름을 "checkout-express"로 지정할 수 있습니다.

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

class Checkout extends Component {

  render() {
    return (
      <div onChange={this.onDeliveryPreferenceChanged}>
        <label>
          <input type="radio" id="normal" name="deliveryPreference" value={"Normal Delivery"} defaultChecked={true}/>
          <span> Normal Delivery (7-10 business days)</span>
        </label>
        <label>
          <input type="radio" id="express" name="deliveryPreference" value={"Express Delivery"}/>
          <span> Express Delivery* (2-3 business days)</span>
        </label>
      </div>
    );
  }

  onDeliveryPreferenceChanged(evt) {
    var selectedPreferenceValue = evt.target.value;
    onViewChange(selectedPreferenceValue);
  }

}

SPA용 시각적 경험 작성기 사용

XDM 보기 정의를 완료하고 전달된 해당 XDM 보기로 sendEvent()을(를) 구현하면 VEC가 이러한 보기를 감지하고 사용자가 A/B 또는 XT 활동에 대한 작업 및 수정 사항을 만드는 것을 허용할 수 있습니다.

수정 패널

수정 사항 패널에서는 특정 보기용으로 만들어진 작업을 캡처합니다. 보기에 대한 모든 작업은 해당 보기 아래에 그룹화됩니다.

작업

작업을 클릭하면 이 작업이 적용될 사이트의 요소가 강조 표시됩니다. 보기 아래에 만들어진 각 VEC 작업에는 정보, 편집, 복제, 이동 및 삭제 아이콘이 있습니다. 이러한 아이콘은 다음 표에 자세히 설명되어 있습니다.

SPA용 VEC 사용 예

이 섹션에서는 시각적 경험 작성기를 사용하여 A/B 또는 XT 활동에 대한 작업 및 수정 사항을 만드는 세 가지 예를 간략하게 설명합니다.

예제 1: "home" 보기 업데이트

이 문서의 앞부분에서 "홈"이라는 보기가 전체 홈 사이트에 대해 정의되었습니다. 이제 마케팅 팀은 다음과 같은 방법으로 "홈" 보기를 업데이트하려고 합니다.

VEC에서 업데이트하려면 작성 ​을 선택하고 "홈" 보기에 해당 변경 내용을 적용합니다.

예제 2: 제품 레이블 변경

"products-page-2" 보기의 경우 마케팅 팀이 가격 레이블을 판매 가격(으)로 변경하고 레이블 색상을 빨간색으로 변경하려고 합니다.

VEC에서 이러한 업데이트를 수행하려면 다음 단계를 수행해야 합니다.

예제 3: 게재 환경 설정 스타일 개인화

보기는 라디오 버튼의 상태 또는 옵션과 같이 세분화된 수준에서 정의할 수 있습니다. 이 문서의 앞부분에서 "checkout-normal" 및 "checkout-express" 게재 환경 설정을 정의했습니다. 마케팅 팀이 "checkout-express" 보기에 대해 단추 색상을 빨간색으로 변경하려고 합니다.

VEC에서 이러한 업데이트를 수행하려면 다음 단계를 수행해야 합니다.