마케팅 관리

이해하기

앱 주문권장 기능은 모바일 웹에서 상품상세페이지에 접속했을 때, 앱을 통해 구매하도록 유도하는 배너를 설정하는 기능입니다. 이 기능을 활용하면 브랜드 이미지나 프로모션 목적에 맞는 배너를 손쉽게 구성할 수 있습니다.

상세 설명

배너는 ① 기본 배너 ② 이미지 ③ 스크립트 중 선택하여 설정할 수 있습니다. 기본 배너나 이미지 타입의 배너를 선택한 경우 설정이 적용된 배너 이미지를 좌측 미리보기 영역에서 바로 확인할 수 있습니다.

배너 UI 설정

노출 여부 설정

• 앱 주문권장 배너의 노출 여부를 노출함으로 설정 시 모바일 상품 상세페이지에 배너가 표시됩니다.

• 배너를 통해 앱으로 유입 시 사용자 디바이스 내 앱의 설치여부에 따라 다르게 동작합니다.

  • 설치 사용자: 모바일 앱 실행 후 웹에서 조회하고 있던 상품 상세페이지로 이동

  • 미설치 사용자: 앱을 설치할 수 있도록 OS별 앱스토어로 이동

배너 타입 선택

기본 배너: 앱 아이콘, 문구, 버튼명, 닫기 버튼으로 구성된 고정 레이아웃으로 설정하는 방식입니다. 좌측에 표시되는 앱 아이콘은 설정>출시정보>[T]판매정보에 등록된 이미지를 사용하며, 판매정보에서 아이콘을 변경하면 주문권장 배너의 아이콘도 자동으로 함께 변경됩니다. 쇼핑몰별 맞춤형 메시지를 전달할 수 있도록 배너의 문구, 버튼명, 텍스트 색상, 버튼 색상, 배경 색상을 자유롭게 설정할 수 있습니다.

이미지: 레이아웃을 자유롭게 구성하여 직접 제작한 배너를 이미지로 등록하는 방식입니다. 이미지 사이즈(320*100px)가 고정되어 있기 때문에 모바일웹에 접속한 디바이스에 따라 배너 좌우로 여백이 발생하게 되며, 여백을 채울 배경 색상을 선택할 수 있습니다.

스크립트: 직접 개발한 스크립트 코드로 등록하는 방식입니다. 앱 주문권장 배너에 특정 이벤트 혹은 추적 코드를 추가하거나, 배너의 위치나 형태를 기본 띠배너 외의 다른 형태로 변경하고 싶을 때 유용합니다. 이 방식을 사용하면 배너의 디자인과 동작을 자유롭게 커스터마이징할 수 있어 브랜드 컨셉이나 원하는 디자인 스타일에 맞는 배너를 구현할 수 있습니다.

myappConfig 변수명은 마이앱 환경에서 사용하는 예약어이므로 직접 선언해서 사용할 수 없습니다.

스크립트를 작성할 때는 아래의 예시 코드와 참고사항을 확인해 주시기 바랍니다.

샵바이 예시 코드

<script>
try {
  if (!myapp?.helpers?.isMyApp() && !document.querySelector("#myapp-banner")){  

    myapp.banner.fetchMyappBannerConfig({ myappNo: myappConfig.myappNo, pageType: myappConfig.pageType })
    .then((config) => {      

      if (!config.isEnabled || sessionStorage.getItem(myapp.constants.BANNER_CLOSE_SIGNAL) === 'true') return;
      const banner =  myapp.banner.createImageBanner(config.scriptImageUrl);
    
      const bannerClickHandler = myapp.banner.getBannerClickHandler(myapp.banner.getPlatformSpecificAppScheme(config));
      banner.addEventListener('click', bannerClickHandler);
      
      const closeBtn = banner.querySelector('#myapp-banner-close-container');
      const bannerCloseHandler = myapp.banner.getBannerCloseHandler(banner);
      closeBtn.addEventListener('click', bannerCloseHandler);
      
      if (banner instanceof HTMLElement) {
        document.body.insertAdjacentElement('afterbegin', banner);
      }
    });
  }
} catch(e) {
  console.group('마이앱 외부 스크립트 오류 로그');
  console.error(e);
  console.groupEnd();
}
</script>

고도몰 예시코드

