콘텐츠로 건너뛰기

콘텐츠에 콜투액션(CTA) 추가하기

마지막 업데이트 날짜: 2월 12, 2025

명시된 경우를 제외하고 다음 구독 중 어느 것에서나 사용할 수 있습니다.

마케팅 Hub   Starter , Professional , Enterprise
콘텐츠 Hub   Starter , Professional , Enterprise

콜투액션(CTA)을 생성한 후에는 HubSpot과 외부 페이지 모두에 CTA를 추가할 수 있습니다. 외부 페이지용 CTA를 구성할 때는 HubSpot 추적 코드가 설치되어 있어야 합니다. 드래그 앤 드롭 마케팅 이메일에 CTA를 추가할 수도 있습니다.

페이지에 CTA를 추가하는 방법은 생성한 CTA 유형에 따라 다릅니다:

  • 임베드된 CTA를 사용하는 경우 페이지당 최대 100개의 임베드된 CTA를 추가할 수 있습니다. 임베디드 CTA는 다음과 같은 방법으로 사용할 수 있습니다:
    • HubSpot 페이지의 기본 콜투액션 모듈
    • 마케팅 이메일의 기본 버튼 모듈
    • 외부 웹사이트의 코드 스니펫
  • 스티커 배너, 팝업 상자 또는 슬라이드인 콜투액션을 사용하는 경우 둘 중 하나를 사용할 수 있습니다:
    • 방문자가 버튼을 클릭할 때 CTA가 표시되도록 트리거합니다.
    • 하나 이상의 활성화 트리거를 선택한 다음 웹사이트의 URL 또는 방문자 정보를 사용하여 타겟을 설정합니다. 첫 번째 트리거가 충족되면 대상 페이지와 지정된 방문자에게 CTA가 표시됩니다:
      • 페이지 스크롤 시 트리거
      • 이탈 의도 시 트리거
      • 시간 경과 후 트리거
      • 비활동 후 트리거

HubSpot 콘텐츠에 CTA 추가하기

HubSpot 페이지에 추적 코드가 자동으로 설치됩니다. 대부분의 활성화 트리거의 경우 첫 번째 트리거가 충족될 때 CTA가 표시됩니다. 그러나 임베디드 CTA 또는 방문자가 버튼을 클릭할 때 트리거되는 CTA를 사용하려면 CTA를 수동으로 추가해야 합니다.

HubSpot 페이지에 CTA 추가하기

콜투액션 모듈을 사용하여 HubSpot에서 호스팅되는 페이지에 CTA를 임베드할 수 있습니다.

  • 콘텐츠로 이동합니다:

    • 웹사이트 페이지: HubSpot 계정에서 콘텐츠 > 웹사이트 페이지로 이동합니다.
    • 랜딩 페이지: HubSpot 계정에서 콘텐츠 > 랜딩 페이지로 이동합니다.
  • 콘텐츠 이름을 클릭합니다.
  • 콘텐츠 편집기에서 왼쪽 사이드바의 + 추가 버튼을 클릭합니다.
  • 사이드바 편집기에서 콜투액션 모듈을 검색하여 클릭한 다음 페이지의 제자리로 끌어다 놓습니다.
  • CTA 섹션에서 선택을 클릭합니다.

HubSpot 블로그 게시물에 CTA 추가하기

  • HubSpot 계정에서 콘텐츠 > 블로그로 이동합니다.
  • 글의 이름을 클릭합니다.
  • 콘텐츠 편집기에서 서식 있는 텍스트 모듈을 클릭하여 콘텐츠를 사용자 지정합니다.
  • 서식 있는 텍스트 도구 모음에서 삽입 > 콜투액션을 클릭합니다.

  • 오른쪽 패널에서 CTA 탭을 클릭합니다.
  • 삽입할 CTA를 선택한 다음 삽입을 클릭합니다.
  • 왼쪽 패널에서 변경사항 적용을 클릭합니다. 이제 선택한 CTA가 서식 있는 텍스트 편집기와 미리 보기에 표시됩니다.

HubSpot에서 버튼 클릭 시 CTA 트리거하기

방문자가 페이지의 버튼을 클릭하면 고정 배너, 팝업 상자 또는 슬라이드인 CTA를 트리거할 수 있습니다. HubSpot 페이지의 기본 버튼 모듈을 사용하여 이 트리거를 설정하려면 다음과 같이 하세요:
  • 콘텐츠로 이동합니다:

    • 웹사이트 페이지: HubSpot 계정에서 콘텐츠 > 웹사이트 페이지로 이동합니다.
    • 랜딩 페이지: HubSpot 계정에서 콘텐츠 > 랜딩 페이지로 이동합니다.
  • 이름을 클릭합니다.
  • 왼쪽 패널의 추가 탭에서 기본 버튼 모듈을 검색하여 선택합니다. 버튼 모듈을 클릭하고 페이지로 드래그합니다.

  • 왼쪽 패널에서 링크 링크 드롭다운 메뉴를 클릭하고 CTA를 선택합니다.
  • CTA 드롭다운 메뉴를 클릭하고 기존 CTA를 선택합니다.
  • 버튼 모듈 설정을 계속합니다.

드래그 앤 드롭 마케팅 이메일에 임베디드 CTA를 추가합니다.

드래그 앤 드롭 마케팅 이메일에 임베디드 CTA를 추가하고 여러 터치포인트에서 CTA 오퍼의 효과를 추적하세요.

