> ## Documentation Index
> Fetch the complete documentation index at: https://help.airbridge.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 웹 랜딩 페이지에 사용할 CTA 버튼 만들기

에어브릿지를 활용해 웹 랜딩 페이지에 CTA 버튼을 삽입하고 성과를 측정해 보세요.

## CTA 버튼 이해하기

웹 랜딩 페이지에 도착한 유저의 전환율을 높이기 위해 CTA(Call-To-Action) 버튼으를 해당 페이지에 삽입할 수 있습니다. 에어브릿지 기능을 활용해 CTA 버튼을 클릭한 유저를 원하는 경로로 보내고 성과를 측정할 수 있습니다. 광고나 콘텐츠를 클릭해 웹 랜딩 페이지로 이동된 유저를 앱 설치 여부에 따라 특정 앱 페이지로 보내거나 앱마켓으로 보낼 때 활용해 보세요.

아래는 웹 랜딩 페이지에 사용할 CTA 버튼을 만들기 위해 필요한 사항입니다.

| 항목         | 단계                                 | 담당자 |
| ---------- | ---------------------------------- | --- |
| 준비하기       | 유저 리다이렉트 경로와 리포트 조회 정보 정의          | 마케터 |
| CTA 버튼 만들기 | 웹 랜딩 페이지에 CTA 버튼 설정                | 개발자 |
| 성과 조회하기    | 리포트에서 웹 랜딩 페이지 활용 캠페인으로 발생한 데이터 조회 | 마케터 |

## 준비하기

웹 랜딩 페이지에 CTA 버튼을 삽입하려면 개발자에게 CTA 버튼 개발을 요청해야 합니다. 개발을 요청하기 전에 아래 사항을 모두 준비하세요.

### 유저 리다이렉트 경로

웹 랜딩 페이지에서 CTA 버튼을 클릭한 유저를 조건에 따라 어디로 보낼지 정해야 합니다. 이를 정해야 개발자가 지정된 경로로 유저를 보내도록 CTA 버튼을 개발할 수 있습니다. 아래에서 리다이렉션 경로에 따른 준비사항을 확인하세요.

