이 페이지는 AI로 자동 번역되었으며 부정확한 내용이 포함될 수 있습니다. 번역 오류를 신고하려면 페이지 오른쪽 목차 아래에 있는 피드백 기능을 사용하세요.

웹 타겟팅으로 배너 자동 삽입하기

웹 배치의 경우, 배치 설정에서 웹 타겟팅을 선택적으로 구성하여 페이지에서 배너가 표시될 위치를 지정할 수 있습니다. 웹 타겟팅이 구성되면 Braze 웹 SDK는 insertBanner()를 명시적으로 호출하지 않아도 지정된 위치에 배너를 자동으로 삽입합니다. 자세한 내용은 배너용 웹 타겟팅을 참조하세요. 배너와 배너 배치에 대한 배경 정보는 배너 정보 및 배치 관리를 참조하세요.

중요

Web Targeting for Banners은(는) 현재 조기 액세스 단계입니다. 조기 액세스 참여에 관심이 있으시면 Braze account 매니저에게 문의하세요.

전제 조건

웹 타겟팅 삽입은 페이지에 HTML을 추가하므로 insertBanner와 동일한 옵트인이 필요합니다.

braze.initialize("YOUR-API-KEY", {
  baseUrl: "YOUR-ENDPOINT",
  allowUserSuppliedJavascript: true, // required for Web Targeting auto-insert
});

allowUserSuppliedJavascript: true가 없으면 자동 삽입은 아무 작업도 수행하지 않으며 SDK가 오류를 기록합니다.

웹 타겟팅 삽입 트리거하기

insertWebTargetingBanners() 메서드를 호출하면 각 배너에 웹 타겟팅 정보가 있는 경우 이를 사용해 페이지에서 해당 배너가 들어갈 위치를 찾고 그 위치에 자동으로 삽입합니다. 이 메서드는 SDK 초기화 직후, 그리고 웹 SDK를 통해 배너 동기화가 완료될 때마다 호출하세요.

웹 SDK가 웹 타겟팅 정보가 있는 배너의 대상 삽입 위치를 찾지 못하면 삽입을 계속 재시도합니다. 덕분에 웹 타겟팅은 초기 페이지 로드 이후에야 나타나는 페이지 영역도 타겟팅할 수 있습니다. 이 재시도 동작은 SDK를 초기화할 때 initialize() 메서드의 enableWebTargetingBannerRetryLoop 파라미터로 비활성화할 수 있습니다.

braze.initialize("YOUR-API-KEY", {
  baseUrl: "YOUR-ENDPOINT",
  allowUserSuppliedJavascript: true,
  enableWebTargetingBannerRetryLoop: false, // don't retry if the target isn't in the DOM yet
});

원하는 경우 SDK 초기화 후 automaticallyInsertWebTargetingBanners()를 호출할 수 있습니다. 이 메서드를 호출하면 웹 SDK가 배너 동기화를 완료한 직후 존재하는 배너에 대해 웹 타겟팅 삽입을 즉시 수행하는 구독이 설정됩니다. 따라서 insertWebTargetingBanners()를 호출할 필요가 없어지지만, 웹 타겟팅 삽입 시점을 더 세밀하게 제어하고 싶다면 해당 메서드만 사용해도 됩니다. 이 메서드는 호출 시점에는 배너를 삽입하지 않습니다.

단일 페이지 앱(SPA)

웹사이트가 단일 페이지 앱(SPA) 아키텍처 또는 유사한 시스템(예: React Router, Vue)을 사용해 페이지 라우팅과 탐색을 처리하거나, 삽입된 배너를 수동으로 제거하는 경우 다음 사항에 유의하세요.

웹 타겟팅으로 DOM에 삽입된 배너가 라우팅에 따른 재렌더링으로 제거되면, 웹 SDK는 새 페이지에 해당 배너를 자동으로 다시 삽입하지 않습니다. 마찬가지로 재렌더링 후에도 배너가 남아 있지만 이전 경로로 URL 범위가 지정된 경우, 웹 SDK는 해당 배너를 DOM에서 자동으로 제거하지 않습니다.
클라이언트 측 경로가 렌더링될 때마다 insertWebTargetingBanners()를 호출하여 SDK가 조율하는 다양한 관리 로직을 모두 실행하세요. 이 메서드는 상태가 변경된 배너만 다시 삽입하므로 탐색할 때마다 호출해도 안전합니다.

문제 해결

배너가 자동 삽입되지 않는 일반적인 이유는 다음과 같으며, 이러한 문제는 SDK 로거(enableLogging: true)를 통해 기록됩니다.

증상	가능한 원인
어디에도 삽입되지 않으며 SDK가 “`allowUserSuppliedJavascript` is required”를 기록함	`allowUserSuppliedJavascript: true` 없이 `initialize()`가 호출되었습니다.
SDK가 “target element not found for selector”를 기록함	CSS 선택기가 아직 어떤 요소와도 일치하지 않습니다. 요소가 나중에 렌더링되면 재시도 루프를 통해 자동으로 해결됩니다. 그렇지 않은 경우 배치에 구성된 선택기를 다시 확인하세요.
SDK가 요소에 대해 “cannot insert inside”를 기록함	배너의 웹 타겟팅 정보에 따르면 `video` 또는 `img` 같은 지원되지 않는 요소에 삽입되어야 합니다. 배너용 웹 타겟팅을 참조하세요.
배너가 한 번 삽입되지만 경로 변경 시 업데이트되지 않음	SPA 고려 사항을 참조하세요. 클라이언트 측 경로가 렌더링될 때마다 `insertWebTargetingBanners()`를 호출하세요.
프레임워크 재렌더링 후 배너가 사라짐	SPA 고려 사항을 참조하세요.

다음 단계

배너용 웹 타겟팅 — 회사 사용자가 대시보드에서 배치에 대한 CSS 선택기, 삽입 위치, URL 타겟팅을 구성하는 방법입니다.
배치 관리 — 배치를 생성하고 새로고침하며 insertBanner로 배너를 수동으로 표시하는 방법입니다.
배너: 자주 묻는 질문

팁

웹 타겟팅의 향후 우선순위 결정에 도움을 주고 싶으신가요? [email protected]으로 문의하세요.

New Stuff!