클릭 유도 문안(CTA) 만들기

CTA(Call-to-Action) 도구를 사용하여 버튼형 CTA, 배너 또는 팝업을 생성하고, 이를 HubSpot 페이지에 추가하여 새로운 방문자를 유치하세요. 외부 페이지에도 CTA를 추가할 수 있습니다.

외부 페이지에 CTA를 추가하기 전에 HubSpot 추적 코드를 설치하거나, WordPress 사이트에 HubSpot WordPress 플러그인을 설치해야 합니다. CTA를 추가한 후에는 방문자를 특정 페이지, 미팅 링크 또는 외부 URL로 유도하여 트래픽을 늘리세요. 

모바일 기기의 경우, CTA 옵션에서 반응형 레이아웃을 활성화하거나 작은 화면에서 CTA를 숨기도록 선택할 수 있습니다. CTA를 게시한 후에는 CTA에 대한 A/B 테스트를 생성하고 CTA의 성과를 분석하는 방법을 알아보세요. 

CTA 디자인하기

CTA 편집기에서 방문자의 관심을 끌 수 있도록 CTA 디자인을 맞춤 설정하세요. CTA를 생성할 때 스마트 콘텐츠를 사용하여 방문자 범주에 따라 서로 다른 버전의 CTA를 표시할 수도 있습니다. CTA에서 스마트 콘텐츠 사용에 대해 자세히 알아보세요. 

1. HubSpot 계정에서 마케팅 > CTA로 이동합니다.
2. 오른쪽 상단에서 '만들기'를 클릭하세요.
3. 상단에서 '팝업' 탭 또는 '임베드 및 버튼 ' 탭을 선택하세요. 
   • 팝업 CTA에는 다음 유형이 포함됩니다: 
     
     • 배너: 페이지 상단 또는 하단에 고정된 상시 표시되는 배너입니다. 방문자가 페이지를 스크롤해도 배너는 그대로 유지됩니다. 
     • 팝업 상자: 설정된 일정에 따라 나타나는 팝업상자입니다 . 
     • 슬라이드인: 웹사이트 모서리에서 미끄러지듯 들어오는 배너입니다. 방문자가 페이지를 스크롤해도 배너는 그대로 유지됩니다. 
   • 임베드 및 버튼 CTA에는 다음 유형이 포함됩니다: 
     • 임베드: 웹사이트나 HubSpot 이메일에서 잠재 고객을 특정 페이지로 유도하는 데 사용할 수 있는 배너, 행동 유도 문구(CTA) 또는 버튼입니다.
     • 임베디드 이미지: HubSpot 페이지나 이메일에서 사용할 수 있는 이미지입니다.
4. 만들고자 하는 CTA 유형에 따라템플릿을 선택하세요.
   • 각 CTA 템플릿에는 이미지 및 텍스트 필드와 같은 사용자 지정 가능한 모듈이 있습니다.
   • 예를 들어, '클릭하여 채팅' 템플릿을 선택하여 WhatsApp 링크를 실행하거나, '회의 팝업' 템플릿을 선택하여 회의 예약 페이지를 표시하거나, '이벤트' 템플릿을 선택하여 방문자가 컨퍼런스나 워크숍에 등록할 수 있도록 할 수 있습니다.
5. 왼쪽 패널의 '추가' 탭 에서 모듈을 추가하고 CTA의 레이아웃을 편집하세요: 

• • CTA에 콘텐츠를 더 추가하려면 새 모듈을 클릭하여 편집기의 오른쪽 패널로 직접 드래그하세요.
    • CTA에는 양식(새 편집기) 또는 회의 모듈 중 하나만 추가할 수 있습니다. 하나의 CTA에 양식 모듈과 회의 모듈을 동시에 포함할 수는 없습니다. 
    • 카운트다운 타이머나 동영상 모듈과 같은 특정 모듈은 한 번만 추가할 수 있습니다.
    • CTA에 동영상을 추가할 수도 있습니다. CTA에 동영상을 추가할 때의 요구 사항에 대해 자세히 알아보세요. 
  • CTA의 레이아웃을 수정하려면 모듈 위에 마우스를 올린 다음 클릭하고 드래그하여 새로운 위치로 이동하세요.
  • 모듈을 복제하려면 모듈 위에 마우스를 올려놓고복제 아이콘을 클릭하세요.
  • 모듈을 삭제하려면 모듈 위에 마우스를 올려놓고삭제 아이콘을 클릭하세요. 
     

. 

