> For the complete documentation index, see [llms.txt](https://help.citrusad.com/retail-media-interface/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.citrusad.com/retail-media-interface/integration/ko/brand-pages/brand-page-retailer-integration-guide/overview-1.md).

# 개요

## 브랜드 페이지란 무엇인가요?

브랜드 페이지는 귀사의 웹사이트에 상주하며 특정 브랜드 콘텐츠를 선보이는 맞춤형 랜딩 페이지 경험입니다. 귀사의 도메인에서 호스팅되고 귀사의 UI 구성 요소를 사용하여 렌더링됩니다.

브랜드 페이지는 일반 광고 캠페인과 별도로 Epsilon 플랫폼에서 관리됩니다.\
비슷한 생성 및 검토 워크플로를 사용하지만, 이는 기존 광고가 아닌 리테일러 사이트의 브랜드 랜딩 페이지 경험을 나타냅니다.

**예시:** 사용자가 `yoursite.com/brands/nike` 에 방문하여 나이키 제품이 포함된 나이키 브랜드 페이지를 보게 되지만, 이는 귀사 웹사이트의 일부처럼 보이고 느껴집니다.

## 구축할 내용

리테일러 엔지니어로서 귀하가 수행할 작업:

* 브랜드 페이지 URL에 대한 라우트 추가(예: `/brands/{slug}`).

{% hint style="info" %}
리테일러가 각 브랜드 페이지에 대한 URL을 직접 할당할 필요는 없습니다. URL은 플랫폼에서 자동으로 관리됩니다.

단, 브랜드 페이지 기본 URL(접두사 포함)은 온보딩 중에 설정해야 합니다(예: 리테일러 스타일 가이드). 전체 URL이나 접두사가 제공되지 않으면 설정 페이지에서 브랜드 페이지 URL이 채워지지 않습니다.
{% endhint %}

* 추출된 슬러그를 사용하여 Brand Pages API를 호출합니다.
* 반환된 콘텐츠 모듈을 렌더링합니다.
* 노출, 클릭 및 장바구니 담기 추적을 구현합니다.
* 퍼스트 파티 추적을 위한 리버스 프록시를 구성합니다.

{% hint style="info" %}
이 단계는 클라이언트 측 추적에만 필요합니다.
{% endhint %}

### 귀하의 책임 대 Epsilon's

| 귀하가 처리하는 항목           | Epsilon 제공 항목       |
| --------------------- | ------------------- |
| ✅ 콘텐츠를 가져오기 위한 API 연동 | ✅ 브랜드 페이지 콘텐츠 및 템플릿 |
| ✅ 귀하의 사이트에 콘텐츠 렌더링    | ✅ 추적 인프라            |
| ✅ 리버스 프록시 설정          | ✅ 분석 및 리포팅          |
| ✅ 스타일 가이드 제공          | ✅ 캠페인 관리 도구         |
| ✅ 테스트 및 검증            | ✅ 기술 지원             |

## 브랜드 페이지 작동 방식

### 엔드 투 엔드 흐름

{% hint style="info" %}
브랜드 페이지 콘텐츠는 Epsilon UI에서 구성되고 미리 보기가 제공됩니다. 리테일러는 API를 통해서만 브랜드 페이지를 연동하며 사이트에 최종 경험을 렌더링할 책임이 있습니다.
{% endhint %}

검토 프로세스 중에 리테일러는 승인 전에 구성된 브랜드 페이지 콘텐츠를 미리 볼 수 있습니다.

### 템플릿 및 모듈

온보딩하는 동안, Epsilon 는 귀하의 팀과 협력하여 다음을 정의하는 템플릿을 생성합니다.

* 사용 가능한 콘텐츠 모듈(히어로, 상품 그리드, 텍스트, 이미지 등)이며, 모듈 이름은 리테일러 분류 체계에 맞게 UI에서 구성할 수 있습니다.
* 각 모듈에 대한 제약 조건(글자 수 제한, 이미지 dimensions 등).
* 브랜드 가이드라인에 부합하는 스타일링.

브랜드는 캠페인을 생성할 때 템플릿을 선택한 다음 해당 제약 조건 내에서 콘텐츠를 채웁니다.

{% hint style="info" %}
Brand Pages API는 콘텐츠 모듈과 추적 URL을 반환합니다. 리테일러는 자체 UI 구성 요소 및 디자인 시스템을 사용하여 스타일링을 적용할 책임이 있습니다.
{% endhint %}

**예시**

다음 예시는 브랜드가 브랜드 페이지를 생성할 때 일반적인 콘텐츠 모듈을 채우는 방법을 보여줍니다. 이는 샘플 입력값일 뿐이며 선택한 템플릿 및 캠페인 목표에 따라 조정될 수 있습니다.

**HERO 모듈**

* **헤드라인:** 최신 여름 컬렉션을 만나보세요
* **서브헤드라인:** 모든 순간을 위한 신선한 스타일
* **CTA:** 지금 쇼핑하기

**TEXT 모듈**

편안함, 스타일, 기능성을 위해 디자인된 최신 상품을 둘러보세요 - 일상 착용에 완벽합니다.

**IMAGE 모듈**

* 캡션:\*\* 신상품 입고
* **Alt 텍스트:** 여름 컬렉션을 착용한 모델
* URL: <https://example-cdn.com/summer-collection.jpg>

**PRODUCT\_GRID 모듈**

상품 그리드를 사용하여 베스트셀러 또는 시즌 상품을 소개하고 참여와 전환을 유도하세요.

#### 모듈 구성:

| 모듈             | 설명                           | 구성 가능한 요소 (요약)               |
| -------------- | ---------------------------- | ---------------------------- |
| HERO           | 이미지, 헤드라인, CTA가 포함된 전체 너비 배너 | 헤드라인, 서브헤드라인, CTA, 이미지, 오버레이 |
| PRODUCT\_GRID  | 상품 그리드 또는 캐러셀                | 상품, 섹션 제목, 설명, CTA           |
| TEXT           | 텍스트 콘텐츠 블록(헤드라인, 본문 문구)      | 텍스트 필드, CTA                  |
| IMAGE          | 선택적 링크가 포함된 단일 이미지           | 이미지, 캡션, 대체 텍스트, 선택적 링크      |
| IMAGE\_GALLERY | 그리드 레이아웃의 여러 이미지             | 이미지, 캡션, 대체 텍스트, 섹션 제목, 설명   |
| FILTER\_MENU   | 상품 그리드용 수평 필터 탭              | 필터 레이블 및 정렬                  |
| SPLIT\_LAYOUT  | 중첩된 모듈이 있는 다중 열 레이아웃         | 레이아웃 구조 및 중첩된 모듈             |

{% hint style="info" %}
모듈 및 리테일러 요구 사항에 따라 각 구성 가능한 요소를 필수, 선택(허용됨) 또는 비활성화로 설정할 수 있습니다.

일부 필드는 필수 또는 허용됨으로 표시된 경우 최대 글자 수 제한을 적용할 수도 있습니다.
{% endhint %}

### 모듈 태그

템플릿에는 각 모듈에 선택적 `tags` 필드가 포함될 수 있습니다. 이는 연동 시 레이아웃 결정, 분석 또는 자체 구성 요소에 모듈을 매핑하는 데 사용할 수 있는 짧은 문자열 레이블(예: `["header"]`) 목록입니다.

#### API 응답에서 태그가 작동하는 방식

* 모듈에 태그가 있는 경우 해당 항목에 `tags` 배열로 표시됩니다. `contentData`.
* 모듈에 태그가 없는 경우 `tags` 속성이 응답에서 완전히 누락되었습니다. 다음과 같이 표시되지 않습니다. `"tags": []`.
* 누락된 `tags` 필드는 "태그 없음"과 동일하게 취급하세요. 해당 필드가 없어도 오류를 발생시키지 마세요.
* 태그는 다음 내부의 중첩된 모듈에서도 지원됩니다. `SPLIT_LAYOUT` - 루트 분할 모듈에서만 지원되는 것이 아닙니다.

{% hint style="info" %}
중요

태그는 리테일러와 통합 팀 간에 합의된 불투명한 레이블입니다. 광고 추적 태그나 다른 시스템과는 관련이 없습니다. 혼동을 피하기 위해 항상 이를 *"모듈 태그"* 또는 \_"브랜드 페이지 모듈 태그"\_라고 부르세요.
{% endhint %}

태그가 있는 응답 모듈 예시

```json
{
  "id": "image-1",
  "contentType": "IMAGE",
  "order": 1,
  "tags": ["header"],
  "imageUrl": "https://example.com/images/banner.jpg"
}
```

**태그가 없는 응답 모듈 예시 (tags 속성 생략됨):**

```json
{
  "id": "image-2",
  "contentType": "IMAGE",
  "order": 2,
  "imageUrl": "https://example.com/images/promo.jpg"
}
```

#### 이것이 API 응답에 의미하는 바

해당 `POST /ads/v3/brand-pages` 응답은 동일한 규칙을 반영합니다. 모듈 유형은 다음과 같은 경우에만 `contentData` 라이브 템플릿의 일부이고 브랜드 페이지에서 해당 모듈에 대한 콘텐츠를 구성했을 때 나타납니다.

모듈 내부의 필드는 JSON에서 누락될 수 있으며, `null`, 또는 템플릿에서 해당 필드를 선택 사항으로 지정하거나 비활성화한 경우, 또는 브랜드에서 이를 설정하지 않은 경우 빈 값일 수 있습니다. 이는 예상된 동작이며 페이로드 결함을 나타내지 않습니다.

선택적 유형 및 안전한 접근자를 사용하여 렌더링을 구현하세요. 예를 들어 다음과 같은 경우에만 CTA 블록을 렌더링합니다. `ctaText` 및 탐색 대상이 모두 존재하는 경우 히어로 미디어를 숨깁니다. `mediaUrl`이(가) 없는 경우.

`trackers`페이지 수준 또는 노드의 정보는 추적 가능한 상호작용이 없을 때 생략될 수 있습니다. 다음에서 적용 가능한 템플릿 키가 모두 있는 경우에만 URL을 구성하세요. `trackingTypes` 및 이에 해당하는 `trackers.`\<slot>`.params`, API에서 제공되는 경우.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.citrusad.com/retail-media-interface/integration/ko/brand-pages/brand-page-retailer-integration-guide/overview-1.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.