<script>
try {
  if (!myapp.helpers.isMyApp()) {
     myapp.banner
      .fetchMyappBannerConfig({ myappNo: myappConfig.myappNo, pageType: myappConfig.pageType })
      .then((config) => {
        const header = document.querySelector('#header.fix');
        const headerBox = document.querySelector('header .header_box');
        const headerTag = document.querySelector('header');
        
        if (!config.isEnabled || sessionStorage.getItem(myapp.constants.BANNER_CLOSE_SIGNAL) === 'true') return;
        const banner =  myapp.banner.createImageBanner(config.scriptImageUrl);
    
        const bannerClickHandler = myapp.banner.getBannerClickHandler(myapp.banner.getPlatformSpecificAppScheme(config));
        banner.addEventListener('click', bannerClickHandler);
      
        const closeBtn = banner.querySelector('#myapp-banner-close-container');
        const bannerCloseHandler = myapp.banner.getBannerCloseHandler(banner);
        closeBtn.addEventListener('click', bannerCloseHandler);
        
        if (!document.getElementById('myapp-banner') && banner instanceof HTMLElement) {
          if (header) {
            header.insertAdjacentElement('afterbegin', banner);
          } else {
            headerBox.style.position = 'relative';
            headerTag.insertAdjacentElement('afterbegin', banner);
          }
        }
      });
  }
} catch (e) {
  console.group('마이앱 외부 스크립트 오류 로그');
  console.error(e);
  console.groupEnd();
}
</script>

참고사항

Option 타입

• Option 값은 자유롭게 설정 가능

• textColor, paddingColor, imageUrl은 마이앱 어드민의 배너 UI 설정에 세팅된 값

  • myapp.banner.fetchMyappBannerConfig 함수를 통해 반환되는 값

key	type	설명
isEnabled	boolean	배너 사용 유무
textColor	string	텍스트 색상
paddingColor	string	여백 색상
imageUrl	string	배너 이미지 주소 (이미지 배너 타입)
scriptImageUrl	string	배너 이미지 주소 (스크립트 배너 타입)
styles	object	배너영역 스타일 커스텀옵션 CSS 속성명 camelCase 변환 필요 ex) background-color -> backgroundColor

인터페이스

// myapp.banner
createImageBanner(imageUrl: string); // 이미지 주소만 사용시
createImageBanner(imageUrl: string, option: object); // 이미지주소, 옵션 사용시
createImageBanner(option: object); // 옵션만 사용시

이미지 주소만 사용 시

// case 1) 주소 직접 사용
const banner = myapp.banner.createImageBanner("https://sample.com/sample.png");

// case 2) 스크립트 배너타입 이미지 사용
const config = { imageUrl: "", scriptImageUrl: "https://sample.com/sample.png" }; // 마이앱 어드민 설정값 샘플
const banner = myapp.banner.createImageBanner(config.scriptImageUrl);

이미지 주소 옵션 사용 시

const config = { textColor: "#ffffff", paddingColor: "#aaf0c4", imageUrl: "" }; // 마이앱 어드민 설정값 샘플
const banner = myapp.banner.createImageBanner("https://sample.com/sample.png", config); // 어드민 설정값 샘플에 있는 imageUrl은 무시되고 첫번째 인자로 전달받은 이미지 주소로 사용됨

옵션만 사용 시

const config = { textColor: "#ffffff", paddingColor: "#aaf0c4", imageUrl: "https://sample.com/sample.png" }; // 마이앱 어드민 설정값 샘플
const banner = myapp.banner.createImageBanner(config);

배너영역 스타일 커스텀 예시

// 마이앱 어드민 설정 모두 무시하고 특정 스타일만 반영하고자 할 경우 예시 (배경색상 변경)
const banner = myapp.banner.createImageBanner("https://sample.com/sample.png", { styles: { backgroundColor: "#000000" } });

생성된 스크립트 삽입 시 체크사항

• 마이앱 어드민에서 배너 활성화 유무 설정 가능

• 사용자가 배너를 닫았을 경우 세션 유지기간동안 배너 미노출

// 배너 삽입 여부 체크
if (!config.isEnabled || sessionStorage.getItem(myapp.constants.BANNER_CLOSE_SIGNAL) === 'true') return;
const banner = myapp.banner.createImageBanner("https://sample.com/sample.png");