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

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

콘텐츠에 CTA를 추가한 후, 마케팅 허브 또는 콘텐츠 허브 프로페셔널/엔터프라이즈 구독을 보유한 경우 방문자가 CTA와 상호작용한 후 자동으로 실행될 워크플로를 생성할 수 있습니다. 예를 들어 방문자가 CTA의 양식을 제출하면 신규 연락처를 육성하기 위한 일련의 마케팅 이메일을 발송하도록 트리거할 수 있습니다. 

Und콘텐츠에 CTA 추가하기

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

• 임베디드 CTA를 사용하는 경우 페이지당 최대 100개의 임베디드 CTA를 추가할 수 있습니다. 임베디드 CTA는 다음과 같은 방식으로 사용할 수 있습니다:
  • HubSpot 페이지의 기본 CTA 모듈
  • 마케팅 이메일의 기본 버튼 모듈
  • 외부 웹사이트의 코드 스니펫
• 스티키 배너, 팝업 박스 또는 슬라이드인 CTA를 사용하는 경우 다음 중 하나를 선택할 수 있습니다:
  • 방문자가 버튼을 클릭할 때 CTA가 표시되도록 설정합니다.

• • 하나 이상의 활성화 트리거를 선택한 후 웹사이트 URL 또는 방문자 정보를 사용하여 대상을 설정하세요. 첫 번째 트리거 조건이 충족되면 대상 페이지와 지정된 방문자에게 CTA가 표시됩니다: 
    • 페이지 스크롤 시 트리거
    • 이탈 의도 시 트리거
    • 시간 경과 후 트리거
    • 비활성 후 트리거

HubSpot 콘텐츠에 CTA 추가하기

HubSpot 페이지에는 추적 코드가 자동으로 설치됩니다. 대부분의 활성화 트리거의 경우 첫 번째 트리거 조건이 충족될 때 CTA가 표시됩니다.

그러나 방문자가 버튼을 클릭할 때 트리거되는 내장형 CTA나 CTA를 사용하려면 수동으로 CTA를 추가해야 합니다. 

HubSpot 페이지에 CTA 추가하기

HubSpot 호스팅 페이지에는 '콜 투 액션(Call-to-action)' 모듈을 사용하여 CTA를 삽입할 수 있습니다. 

1. 콘텐츠로 이동: 

   • 웹사이트 페이지: HubSpot 계정에서 콘텐츠 > 웹사이트 페이지로 이동합니다.
   • 랜딩 페이지: HubSpot 계정에서 콘텐츠 > 랜딩 페이지로 이동합니다.
2. 해당콘텐츠이름을클릭하세요. 
3. 콘텐츠 편집기에서 왼쪽 사이드바의+ 추가 버튼을클릭하세요. 
4. 사이드바 편집기에서 '콜 투 액션(Call-to-action)' 모듈을 검색하여 클릭한 후페이지에드래그하여 배치하세요. 
5. CTA 섹션에서'콜 투 액션 선택'을 클릭하세요.
    

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

1. HubSpot 계정에서 콘텐츠 > 블로그로 이동합니다.
2. 게시물 이름을클릭하세요. 
3. 콘텐츠 편집기에서 리치 텍스트 모듈을 클릭하여 내용을 사용자 지정합니다.
4. 리치 텍스트 도구 모음에서 삽입>행동 유도 버튼을 클릭하세요.
    

5. 오른쪽 패널에서 CTA 탭 을 클릭하세요.
6. 삽입할CTA를선택한 후삽입을 클릭하세요. 
7. 왼쪽 패널에서 변경 사항 적용을 클릭하세요. 선택한 CTA가 이제 리치 텍스트 편집기와 미리 보기 화면에 표시됩니다. 

HubSpot에서 버튼 클릭 시 CTA 트리거 설정

있습니다

1. 콘텐츠로 이동하세요:

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

4. 왼쪽 패널에서 링크 드롭다운 메뉴를 클릭하고 CTA를 선택하세요.
5. CTA 드롭다운 메뉴를 클릭하고 기존 CTA를 선택하세요. 
6. 버튼 모듈 설정을 계속 진행하세요.
    

드래그 앤 드롭 마케팅 이메일에 임베디드 CTA 추가하기

드래그 앤 드롭 마케팅 이메일에 임베디드 CTA를 추가하고 여러 접점에서 CTA 제안의 효과를 추적하세요.

참고: 이메일용 CTA 생성 또는 선택 시 단일 버튼 또는 이미지만 지원됩니다. 버튼과 이미지 등 여러 요소가 포함된 CTA는 사용할 수 없습니다.

CTA 추가 방법 드래그 앤 드롭 이메일 편집기:

