배너용 웹 타겟팅
웹 타겟팅을 사용하면 코드를 변경하지 않고도 Braze에서 바로 웹사이트의 배너 표시 위치를 선택할 수 있습니다. CSS 선택기(selector)로 배치가 페이지의 특정 위치를 가리키도록 지정하면 Braze 웹 SDK가 해당 위치에 배너를 자동으로 삽입합니다.
Web Targeting for Banners은(는) 현재 조기 액세스 단계입니다. 조기 액세스 참여에 관심이 있으시면 Braze account 매니저에게 문의하세요.
전제 조건
웹 타겟팅을 사용하려면 먼저 다음 초기 설정을 완료하세요.
- 웹사이트에 Braze 웹 SDK가 설치 및 초기화되어 있어야 합니다.
- 개발자가 SDK에서 자동 삽입을 옵트인해야 합니다. 기술적인 단계는 개발자 가이드의 웹 타겟팅: 배너 자동 삽입을 참조하세요.
이 설정을 완료하면 배치 타겟팅을 변경할 때마다 개발자의 추가 작업 없이 대시보드에서 웹 타겟팅으로 배치를 업데이트할 수 있습니다.
웹 타겟팅이란 무엇인가요?
일반적으로 웹사이트에 배너를 표시하려면 개발자가 배너의 HTML을 페이지의 특정 위치에 배치하는 코드를 작성해야 합니다. 웹 타겟팅은 이 단계를 없애 줍니다. 웹사이트에서 배너가 표시될 위치를 하드코딩하는 대신 CSS 선택기를 사용해 대상 위치를 지정합니다. CSS 선택기는 #homepage-hero 또는 .promo-banner-slot처럼 CSS를 사용해 페이지의 HTML 요소를 식별하는 짧은 텍스트입니다. Google Chrome의 ‘검사’와 같은 웹 개발자 도구를 사용하면 타겟팅하려는 요소의 CSS를 찾을 수 있습니다. Braze Operator를 활용해 적절한 선택기를 생성할 수도 있습니다.
배치에 웹 타겟팅 구성하기
웹 타겟팅은 설정 > 배너 배치의 배치에서 구성합니다. 아직 배치를 생성하지 않았다면 먼저 배치 ID를 참조하세요.
- 설정 > 배너 배치로 이동한 다음 편집할 기존 배치를 선택하거나 배치 생성을 선택해 새 배치를 만듭니다.
- 배치 양식에서 웹 배치 타겟팅 섹션으로 스크롤합니다.
- CSS 선택기에 배너가 표시될 페이지 요소의 CSS 선택기를 입력합니다(예:
#homepage-hero또는.promo-banner-slot). - 삽입 방법에서 해당 요소를 기준으로 배너를 배치할 위치를 선택합니다.
| 옵션 | 결과 |
|---|---|
| 앞에 삽입 | 배너가 대상 요소 바로 앞에 표시됩니다. |
| 뒤에 삽입 | 배너가 대상 요소 바로 뒤에 표시됩니다. |
| 내부에 추가 | Braze가 배너를 대상 요소 내부의 마지막 항목으로 추가합니다. |
- (선택 사항) 배너를 특정 페이지로 제한하려면 URL 타겟팅을 입력합니다.
- 일치 유형: 현재 페이지의 URL이 입력한 값을 포함해야 하는지, 값과 같아야 하는지, 또는 정규표현식(정규식)과 일치해야 하는지 선택합니다.
- URL: 일치시킬 페이지 URL(또는 URL 패턴)입니다. 두 필드를 모두 비워 두면 CSS 선택기가 발견되는 모든 페이지에 배너가 표시됩니다.
- 저장을 선택합니다.
CSS 선택기 필드는 개발자가 사이트의 다른 곳에서 사용하는 모든 유효한 CSS 선택기와 함께 작동합니다. ID(#element-id), 클래스(.element-class) 또는 더 구체적인 조합을 사용할 수 있습니다. 무엇을 입력해야 할지 잘 모르겠다면 Braze Operator나 개발팀에 타겟팅하려는 위치에 사용할 선택기를 문의하세요.
제한 사항
- 웹 타겟팅은 웹 SDK에서만 사용할 수 있습니다. 모바일 배치에는 적용되지 않습니다.
- 내부에 추가는 일부 HTML 요소(예: 이미지 또는 양식 요소)에서 지원되지 않습니다. 이 옵션을 선택했는데 배너가 표시되지 않는다면 앞에 삽입 또는 뒤에 삽입을 사용해 보거나 개발팀에 대상 요소를 확인해 달라고 요청하세요.
다음 단계
- 배너 만들기 — 이 배치에 콘텐츠를 전달하는 Campaign(캠페인) 또는 캔버스 단계를 구축합니다.
- 배너 정보 — 배너의 일반 개념, 배치 ID 및 우선순위를 알아봅니다.
- 웹 타겟팅: 배너 자동 삽입 — 사이트에서 이 기능이 작동하기 전에 필요한 개발자용 설정입니다.