| 앱 설치 여부  | 리다이렉션 경로 | 준비사항                                                                                                                                                                                                                                                                                                                       |
| -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 앱 설치 유저  | 앱으로 딥링킹  | - 운영체제별로 유저를 보낼 앱 페이지의 [URL 스킴 딥링크](/ko/guides/understanding-deep-link#%EC%97%90%EC%96%B4%EB%B8%8C%EB%A6%BF%EC%A7%80%EA%B0%80-%EC%A7%80%EC%9B%90%ED%95%98%EB%8A%94-%EB%94%A5%EB%A7%81%ED%82%B9-%EB%B0%A9%EC%8B%9D)를 준비하세요.<br />- 딥링킹이 실패했을 때 운영체제별로 유저를 보낼 폴백 경로를 앱마켓이나 웹 페이지 중에 결정하세요. 웹 페이지로 유저를 보내려면 웹 페이지 URL을 준비하세요. |
|          | 앱마켓      | -                                                                                                                                                                                                                                                                                                                          |
|          | 웹 페이지    | - 유저를 보낼 웹 페이지 URL을 준비하세요.                                                                                                                                                                                                                                                                                                 |
| 앱 미설치 유저 | 앱마켓      | -                                                                                                                                                                                                                                                                                                                          |
|          | 웹 페이지    | - 유저를 보낼 웹 페이지 URL을 준비하세요.                                                                                                                                                                                                                                                                                                 |

### 리포트 조회 정보

웹 랜딩 페이지에서 CTA 버튼이 클릭됐을 때 이에 대한 정보를 [리포트에서 조회](#성과-조회하기)할 수 있습니다. 리포트에서 조회할 CTA 버튼 정보와 캠페인 정보를 정의하세요.

#### CTA 버튼 정보

<Info>
  **알립니다**

  CTA 버튼을 사용한 캠페인 성과를 정확하게 분석하려면 모든 정보를 정의하는 것을 권장합니다. 이를 정의하지 않을 경우 리포트에서 어떤 캠페인에 CTA 버튼이 사용됐는지 구분하기 어렵습니다.
</Info>

리포트에서 각 그룹바이를 선택했을 때 조회할 CTA 정보를 정의하세요. 아래는 모두 선택사항입니다. 필드는 개발자에게 필요한 항목입니다. 이처럼 정의된 정보는 리포트에서 확인할 수 있으며 버튼 1개당 최대 3개 정보를 정의할 수 있습니다.

| 그룹바이        | 설명                  | 필드                      |
| ----------- | ------------------- | ----------------------- |
| CTA Param 1 | 해당 캠페인에 사용한 버튼 정보 1 | ctaParams.cta\_param\_1 |
| CTA Param 2 | 해당 캠페인에 사용한 버튼 정보 2 | ctaParams.cta\_param\_2 |
| CTA Param 3 | 해당 캠페인에 사용한 버튼 정보 3 | ctaParams.cta\_param\_3 |

CTA Param에는 버튼과 관련된 정보를 자유롭게 정의할 수 있습니다. 아래 예시를 참고하세요. 항목에 포함되지 않은 다른 사항도 정의할 수 있습니다.

| 항목          | 예시                                                                                              |
| ----------- | ----------------------------------------------------------------------------------------------- |
| 웹 랜딩 페이지 유형 | product\_detail, search\_result, category\_list, promo\_landing, event\_landing, brand\_landing |
| 콘텐츠 유형      | blog\_article, video\_page, guide\_page                                                         |
| 버튼 위치       | top, bottom, floating, mid                                                                      |
| 버튼 문구       | 앱으로 열기, 앱 다운로드하기, 앱에서 보기                                                                        |
| 버튼 배치 형태    | inline\_cta, popup\_banner, exit\_intent                                                        |

#### 캠페인 정보

<Info>
  **알립니다**

  유저가 아래와 같은 방법을 통해 웹 랜딩 페이지로 이동됐을 때는 터치포인트 정보가 수집되지 않습니다. 이러한 경우에는 리포트에서 터치포인트 그룹바이를 선택했을 때 `defaultChannel`과 `defaultParams`에 입력된 캠페인 정보가 조회됩니다.

  * 유저가 트래킹 링크나 UTM 파라미터가 적용되지 않은 광고 클릭
  * 유저가 직접 웹 랜딩 페이지 URL 입력
</Info>

유저가 트래킹 링크나 UTM 파라미터가 적용되지 않은 광고를 클릭하거나 직접 웹 랜딩 페이지 URL을 입력하는 등 터치포인트 정보가 수집되지 않는 예외 상황에서 사용할 캠페인 정보를 정의하세요. 예를 들어 웹 랜딩 페이지에 오가닉하게 이동된 유저를 나타낼 때 캠페인 정보를 활용할 수 있습니다. 아래는 모두 선택사항입니다. 필드는 개발자에게 필요한 항목입니다.

| 그룹바이          | 설명                        | 예시                                              | 필드                     |
| ------------- | ------------------------- | ----------------------------------------------- | ---------------------- |
| Channel       | 캠페인을 운영한 광고 채널 이름         | website, website\_organic, website\_direct      | defaultChannel         |
| Campaign      | 캠페인을 구분하는 이름              | summer\_sale, spring\_promo, content\_marketing | defaultParams.campaign |
| Sub Publisher | 웹 랜딩 페이지 특징을 나타내는 정보      | web\_pdp, landing\_page, blog                   | defaultParams.medium   |
| Term          | 웹 랜딩 페이지와 관련된 검색어나 키워드 정보 | jeju\_travel, 일본\_프로모션, 중고\_전자기기                | defaultParams.term     |
| Content       | 웹 랜딩 페이지와 관련된 콘텐츠 정보      | product\_detail, 프로모션\_CTA, electronics\_guide  | defaultParams.content  |

## CTA 버튼 만들기

에어브릿지를 활용해 CTA 버튼을 만드는 방법은 `openDeeplink` 함수 사용과 트래킹 링크 사용으로 2가지입니다. 에어브릿지는 `openDeeplink` 함수를 사용하는 것을 권장하며, 이 가이드는 해당 함수 중심으로 작성됐습니다. 각 방법에 따른 어트리뷰션 시나리오는 [가이드](/ko/guides/attribution-scenario#%EC%9B%B9-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90%EC%84%9C-%EB%B0%9C%EC%83%9D%ED%95%9C-%EC%84%B1%EA%B3%BC-%EC%B8%A1%EC%A0%95%ED%95%98%EA%B8%B0)를 참고하세요.

<Note>
  **개발 작업이 필요합니다. 개발자에게 도움을 요청하세요.**

  현재 보고 있는 [CTA 버튼 만들기](#cta-버튼-만들기) 부분과 함께 위에서 준비한 유저 리다이렉트 경로와 리포트 조회 정보를 개발자에게 전달하세요.
</Note>

### **에어브릿지 SDK 설치하기**

이용 중인 플랫폼에 해당하는 앱 SDK와 웹 SDK를 설치하세요.

* [SDK 설치하기](/ko/developers/airbridge-sdk-overview#sdk-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0)

### **CTA 버튼 설정하기**

아래 가이드를 참고해 CTA 버튼에 `openDeeplink` 함수를 적용하세요. 유저의 앱 설치 여부에 따른 리다이렉트 경로와 리포트에서 조회할 정보를 설정해야 합니다.

* [웹 SDK - 웹투앱 설정](/ko/developers/web-sdk#%EC%9B%B9%ED%88%AC%EC%95%B1-%EC%84%A4%EC%A0%95)

## **성과 조회하기**

에어브릿지에서 아래처럼 성과를 조회할 수 있습니다. [CTA 버튼 정보](#cta-버튼-정보)를 정의한 경우 CTA Param을 사용하세요.

<AccordionGroup>
  <Accordion title="에어브릿지 리포트">
    CTA 버튼 정보를 정의한 경우 CTA Param 1, CTA Param 2, CTA Param 3을 그룹바이로 선택하세요. 이 정보를 정의하지 않았다면 리포트를 조회할 때 CTA 버튼이 사용된 캠페인을 구분하기 어렵습니다.

    <Frame>
      <img src="https://mintcdn.com/airbridge-help-center/Z47Ur28bRajj9qGT/asset/image/cta-report-parameter-menu-ko.png?fit=max&auto=format&n=Z47Ur28bRajj9qGT&q=85&s=1d02017dc06ef4f82284ebc14b2b6ecb" alt="CTA-playbook-ko-03" width="1400" height="800" data-path="asset/image/cta-report-parameter-menu-ko.png" />
    </Frame>

    예를 들어 웹 랜딩 페이지에 버튼이 2개인 경우 각 버튼의 사용 여부를 표시하기 위한 CTA Param 1은 모두 CTA로 설정하고, CTA Param 2는 버튼 위치에 따라 각각 Top Banner과 Bottom Banner로 설정하면 리포트에서 아래처럼 정보를 조회할 수 있습니다. 먼저 그룹바이로 CTA Param 1을 선택하면 CTA 버튼을 통해 발생한 성과인지를 CTA라는 값으로 확인할 수 있습니다.

    <Frame>
      <img src="https://mintcdn.com/airbridge-help-center/GdfHrcgAgMaB8Suo/asset/image/cta-report-cta-param-1-table-ko.png?fit=max&auto=format&n=GdfHrcgAgMaB8Suo&q=85&s=b68b7735c780cdafff7da577c183e64c" alt="CTA-playbook-ko-01" width="1400" height="800" data-path="asset/image/cta-report-cta-param-1-table-ko.png" />
    </Frame>

    그 다음 그룹바이로 CTA Param 2를 선택하면 버튼 위치별로 CTA 버튼별 성과를 구분해서 확인할 수 있습니다.

    <Frame>
      <img src="https://mintcdn.com/airbridge-help-center/GdfHrcgAgMaB8Suo/asset/image/cta-report-cta-param-2-table-ko.png?fit=max&auto=format&n=GdfHrcgAgMaB8Suo&q=85&s=4e1b7c3f1e7ae680c6b515053365eede" alt="CTA-playbook-ko-02" width="1400" height="800" data-path="asset/image/cta-report-cta-param-2-table-ko.png" />
    </Frame>
  </Accordion>

  <Accordion title="원본 데이터">
    원본 앱 데이터를 추출할 때 \[프로퍼티 선택] 단계에서 CTA Param 1, CTA Param 2, CTA Param 3을 선택하세요.

    <Frame>
      <img src="https://mintcdn.com/airbridge-help-center/GdfHrcgAgMaB8Suo/asset/image/cta-raw-data-parameters-ko.png?fit=max&auto=format&n=GdfHrcgAgMaB8Suo&q=85&s=edf00aaee32a0f3e094a04928f834c84" alt="CTA-playbook-ko-04" width="1400" height="800" data-path="asset/image/cta-raw-data-parameters-ko.png" />
    </Frame>
  </Accordion>

  <Accordion title="실시간 로그">
    웹과 앱에서 발생한 이벤트를 실시간으로 확인할 수 있으니 참고하세요. 예를 들어 \[웹 이벤트 실시간 로그]에서 Opens (Web) 이벤트를 확인한 후에 \[앱 이벤트 실시간 로그]에서 Deeplink Opens (App) 이벤트와 이후 발생한 이벤트를 확인할 수 있습니다. 이때 CTA 버튼 정보를 조회하려면 해당 이벤트 행을 클릭해서 attributedCtaParam1, attributedCtaParam2, attributedCtaParam3을 확인하세요.

    <Info>
      **알립니다**

      Move to App (Web) 이벤트는 CTA 버튼이 클릭됐을 때 에어브릿지 웹 SDK에서 자동 수집하는 이벤트입니다. 따라서 Channel은 항상 airbridge.websdk로 표시됩니다.
    </Info>
  </Accordion>
</AccordionGroup>

<link rel="alternate" hrefLang="en" href="https://help.airbridge.io/en/guides/web-to-app-tracking-with-cta-buttons" />

<link rel="alternate" hrefLang="ko" href="https://help.airbridge.io/ko/guides/web-to-app-tracking-with-cta-buttons" />