# 온사이트 캠페인 2단계 3) 다이내믹 페이지 에디터

기본 페이지로 설정한 웹페이지의 구성 요소를 편집할 수 있습니다.<br>

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/t2eiee1c6q/1591689731684/image.png" alt=""><figcaption></figcaption></figure>

<br>

## **상단 메뉴**

다이내믹 페이지 에디터의 상단 메뉴 기능은 다음과 같습니다.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/t2eiee1c6q/1591689907142/image.png" alt=""><figcaption></figcaption></figure>

1. 기본 페이지: 기본 페이지로 설정한 원본 화면을 확인할 수 있습니다.
2. A 안: 다이내믹 페이지 A 안 수정 화면으로 이동합니다.
3. B 안: 다이내믹 페이지 B 안 수정 화면으로 이동합니다.
4. 되돌리기: 마지막 작업 실행을 취소합니다. (한 번 이상 변경 이력이 있을 경우 활성화)
5. 다시실행: 실행 취소한 작업을 다시 실행합니다.
6. 미리보기: 편집한 내용을 웹 브라우저에서 확인합니다.
7. 클릭 추적: 설정한 클릭 추적 목록을 확인할 수 있습니다.
8. 저장하기: 수정/편집 내용을 저장합니다. (한 개 이상의 수정/편집 항목이 있을 경우 활성화)

***

## **구성 요소 편집** <a href="#id-775321020" id="id-775321020"></a>

편집을 원하는 구성 요소에 마우스 오버하면, 해당 구성 요소의 HTML 태그 및 파란색 테두리가 표시됩니다.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/t2eiee1c6q/1591692080810/image.png" alt=""><figcaption></figcaption></figure>

***

## **편집 메뉴** <a href="#id-371988010" id="id-371988010"></a>

편집할 구성 요소를 클릭하면 편집 메뉴가 표시됩니다.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/t2eiee1c6q/1591693561096/image.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/t2eiee1c6q/1591775764097/image.png" alt="" width="188"><figcaption></figcaption></figure>

1. 수정/편집: 텍스트 및 이미지를 변경하고 스타일을 편집할 수 있습니다.
2. 고급 수정: HTML 및 CSS 코드를 사용하여 요소를 원하는 모양으로 만들 수 있습니다.
3. 숨기기/삭제: 선택한 구성 요소를 숨기거나 삭제할 수 있습니다.
4. 삽입/추가 > 텍스트 추가: 선택한 구성 요소에 텍스트를 추가할 수 있습니다.
5. 삽입/추가 > 이미지 추가: 선택한 구성 요소에 이미지를 추가할 수 있습니다.
6. 클릭 추적: 선택한 구성 요소에 대해 추적 ID를 지정해 클릭 이력을 추적할 수 있습니다. 추적 ID에 따른 클릭 데이터는 캠페인 분석 리포트에서 '클릭 수' 데이터에 마우스 오버하여 상세 내용을 확인할 수 있습니다.

***

## **수정/편집**

### **텍스트 편집**

텍스트(HTML) 요소를 선택한 후 수정/편집 선택 시 텍스트와 스타일 편집이 가능합니다.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/t2eiee1c6q/1591756612117/image.png" alt=""><figcaption></figcaption></figure>

1. 수정/편집 > 텍스트 편집기: 텍스트 내용 및 모양(굵기, 기울임, 밑줄, 취소) 과 정렬 상태를 수정할 수 있습니다.
2. 수정/편집 > 스타일 편집기: 글꼴, 폰트 사이즈, 폰트 컬러, 간격에 대한 수정이 가능합니다.<br>

### **이미지 편집**

이미지(HTML) 요소를 선택한 후 수정/편집 선택 시 이미지 변경과 스타일 편집이 가능합니다.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/t2eiee1c6q/1591774520561/image.png" alt=""><figcaption></figcaption></figure>

1. 수정/편집 > 이미지 변경: 이미지 URL 및 파일 업로드를 이용하여 이미지를 변경할 수 있습니다.
2. 수정/편집 > 스타일 편집기: 이미지 폭, 높이, 투명도, 간격(Margin) 수정이 가능합니다.

### **기타**

기타(DIV 등) 요소를 선택한 후 수정/편집 선택 시 스타일 편집이 가능합니다.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/t2eiee1c6q/1591775015486/image.png" alt="" width="375"><figcaption></figcaption></figure>

## **고급 수정**

선택한 구성 요소의 HTML/CSS 코드를 직접 편집할 수 있습니다.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/t2eiee1c6q/1591775465383/image.png" alt=""><figcaption></figcaption></figure>

1. 고급수정 > HTML 편집기: 구성 요소의 HTML을 직접 편집할 수 있습니다.
2. 고급수정 > CSS 편집기: 구성 요소의 CSS를 직접 편집할 수 있습니다.

***

## **숨기기/삭제**

선택한 구성요소를 숨기거나 삭제할 수 있습니다.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/t2eiee1c6q/1591775615708/image.png" alt=""><figcaption></figcaption></figure>

1. 숨기기/삭제 > 숨기기: 선택한 구성 요소를 숨기지만, 구성 요소의 형태(영역)는 그대로 유지 됩니다.
2. 숨기기/삭제 > 삭제: 선택한 구성 요소를 삭제합니다. 구성 요소의 형태(영역)까지 삭제됩니다.

***

## **삽입/추가 > 텍스트 추가**

선택한 구성 요소 하단에 텍스트 추가할 수 있습니다.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/t2eiee1c6q/1591776770689/image.png" alt=""><figcaption></figcaption></figure>

***

## **삽입/추가 > 이미지 추가**

선택한 구성 요소 하단에 이미지를 추가할 수 있습니다.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/t2eiee1c6q/1591776793576/image.png" alt=""><figcaption></figcaption></figure>

***

<br>

## **클릭 추적**

선택한 구성 요소에 클릭 추적 ID를 지정해 편집한 구성 요소별로 고객이 클릭한 횟수를 집계하여 통계에서 확인할 수 있습니다.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/t2eiee1c6q/1591778090498/image.png" alt=""><figcaption></figcaption></figure>

1. 해당 구성 요소의 클릭을 추적하려면 고유의 추적 코드(ID) 값을 입력해야 합니다. (중복확인 필수, 영대소문자 및 숫자 사용)
2. 중복 확인 후 \[저장] 버튼을 클릭하면 해당 구성 요소의 클릭 수를 집계할 수 있습니다. 집계한 데이터는 캠페인 분석 리포트에서 확인 가능합니다.<br>


---

# Agent Instructions: 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:

```
GET https://docs.groobee.ai/old-admin/onsite/onsite-create/web-hybrid/step3-dynamic.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.