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

Adobe Experience Platform 웹 SDK는 단일 페이지 애플리케이션(SPA)과 같은 차세대 클라이언트측 기술을 통해 개인화를 구현할 수 있는 풍부한 기능을 제공합니다.

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

단일 페이지 애플리케이션과 같은 최신 웹 애플리케이션에서는 페이지 재로드와 관계없이 브라우저 UI 렌더링을 신속하게 사용할 수 있도록 하는 모델을 채택했습니다. 이러한 경험은 스크롤링, 클릭 및 커서 이동과 같은 고객 인터랙션에 의해 트리거될 수 있습니다. 최신 웹의 패러다임이 진화함에 따라 페이지 로드와 같은 일반적인 기존 이벤트의 연관성은 더 이상 개인화와 실험을 배포할 수 없습니다.

SPA용 Platform Web SDK의 이점

단일 페이지 애플리케이션에 Adobe Experience Platform 웹 SDK를 사용할 때 다음과 같은 이점이 있습니다.

• 페이지 로드 시 모든 오퍼를 캐시하여 여러 서버 호출을 하나의 서버 호출로 줄일 수 있습니다.
• 오퍼가 기존 서버 호출에서 발생하는 지연 시간 없이 캐시를 통해 즉시 표시되므로 사이트의 사용자 경험을 크게 향상시킬 수 있습니다.
• 단일 코드 행과 1회 개발자 설정을 통해 마케터는 SPA에서 VEC(Visual Experience Composer)를 통해 A/B 및 XT(Experience Targeting) 활동을 만들고 실행할 수 있습니다.

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

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

뷰가 무엇인지 자세히 설명하기 위해 다음 예에서는 Response에서 구현된 가상 온라인 전자 상거래 사이트를 사용하여 예제 뷰를 탐색합니다.

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

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

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

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

고객은 사이트에서 몇 개의 제품을 구입하기로 결정하고 체크아웃 화면으로 이동합니다. 체크아웃 사이트에서 고객에게 일반적인 배달 또는 빠른 배달을 선택할 수 있는 옵션이 제공됩니다. 보기는 사이트의 모든 시각적 요소 그룹일 수 있으므로, 배달 기본 설정에 대해 보기를 만들고 "배달 기본 설정"이라고 할 수 있습니다.

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

XDM 보기 구현

Adobe Target에서 XDM 뷰를 활용하면 마케터가 Visual Experience Composer를 통해 SPA에서 A/B 및 XT 테스트를 실행할 수 있습니다. 일회성 개발자 설정을 완료하려면 다음 단계를 수행해야 합니다.

1. Adobe Experience Platform 웹 SDK 설치

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

3. XDM 보기를 정의한 후 AB 또는 XT VEC 활동을 전달하려면 단일 페이지 애플리케이션에서 renderDecisions을 true로 설정하고 해당 XDM 보기를 사용하여 sendEvent() 함수를 구현합니다. XDM 보기는 xdm.web.webPageDetails.viewName에서 전달되어야 합니다. 이 단계에서는 마케터가 Visual Experience Composer를 활용하여 해당 XDM에 대한 A/B 및 XT 테스트를 시작할 수 있습니다.

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

sendEvent() 함수 예제

이 섹션에서는 가설 전자 상거래 SPA에 대해 반응에서 sendEvent() 함수를 호출하는 방법을 보여 주는 3가지 예제를 설명합니다.

예 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용 Visual Experience Composer 사용

XDM 뷰 정의를 완료하고 전달된 XDM 뷰 수와 함께 sendEvent()을(를) 구현하면 VEC는 이러한 보기를 탐지할 수 있으며 사용자가 A/B 또는 XT 활동에 대한 작업 및 수정을 만들 수 있습니다.

수정 패널

[수정] 패널은 특정 보기에 대해 만들어진 액션을 캡처합니다. 뷰에 대한 모든 작업은 해당 보기 아래에 그룹화됩니다.

작업

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

SPA 예제에 VEC 사용

이 섹션에서는 Visual Experience Composer를 사용하여 A/B 또는 XT 활동에 대한 작업 및 수정 작업을 만드는 3가지 예제를 간략히 설명합니다.

예 1:"홈" 보기 업데이트

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

• 장바구니에 추가 및 좋아요 단추를 더 밝은 파란색 공유로 변경합니다. 이것은 헤더의 구성 요소를 변경하는 것과 관련되므로 페이지를 로드하는 동안 발생합니다.
• 2019용 최신 제품 레이블을 2019용 가장 많은 제품​으로 변경하고 텍스트 색상을 자주색으로 변경합니다.

VEC에서 이러한 업데이트를 만들려면 구성​을 선택하고 이러한 변경 내용을 "홈" 보기에 적용하십시오.

예 2:제품 레이블 변경

"products-page-2" 보기의 경우 마케팅 팀은 Price 레이블을 Sale Price​로 변경하고 레이블 색상을 빨간색으로 변경합니다.

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

1. VEC에서 찾아보기​를 선택합니다.
2. 사이트의 위쪽 탐색에서 제품​을 선택합니다.
3. 제품의 두 번째 행을 보려면 더 보기​를 한 번 선택합니다.
4. VEC에서 구성​을 선택합니다.
5. 텍스트 레이블을 판매 가격​으로 변경하고 색상을 빨간색으로 변경하는 작업을 적용합니다.

예 3:개인화된 전달 환경 설정 스타일 지정

상태 또는 라디오 단추의 옵션과 같이 세부 수준으로 보기를 정의할 수 있습니다. 이 문서의 이전 보기는 "checkout-normal" 및 "checkout-express" 배달 기본 설정에 대해 정의되었습니다. 마케팅 팀은 "체크아웃-익스프레스" 보기에 대해 단추 색상을 빨간색으로 변경하려고 합니다.

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

1. VEC에서 찾아보기​를 선택합니다.
2. 사이트의 장바구니에 제품을 추가합니다.
3. 사이트의 오른쪽 상단 모서리에서 장바구니 아이콘을 선택합니다.
4. 주문 체크아웃​을 선택합니다.
5. 배달 기본 설정 아래의 배달 라디오 단추를 선택합니다.
6. VEC에서 구성​을 선택합니다.
7. Pay 단추 색상을 빨간색으로 변경합니다.

Business.Adobe.com 리소스