1. HubSpot 계정에서 마케팅 > 이메일로 이동합니다.
2. CTA를 추가하려는 이메일에 마우스를 올려놓은 후 편집을 클릭하세요. 또는 새 이메일을 생성하세요.
3. 왼쪽 패널에서 버튼 모듈을 클릭한 후 이메일 편집기로 드래그하세요.
    

4. 왼쪽 패널에서 링크 드롭다운 메뉴를 클릭하세요. 그런 다음 CTA를 선택하세요. 
5. CTA 필드 아래에서 선택을 클릭하세요. 
6. 오른쪽 패널에서 삽입할 CTA를선택한 후삽입을 클릭하세요. 
   

테마의 버튼을 맞춤 설정하여 버튼 클릭 시 CTA를 실행하도록 합니다.

HubSpot에서 맞춤 테마를 사용하는 경우, CTA를 실행하도록 테마의 버튼 모듈을 맞춤 설정해야 할 수 있습니다.

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

테마의 버튼 모듈을 사용자 정의하려면: 

1. HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
2. 왼쪽 상단에서 버튼 모듈을 검색하세요. 
3. 오른쪽 패널에서 버튼(필드 그룹) 위에 마우스를 올린 후 편집을 클릭합니다.
4.  그룹화된 필드에서 URL(URL) 위에 마우스를 올린 후 편집을 클릭하세요.
5. 지원되는 URL 유형 드롭다운 메뉴를 클릭하세요. 그런 다음 CTA 확인란을 선택하세요. 
6. 오른쪽 상단에서 변경 사항 게시를 클릭하세요. 변경 사항을 게시한 후 페이지에서 테마 버튼 모듈을 사용할 때 CTA 옵션이 표시됩니다.
    

외부 콘텐츠에 CTA 추가하기

외부 페이지에 CTA를 추가하려면 HubSpot 추적 코드를 설치해야 합니다.

고정 배너, 팝업 상자 또는 슬라이드인 CTA의 경우 추적 코드를 설치하면 첫 번째활성화 트리거가충족될 때 CTA가 표시됩니다. 페이지에 CTA를 임베드할 필요는 없으며, CTA 검토 시 임베드 옵션이 표시되지 않습니다.

단, 임베드된 CTA나 방문자가 버튼을 클릭할 때 트리거되는 CTA의 경우 수동으로 CTA를 추가해야 합니다.

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

외부 페이지에 임베드된 CTA를 추가하려면:

1. HubSpot 계정에서 마케팅 > CTA로 이동합니다.
2. 왼쪽 상단의 드롭다운 메뉴를 클릭하고CTA를 선택하세요.
3. CTA 위에 마우스를 올린 후 작업 ( Actions ) 을 클릭하고삽입(Embed)을 선택하세요.
4.   클립보드에 복사를 클릭하여 CTA 코드를 클립보드에 복사합니다. 
5. 외부 웹사이트의 콘텐츠 관리 시스템(CMS)으로 이동합니다. 
6. HubSpot이 아닌 페이지의 HTML에 CTA 임베드 코드를 붙여넣으세요. CTA를 표시할 위치에 코드를 삽입합니다. 
7. 웹 페이지에서 CTA를 미리 보아 실제 표시되는 모습을 확인하세요. CTA가 제대로 표시되지 않으면 외부 CMS에서 코드가 변경되지 않았는지 확인하세요.
8. 완료 후 페이지를 게시하세요. 

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

임베드 코드 스니펫은 iframe 버전의 CTA가 렌더링되기 전까지 자리 표시자 역할을 합니다. 렌더링된 CTA 버전은 편집기에서 설정한 새 탭에서 열기 값을 정확히 반영합니다.

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

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

외부 웹사이트에서 CTA를 사용하기 전에 HubSpot 추적 코드를 설치해야 합니다. 외부 페이지에서 트리거를 설정하려면:

1. HubSpot 계정에서 마케팅 > CTA로 이동합니다.
2. 왼쪽 상단의 드롭다운 메뉴를 클릭하고CTA를 선택하세요.
3. CTA 위에 마우스를 올린 후 편집을 클릭합니다. 
4. 상단에서 타겟팅 탭 을 클릭합니다. 
5. '버튼 클릭 시 트리거 ' 섹션에서 '코드 스니펫'을 클릭합니다.

6. 대화 상자에서 복사를 클릭합니다. 
7. 임베드 클래스를 외부 웹사이트의 버튼에 붙여넣으세요. 사이트의 버튼에 CSS 클래스를 추가하는 방법을 잘 모르겠다면 웹마스터, IT 부서 또는 개발자와 협력해야 할 수 있습니다.