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

이프두 블로그

마케팅 자동화 - IFDO > 온 사이트 마케팅,새소식

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

업데이트 : 2025-12-26

이프두의 웰컴바는 사이트 위에 플로팅 되는 형태입니다. 그래서 상단에 웰컴바를 사용하는 경우 로고를 덮으며 나타날 수 있다는 문제점이 있는데요.

상단바_탑바_웰컴바_상단팝업_플로팅메시지_상단팝업커스텀_온사이트마케팅_자동화팝업_이프두_1.png

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

웰컴바 ‘사용자 지정’

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

상단바_탑바_웰컴바_상단팝업_플로팅메시지_상단팝업커스텀_온사이트마케팅_자동화팝업_이프두_2.png

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

<div> id 란?

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

💡<div> id 값이 없는 경우

<div> class 값으로 대체하여 사용할 수 있습니다. 단, 동일한 class로 지정된 <div>가 여러 개인 경우 첫 번째 <div>에 적용됩니다.

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

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

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

상단바_탑바_웰컴바_상단팝업_플로팅메시지_상단팝업커스텀_온사이트마케팅_자동화팝업_이프두_3.png

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

상단바_탑바_웰컴바_상단팝업_플로팅메시지_상단팝업커스텀_온사이트마케팅_자동화팝업_이프두_4.png

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

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

상단바_탑바_웰컴바_상단팝업_플로팅메시지_상단팝업커스텀_온사이트마케팅_자동화팝업_이프두_5.png

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

상단바_탑바_웰컴바_상단팝업_플로팅메시지_상단팝업커스텀_온사이트마케팅_자동화팝업_이프두_6.png

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

상단바_탑바_웰컴바_상단팝업_플로팅메시지_상단팝업커스텀_온사이트마케팅_자동화팝업_이프두_7.png

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

상단바_탑바_웰컴바_상단팝업_플로팅메시지_상단팝업커스텀_온사이트마케팅_자동화팝업_이프두_22.png

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

상단바_탑바_웰컴바_상단팝업_플로팅메시지_상단팝업커스텀_온사이트마케팅_자동화팝업_이프두_9.png

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

상단바_탑바_웰컴바_상단팝업_플로팅메시지_상단팝업커스텀_온사이트마케팅_자동화팝업_이프두_10.png

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

상단바_탑바_웰컴바_상단팝업_플로팅메시지_상단팝업커스텀_온사이트마케팅_자동화팝업_이프두_11.png

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

상단바_탑바_웰컴바_상단팝업_플로팅메시지_상단팝업커스텀_온사이트마케팅_자동화팝업_이프두_12.png

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

상단바_탑바_웰컴바_상단팝업_플로팅메시지_상단팝업커스텀_온사이트마케팅_자동화팝업_이프두_13.png

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

상단바_탑바_웰컴바_상단팝업_플로팅메시지_상단팝업커스텀_온사이트마케팅_자동화팝업_이프두_14.png

<div> 값 입력 방법

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

ex. 작성 예시

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

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

상단바_탑바_웰컴바_상단팝업_플로팅메시지_상단팝업커스텀_온사이트마케팅_자동화팝업_이프두_15.png

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

상단바_탑바_웰컴바_상단팝업_플로팅메시지_상단팝업커스텀_온사이트마케팅_자동화팝업_이프두_15.png

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

상단바_탑바_웰컴바_상단팝업_플로팅메시지_상단팝업커스텀_온사이트마케팅_자동화팝업_이프두_16.png

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

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

상단바_탑바_웰컴바_상단팝업_플로팅메시지_상단팝업커스텀_온사이트마케팅_자동화팝업_이프두_17.png

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

상단바_탑바_웰컴바_상단팝업_플로팅메시지_상단팝업커스텀_온사이트마케팅_자동화팝업_이프두_18.png

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