> For the complete documentation index, see [llms.txt](https://store-help.nhn-commerce.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://store-help.nhn-commerce.com/app/marketing/myapp/settings/marketing-management.md). # 마케팅 관리 ## 이해하기 앱 주문권장 기능은 모바일 웹에서 상품상세페이지에 접속했을 때, 앱을 통해 구매하도록 유도하는 배너를 설정하는 기능입니다. 이 기능을 활용하면 브랜드 이미지나 프로모션 목적에 맞는 배너를 손쉽게 구성할 수 있습니다. ## 상세 설명 배너는 ① 기본 배너 ② 이미지 ③ 스크립트 중 선택하여 설정할 수 있습니다. 기본 배너나 이미지 타입의 배너를 선택한 경우 설정이 적용된 배너 이미지를 좌측 미리보기 영역에서 바로 확인할 수 있습니다. ### **배너 UI 설정** #### **노출 여부 설정** * 앱 주문권장 배너의 노출 여부를 노출함으로 설정 시 모바일 상품 상세페이지에 배너가 표시됩니다. * 배너를 통해 앱으로 유입 시 사용자 디바이스 내 앱의 설치여부에 따라 다르게 동작합니다. * 설치 사용자: 모바일 앱 실행 후 웹에서 조회하고 있던 상품 상세페이지로 이동 * 미설치 사용자: 앱을 설치할 수 있도록 OS별 앱스토어로 이동 #### **배너 타입 선택** ![](https://store-help.nhn-commerce.com/~gitbook/image?url=https%3A%2F%2Fnhnent.dooray.com%2Ffiles%2F4198098094387650884\&width=768\&dpr=3\&quality=100\&sign=7f7866fc\&sv=2) 기본 배너: 앱 아이콘, 문구, 버튼명, 닫기 버튼으로 구성된 고정 레이아웃으로 설정하는 방식입니다. 좌측에 표시되는 앱 아이콘은 설정>출시정보>\[T]판매정보에 등록된 이미지를 사용하며, 판매정보에서 아이콘을 변경하면 주문권장 배너의 아이콘도 자동으로 함께 변경됩니다. 쇼핑몰별 맞춤형 메시지를 전달할 수 있도록 배너의 문구, 버튼명, 텍스트 색상, 버튼 색상, 배경 색상을 자유롭게 설정할 수 있습니다. ![](https://store-help.nhn-commerce.com/~gitbook/image?url=https%3A%2F%2Fnhnent.dooray.com%2Ffiles%2F4198098093215573003\&width=768\&dpr=3\&quality=100\&sign=3f354b0\&sv=2) 이미지: 레이아웃을 자유롭게 구성하여 직접 제작한 배너를 이미지로 등록하는 방식입니다. 이미지 사이즈(320\*100px)가 고정되어 있기 때문에 모바일웹에 접속한 디바이스에 따라 배너 좌우로 여백이 발생하게 되며, 여백을 채울 배경 색상을 선택할 수 있습니다. ![](https://store-help.nhn-commerce.com/~gitbook/image?url=https%3A%2F%2Fnhnent.dooray.com%2Ffiles%2F4198098091874217576\&width=768\&dpr=3\&quality=100\&sign=e5a1e1a5\&sv=2) 스크립트: 직접 개발한 스크립트 코드로 등록하는 방식입니다. 앱 주문권장 배너에 특정 이벤트 혹은 추적 코드를 추가하거나, 배너의 위치나 형태를 기본 띠배너 외의 다른 형태로 변경하고 싶을 때 유용합니다. 이 방식을 사용하면 배너의 디자인과 동작을 자유롭게 커스터마이징할 수 있어 브랜드 컨셉이나 원하는 디자인 스타일에 맞는 배너를 구현할 수 있습니다. {% hint style="warning" %} `myappConfig` 변수명은 마이앱 환경에서 사용하는 예약어이므로 직접 선언해서 사용할 수 없습니다. 스크립트를 작성할 때는 아래의 예시 코드와 참고사항을 확인해 주시기 바랍니다. {% endhint %} **샵바이 예시 코드** {% code lineNumbers="true" expandable="true" %} ```javascript ``` {% endcode %} **고도몰 예시코드**

<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

| ### 인터페이스 ```java // myapp.banner createImageBanner(imageUrl: string); // 이미지 주소만 사용시 createImageBanner(imageUrl: string, option: object); // 이미지주소, 옵션 사용시 createImageBanner(option: object); // 옵션만 사용시 ``` #### 이미지 주소만 사용 시 ```java // 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); ``` #### 이미지 주소 옵션 사용 시 ```java const config = { textColor: "#ffffff", paddingColor: "#aaf0c4", imageUrl: "" }; // 마이앱 어드민 설정값 샘플 const banner = myapp.banner.createImageBanner("https://sample.com/sample.png", config); // 어드민 설정값 샘플에 있는 imageUrl은 무시되고 첫번째 인자로 전달받은 이미지 주소로 사용됨 ``` #### 옵션만 사용 시 ```java const config = { textColor: "#ffffff", paddingColor: "#aaf0c4", imageUrl: "https://sample.com/sample.png" }; // 마이앱 어드민 설정값 샘플 const banner = myapp.banner.createImageBanner(config); ``` #### 배너영역 스타일 커스텀 예시 ```java // 마이앱 어드민 설정 모두 무시하고 특정 스타일만 반영하고자 할 경우 예시 (배경색상 변경) const banner = myapp.banner.createImageBanner("https://sample.com/sample.png", { styles: { backgroundColor: "#000000" } }); ``` ### 생성된 스크립트 삽입 시 체크사항 * 마이앱 어드민에서 배너 활성화 유무 설정 가능 * 사용자가 배너를 닫았을 경우 세션 유지기간동안 배너 미노출 ```java // 배너 삽입 여부 체크 if (!config.isEnabled || sessionStorage.getItem(myapp.constants.BANNER_CLOSE_SIGNAL) === 'true') return; const banner = myapp.banner.createImageBanner("https://sample.com/sample.png"); ```