• • 모듈을 편집하려면 모듈을 클릭하세요.
    • 왼쪽 패널에서 모듈의 콘텐츠와 디자인을 편집할 수 있습니다.
    • 방문자가 양식을 제출한 후 팝업 CTA를 닫으려면, 양식 모듈을 사용자 지정할 때 '제출 후 닫기' 스위치를 켜면 됩니다. 
       

7. 왼쪽 패널에서 '콘텐츠' 탭 을 클릭하여 모듈을 관리하세요. 
   • 모듈을 편집하려면 모듈 이름을 클릭하세요. 왼쪽 패널에서 모듈의 콘텐츠와 디자인을 편집할 수 있습니다. 리치 텍스트 모듈에서는 AI 어시스턴트를 사용하여 CTA 콘텐츠를 생성하거나 다듬을 수 있습니다. 
   • 모듈을 삭제하려면 모듈 위에 마우스를 올려놓고삭제 아이콘을 클릭하세요. 
8. 왼쪽 패널에서 '디자인' 탭을 클릭하여 CTA를 맞춤 설정하고 미리 볼 수 있습니다.
   • 특정 페이지에서 CTA를 미리 보려면 오른쪽 상단의 '미리 보기'를 클릭하세요. 그런 다음 '특정 페이지에서 미리 보기' 드롭다운 메뉴를 클릭하고 CTA를 미리 볼 HubSpot 페이지를 선택하세요. 

• • CTA의 모양을 사용자 지정하려면 다음 옵션 중 하나를 선택하십시오. 그런 다음 왼쪽 패널에서 변경 사항을 구성하십시오. 
    • 위치: 고정 배너 CTA의 경우 상단 또는 하단 위치를 선택할 수 있습니다. 슬라이드인 CTA의 경우 페이지의 왼쪽 상단, 왼쪽 하단, 오른쪽 상단 또는 오른쪽 하단에 CTA를 배치할 수 있습니다. 페이지당 하나의 슬라이드인 CTA만 사용하는 것이 좋습니다. 여러 개의 슬라이드인 CTA를 사용하면 충돌이 발생하여 CTA가 표시되지 않을 수 있습니다.
    • 크기: CTA의 높이를 설정합니다. CTA 콘텐츠에 따라 높이를 자동으로 설정하는 옵션을 활성화할 수 있습니다. 이 옵션을 선택하지 않으면 디자인에 따라 CTA에 스크롤 바가 표시될 수 있습니다. 
    • 레이아웃: CTA의 레이아웃을구성합니다 . CTA 콘텐츠에 패딩을 추가할 수 있습니다. 또한 반응형 레이아웃을 활성화하는 옵션을 선택할 수 있습니다. 반응형 레이아웃을 사용하면 작은 화면에서 CTA의 열이 수직으로 쌓입니다.
    • 스타일: 기본 글꼴, 테두리, 드롭 섀도우 등 CTA의 스타일을설정합니다 . CTA에 사용자 지정 글꼴을 사용할 수 있으며, HubSpot 콘텐츠에서 사용자 지정 글꼴 사용에 대해 자세히 알아보세요. 
    • 배경: CTA의 배경을 설정합니다. 배경색을 지정하거나 배경 이미지를 업로드할 수 있습니다.
    • 닫기 옵션: 팝업 상자형 CTA의 경우, 방문자가 팝업 상자 외부의 아무 곳이나 클릭하면 CTA를 닫을 수 있도록 하는 옵션을 활성화할 수 있습니다. 이 옵션이 비활성화되면 방문자는 닫기 아이콘을 통해서만 CTA를 닫을 수 있습니다. 

HTML CTA 디자인

사용자 지정 임베디드 HTML CTA를 생성하고 사용자 지정 테마나 CSS를 적용하려면:

