웰컴바, 사이트 환경에 맞춰 커스텀 가능한 사용자 지정 기능 추가!

이를 해결하기 위해 웰컴바를 사이트 내부 콘텐츠로 삽입하는 ‘사용자 지정’ 기능을 추가하게 되었습니다. 이제 원하는 영역에 웰컴바를 삽입해 보세요! 우리 사이트 환경에 맞춰 커스텀이 가능합니다✨

웰컴바 ‘사용자 지정’

원하는 노출 영역의 <div> id 값을 입력하여 지정된 위치에 웰컴바를 삽입할 수 있는 기능입니다. 

웰컴바가 사이트 영역 내의 콘텐츠로 삽입되기 때문에 다른 콘텐츠를 가리지 않고 노출할 수 있다는 장점이 있습니다. 단, ‘사용자 지정’ 웰컴바 역시 기존의 오토메시지들과 동일하게 세션 내 1회만 노출됩니다. 

<div> id 란?

이프두 웰컴바를 원하는 위치에 삽입하기 위해서는 <div> id 값을 입력해야 합니다. HTML에서 <div>는 콘텐츠를 포함하고 있는 레이어(layer)를 의미하며 각각의 <div>를 구분하기 위한 명칭은 <div id=”값”> 으로 표시됩니다. ex: <div id=”header”>, <div id=”footerMenu”>, <div id=”top_btn”>···

• 웰컴바 작성 & <div> id 값 추출 방법 (PC) 바로 읽기

• 웰컴바 작성 & <div> id 값 추출 방법 (Mobile) 바로 읽기

웰컴바 작성 & <div> id 값 추출 방법 (PC) 

1. 이프두 로그인 후 Auto Msg > 새로운 오토메시지 만들기로 이동합니다.

2. 세그먼트를 선택한 뒤 [저장 후 DO 액션 선택]을 클릭합니다.

💡 가이드에서는 방문하는 모든 사용자에게 웰컴바가 뜰 수 있도록 [방문 횟수 > 1회 이상] 조건을 사용했습니다. 단, PC와 Mobile의 <div> id가 ​같지 않고 구분될 수 있으므로 [기기 구분 > PC 웹] 세그먼트도 추가했습니다. *반응형인 경우 기기를 구분하지 않아도 괜찮습니다.

3. 인앱메시지 형태 > 웰컴바, CTA는 자유롭게 선택한 후 [편집 하기]를 클릭해 주세요. *가이드에서는 슬라이드형 적용

4. 웰컴바 내용을 작성합니다.

5. (옵션) 웰컴바 노출 옵션을 지정합니다. 

6. 웰컴바 노출 방식 > 사용자 지정을 선택하고 다음의 순서에 따라 <div> id 값을 추출하여 입력하세요.  

6-1. 다른 브라우저를 이용하여 쇼핑몰 홈페이지를 열어 주세요.

6-2. 키보드에서 F12를 클릭하면 개발자도구가 오픈됩니다. 

6-3. Select 버튼을 클릭합니다.

6-4. 쇼핑몰 페이지에서 웰컴바를 삽입하고자 하는 영역을 클릭하고 <div> id 값을 찾습니다. <div> id는 <div id=”A”> 형태로 지정되어 있습니다. 

6-5. <div> id 값을 복사(ctrl+c) 합니다.

6-6. 이프두 메시지 편집화면으로 돌아와 <div> id 값을 입력합니다. 

<div> 값 입력 방법

• <div> id 값을 사용하는 경우: #+값
  # 또는 .을 입력하지 않는 경우 id 값으로 인식합니다. 

• <div> class 값을 사용하는 경우: .+값

ex. 작성 예시

• <div> id가 “top_bar”인 경우 → top_bar 또는 #top_bar 입력

• <div> class가 “top_wrap”인 경우 → .top_wrap 입력

7. 웰컴바의 노출 설정을 마무리하고 저장합니다.

8. 오토메시지 이름을 입력하고 완료하세요.

9. 인앱메시지 목록에서 작성한 오토메시지를 활성화하면 다음과 같이 노출이 시작됩니다! 

웰컴바 작성 & <div> id 값 추출 방법 (Mobile) 

1. 이프두 로그인 후 Auto Msg > 새로운 오토메시지 만들기로 이동합니다.

2. 세그먼트를 선택한 뒤 [저장 후 DO 액션 선택]을 클릭합니다.

💡가이드에서는 방문하는 모든 사용자에게 웰컴바가 뜰 수 있도록 [방문 횟수 > 1회 이상] 조건을 사용했습니다. 단, PC와 Mobile의 <div> id가 ​같지 않고 구분될 수 있으므로 [기기 구분 > 모바일 웹, 하이브리드 앱] 세그먼트도 추가했습니다. *반응형인 경우 기기를 구분하지 않아도 괜찮습니다. ​

3. 인앱메시지 형태 > 웰컴바, CTA는 자유롭게 선택한 후 [편집 하기]를 클릭해 주세요. *가이드에서는 슬라이드형 적용

4. 웰컴바 내용을 작성합니다.

5. (옵션) 웰컴바 노출 옵션을 지정합니다. 

6. 웰컴바 노출 방식 > 사용자 지정을 선택하고 다음의 순서에 따라 <div> id 값을 추출하여 입력하세요.  

6-1. 쇼핑몰 홈페이지(모바일)를 준비합니다. *예시에서는 웨일 브라우저의 모바일 창을 사용했습니다. 

6-2. 키보드에서 F12를 클릭하고 개발자도구를 열어주세요.

6-3. Select 버튼을 클릭합니다.

6-4. 웰컴바를 삽입하고자 하는 영역을 클릭하고 <div> id 값을 찾습니다. 

<div> id 값이 없는 경우 <div> class 값을 찾아 주세요. 

6-5. <div> class 값을 복사(ctrl+c) 합니다.

6-6. 이프두 메시지 편집화면으로 돌아와 <div> id 값을 입력합니다. 

<div> 값 입력 방법

• <div> id 값을 사용하는 경우: #+값
  # 또는 .을 입력하지 않는 경우 id 값으로 인식합니다. 

• <div> class 값을 사용하는 경우: .+값

ex. 작성 예시

• <div> id가 “top_bar”인 경우 → top_bar 또는 #top_bar 입력

• <div> class가 “top_wrap”인 경우 → .top_wrap 입력

7. 웰컴바의 노출 설정을 마무리하고 저장합니다.

8. 오토메시지 이름을 입력하고 완료하세요.

9. 인앱메시지 목록에서 작성한 오토메시지를 활성화하면 다음과 같이 노출이 시작됩니다! 

이렇게 사용자 지정을 활용한 웰컴바 작성이 완료됩니다. 사내에 개발 환경이 갖추어져 있는 경우, 웰컴바를 노출하고자 하는 영역을 직접 만들어(div 영역을 생성하여) 노출하는 것도 가능합니다.

이렇게 사용자 지정 웰컴바는 다양하게 활용해 볼 수 있는데요. 상단, 중앙, 하단 어디든 원하는 영역에 삽입하고 사이트를 커스텀해 보세요✨ 

오토메시지 관련 소식 더 읽기

• 매력적인 혜택을 한 번에! 웰컴바 ‘슬라이드’ 기능 업데이트

• N원 이상 담으면 무료배송! 장바구니 매출 상승을 위한 ‘장바구니 변수’ 추가