드래그 앤 드롭 이메일 편집기에서CTA를 추가하려면 다음과 같이 하세요:

  • HubSpot 계정에서 마케팅 > 마케팅 이메일로 이동합니다.
  • CTA를 추가하려는 이메일 위로 마우스를 가져간 다음 편집을 클릭합니다. 또는 새 이메일을 작성합니다.
  • 왼쪽 패널에서 버튼 모듈을 클릭하고 이메일 편집기로 끌어다 놓습니다.

  • 왼쪽 패널에서 링크 링크 드롭다운 메뉴를 클릭합니다. 그런 다음 CTA를 선택합니다.
  • CTA 필드 아래에서 선택을 클릭합니다.
  • 오른쪽 패널에서 삽입할 CTA를 선택한 다음 삽입을 클릭합니다.

참고: 이메일용 CTA를 만들거나 선택할 때는 하나의 버튼 또는 이미지만 지원됩니다. 버튼과 이미지 등 여러 요소가 포함된 CTA는 사용할 수 없습니다.


버튼 클릭 시 CTA를 트리거하도록 테마의 버튼 사용자 지정하기

HubSpot에서 사용자 지정 테마를 사용하는 경우 CTA를 트리거하려면 테마의 버튼 모듈을 사용자 지정해야 할 수 있습니다.

기본 테마를 편집하는 경우에는 먼저 복제해야 합니다. 에셋 마켓플레이스에서 구매한 테마는 복제할 수 없으므로 대신 하위 테마를 생성하는 것이 좋습니다.

테마의 버튼 모듈을 사용자 정의하려면 다음과 같이 하세요:

  • HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
  • 왼쪽 상단에서 버튼 모듈을 검색합니다.
  • 오른쪽 패널에서 버튼(필드 그룹) 위로 마우스를 가져간 다음 편집을 클릭합니다.
  • 그룹화된 필드 아래에서 URL(URL)을 마우스로 가리키고 편집을 클릭합니다.
  • 지원되는 URL 유형 드롭다운 메뉴를 클릭합니다. 그런 다음 CTA 확인란을 선택합니다.
  • 오른쪽 상단에서 변경 내용 게시를 클릭합니다. 변경 사항을 게시하고 나면 페이지에서 테마 버튼 모듈을 사용할 때 CTA 옵션이 표시됩니다.

외부 콘텐츠에 CTA 추가하기

외부 페이지에 CTA를 추가할 수 있습니다. 외부 웹사이트에서 HubSpot CTA를 사용하기 전에 HubSpot 추적 코드를 설치해야 합니다.

추적 코드를 설치한 후 대부분의 활성화 트리거의 경우 첫 번째 트리거가 충족되면 CTA가 표시됩니다. 그러나 임베디드 CTA 또는 방문자가 버튼을 클릭할 때 트리거되는 CTA를 사용하려면 CTA를 수동으로 추가해야 합니다.

외부 웹사이트에 CTA 임베드하기

외부 페이지에 임베드된 CTA를 추가하려면 다음과 같이 하세요:

  • HubSpot 계정에서 마케팅 > CTA로 이동합니다.
  • 왼쪽 상단에서 드롭다운 메뉴를 클릭하고 CTA를 선택합니다.
  • CTA에 마우스를 갖다 대고 작업 > 임베드를 클릭합니다.
  • 클립보드에 복사를 클릭하여 CTA 코드를 클립보드에 복사합니다.
  • 외부 웹사이트의 콘텐츠 관리 시스템(CMS)으로 이동합니다.
  • CTA를 표시할 위치에 CTA 임베드 코드를 HubSpot이 아닌 페이지의 HTML에 붙여넣습니다.
  • 웹 페이지에서 CTA를 미리 보고 게시할 때 어떻게 표시되는지 확인합니다. CTA가 올바르게 표시되지 않으면 외부 CMS에서 코드를 변경하지 않았는지 확인하세요.
  • 완료했으면 페이지를 게시합니다.

일반적으로 CTA를 수정해도 임베드 코드에는 영향을 미치지 않습니다. 예를 들어 새 탭에서 링크 열기 옵션을 편집해도 임베드 코드의 target="_blank" 속성은 변경되지 않습니다.

임베드 코드 스니펫은 CTA의 iframe 버전이 렌더링되기 전에 플레이스홀더 역할을 합니다. 이렇게 렌더링된 CTA 버전에는 편집기에서 설정한 새 탭에서 열기 값이 올바르게 반영됩니다.

플레이스홀더의 동일한 창에서 링크를 열려면 사용자가 대상 속성 태그를 target="_self" 로 수동으로 변경하면 됩니다.

외부 웹사이트의 버튼 클릭 시 CTA 트리거하기

외부 웹사이트에서 CTA를 사용하려면 먼저 HubSpot 추적 코드를 설치해야 합니다. 외부 페이지에서 트리거를 설정하려면 다음과 같이 하세요:

  • HubSpot 계정에서 마케팅 > CTA로 이동합니다.
  • 왼쪽 상단에서 드롭다운 메뉴를 클릭하고 CTA를 선택합니다.
  • CTA 위로 마우스를 가져간 후 편집을 클릭합니다.
  • 상단에서 타겟팅 탭을 클릭합니다.
  • 버튼 클릭 시 트리거 섹션에서 코드 스니펫을 클릭합니다.

  • 대화 상자에서 복사를 클릭합니다.
  • 임베드 클래스를 외부 웹사이트의 버튼에 붙여넣습니다. 사이트의 버튼에 CSS 클래스를 추가하는 방법을 잘 모르는 경우 웹마스터, IT 부서 또는 개발자와 협력해야 할 수 있습니다.
이 문서가 도움이 되었나요?
이 양식은 문서 피드백에만 사용됩니다. HubSpot으로 도움을 받는 방법 알아보기.