1. HubSpot 계정에서 마케팅 > CTA로 이동합니다.
2. 오른쪽 상단에서 '만들기'를 클릭합니다.
3. 상단에서 '임베드 및 버튼 ' 탭을 클릭합니다.
4. 왼쪽 사이드바 메뉴에서 '고급'으로 이동합니다. 그런 다음 '임베디드 HTML'을 선택합니다.
5. 왼쪽 패널에서 '링크' 드롭다운 메뉴를 클릭하고 CTA가 연결될 대상 옵션을 선택하세요:
   • 이메일 주소: mailto 링크를생성합니다 . 이 링크를 새 탭에서 열려면 '새 탭에서 링크 열기 ' 확인란을 선택하세요. 
   • 파일 다운로드: CTA를 파일 관리자의 파일에연결합니다 . 기존 파일을 선택하거나 새 파일을 업로드한 다음, CTA 버튼을 클릭한 방문자가 새 브라우저 창에서 이미지를 볼 수 있도록 하려면 '새 탭에서 링크 열기' 확인란을 선택합니다. 
   • 회의 링크: CTA를 HubSpot 회의 링크에 연결합니다. '회의 링크 선택 ' 드롭다운을 클릭한 다음 회의 링크를 선택합니다. 이 링크를 새 탭에서 열려면 '새 탭에서 링크 열기 ' 확인란을 선택합니다. 
   • 페이지 중 하나: CTA를 HubSpot 페이지 또는 블로그 게시물 중 하나에 연결합니다. '페이지' 드롭다운 메뉴를 클릭한 다음 페이지나 게시물을 선택합니다. 버튼 CTA의 링크는 페이지 ID에 연결되며, 페이지 URL이 변경되면 버튼 CTA의 링크도 자동으로 업데이트됩니다. 이 링크를 새 페이지에서 열려면 '새 탭에서 링크 열기' 확인란을 선택합니다. 
   • URL: CTA를 HubSpot 외부의 외부 페이지에 연결합니다. '링크 URL' 필드에 방문자를 이동시키고자 하는 웹사이트 URL을 입력합니다. 이 링크를 새 탭에서 열려면 '새 탭에서 링크 열기' 확인란을 선택합니다. 
   • CTA: 사용자 지정 CTA를 사용하여 고정 배너, 팝업 창 또는 슬라이드인 CTA를 트리거합니다.
6. '버튼 콘텐츠' 필드에 CTA 텍스트를 입력하세요. 
   

7. CTA 디자인을 더 세부적으로 사용자 지정하려면 '고급'을 클릭하세요.
8. '고급' 페이지 에서 사용자 지정 CSS 클래스나 규칙을 추가할 수 있습니다:
   • 사용자 지정 CSS 클래스: CTA에 사용자 지정 클래스를입력하세요 . 사용자 지정 클래스를 사용하면 웹사이트의 여러 CTA에 걸쳐 글꼴 패밀리와 같은 디자인 스타일을 적용할 수 있습니다. 모든 사용자 지정 CSS 클래스는 HubSpot 페이지에서 사용되는 CSS 스타일시트에 포함되어야 합니다.
   • 사용자 지정 CSS 규칙: CTA에 특화된 인라인 스타일을 적용할 사용자 지정 규칙을 추가합니다 .
     • 새 CSS 규칙을 추가하려면 'Add one' 또는 '+ Add'를 클릭하고 에서 선택자와 스타일을 구성하세요. 
       • 선택기: CSS 선택기를입력합니다 . 이 값은 선택 사항이며 CTA의 선택기와 결합됩니다. 예를 들어, 입력한 선택기가 :hover 경우 결합된 선택기는 ${ctaSelector}:hover 됩니다.
       • 스타일: 구성된 선택자에 적용할 사용자 정의 CSS 스타일 규칙을 입력합니다 . 선택자를 입력하지 않고 스타일만 입력할 수도 있습니다. 예: color: yellow;.
         
         

9. 기존 CSS 규칙을 편집하려면 규칙 위에 마우스를 올려놓고 편집 아이콘을 클릭하세요. 
10. CSS 규칙을 복제하려면 규칙 위에 마우스를 올려놓고 복제 아이콘을 클릭하세요. 
11. CSS 규칙의 우선순위를 관리하려면 각 규칙을 클릭하고 드래그하여 우선순위 순서대로 정렬하세요.
12. CSS 규칙을 제거하려면 규칙 위에 마우스를 올려놓고 삭제 아이콘을 클릭하세요. 
13. 기존 CTA와 동일한 HTML 및 클래스를 CTA에 적용하려면 '기존 마크업 사용' 확인란을 선택하세요. 페이지에 기존 CTA의 스타일을 지정하는 CSS 스타일시트가 있는 경우, 이 확인란을 선택하면 HTML CTA가 동일한 스타일을 적용할 수 있습니다. 
14. CTA 디자인 설정을 완료하려면 '저장 및 적용'을 클릭하세요 .
     

고정 배너, 팝업 창 또는 슬라이드인 CTA가 표시되는 위치와 시기를 사용자 지정하세요

1. 방문자가 특정 웹사이트 URL에 접속했을 때 CTA를 표시하려면, ‘웹사이트 URL’ 섹션에서:
   • 첫 번째드롭다운 메뉴를 클릭하고'웹사이트 URL'을 선택합니다.
   • 두 번째드롭다운 메뉴를클릭하고 타겟팅 규칙을 선택합니다.
   • 텍스트 필드에 규칙 기준을 입력합니다.
2. 방문자가 URL에 특정 쿼리 매개변수가 포함된 웹 사이트 페이지에 있을 때 CTA를 표시하려면:
   • 첫 번째드롭다운 메뉴를 클릭하고'쿼리 매개변수'를 선택합니다.
   • 첫 번째 텍스트 필드에쿼리 매개변수 이름을 입력합니다.
   • 두 번째 드롭다운 메뉴 를 클릭하고 타겟팅 규칙을 선택합니다.
   • 두 번째 텍스트 필드에쿼리 매개변수 값을 입력합니다.
3. 다른 규칙을 추가하려면'규칙 추가'를 클릭하세요.
4. 특정 페이지의 클릭 유도 문구를 제외하려면'제외 규칙 추가'를 클릭하세요. 예를 들어, 개인정보 처리방침 페이지에 대한 제외 규칙을 추가할 수 있습니다.

1. '누구에게 표시할까요?' 섹션에서 CTA의 대상 고객을 설정하세요. 다음 중에서 선택할 수 있습니다:
   • 모든 방문자: 모든 방문자에게CTA가 표시됩니다. 
   • 필터링된 방문자: 지정된 방문자에게만CTA가 표시됩니다.
2. '표시 빈도' 섹션에서 CTA의 표시 빈도를 설정하세요. '다시 표시' 드롭다운 메뉴를 클릭하고 다음 중에서 선택하세요:
   • 설정된 시간 경과 후:지정된 시간이 지나면 CTA가 다시 표시됩니다. 
   • 반복: 방문자가 이전에 CTA와 상호작용한 적이 있더라도, 선택한 웹 페이지로 이동하여 트리거 동작을 수행할 때마다CTA가 표시됩니다.
   • 다시 표시하지 않음: 동일한 방문자에게는 다시는 CTA를 표시하지 않습니다. 
     
     

CTA 옵션 사용자 지정

'옵션' 탭에서 작은 화면에서 CTA를 표시할지 여부, 관련 캠페인, CTA 일정 설정 등 다양한 CTA 옵션을 맞춤 설정하세요. 

1. 상단의 '옵션' 탭 을 클릭합니다.
2. 스티키 배너, 팝업 상자 또는 슬라이드인 CTA의 경우, 작은 화면 크기에서는 CTA를 숨길 수 있습니다. 작은 화면 크기섹션에서 작은 화면 크기에서 끄기 확인란을 선택합니다.
3. Marketing Hub Professional 또는 Enterprise 구독을 사용 중인 경우 CTA를 캠페인과 연결할 수 있습니다:
   • CTA를 기존 캠페인과 연결하려면 '캠페인' 드롭다운 메뉴를 클릭하고 캠페인을 선택하세요.
   • CTA를 새 캠페인과 연결하려면 캠페인 드롭다운 메뉴를 클릭한 다음 '캠페인 생성'을 클릭하세요. 그런 다음 캠페인 설정을 계속 진행하세요. 
   • 이전에 캠페인을 생성한 적이 없다면 '캠페인 생성'을 클릭하십시오. 그런 다음 캠페인 설정을 계속 진행하십시오. 
4. CTA 클릭을 추적할 방법을 구성하세요. 다음 옵션 중에서 선택하세요: 
   • 리디렉션을 통한 클릭 추적: 방문자를 최종 페이지로 리디렉션하기 전에 클릭을 CTA와 연결하는 초기 URL로 방문자를 안내하여 CTA 클릭을 추적합니다. 이 옵션은 기본적으로 선택되어 있습니다.
   • 브라우저를 통한 클릭 추적: 방문자의 브라우저를 통해 비동기적으로 클릭을 추적합니다. 이 옵션은 리디렉션이 없으므로 앵커 태그를 사용할 수 있으며, CTA는 방문자를 설정된 URL로 직접 이동시킵니다. 
5. 고정 배너, 팝업 상자 또는 슬라이드인 CTA의 경우, CTA가 표시될 시점을 예약할 수 있습니다:
   
   • CTA 표시 시작 시점을 예약하려면 '나중에 예약' 스위치를 켜십시오. 그런 다음 시작 날짜와 시간을 선택하십시오. 
   • CTA 표시를 중지할 시점을 예약하려면 '게시 중지 날짜 및 시간 설정' 스위치를 켜십시오. 그런 다음 종료 날짜와 시간을 선택하십시오. 
     
     

CTA 게시 

CTA 설정을 완료한 후, CTA를 게시하여 실제 서비스에 적용하세요. 

1. 오른쪽 상단에서 '검토 및 게시'를 클릭합니다.
2. 오른쪽 패널에서 CTA를 검토한 후 '지금 게시'를 클릭하세요. CTA가 대상 페이지에 자동으로 게시됩니다.