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

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

콘텐츠에 CTA를 추가한 후 마케팅 허브, 콘텐츠 허브 프로페셔널 또는 엔터프라이즈에 가입한 경우 방문자가 CTA와 상호 작용한 후 작업을 자동화하는 워크플로우를 만들 수 있습니다. 예를 들어 방문자가 CTA에서 양식을 제출한 후 일련의 마케팅 이메일을 트리거하여 새 연락처를 육성할 수 있습니다.

콘텐츠에 CTA 추가하기 이해하기

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

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

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

HubSpot 콘텐츠에 CTA 추가하기

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

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

HubSpot 페이지에 CTA 추가하기

클릭 유도 문안 모듈을 사용하여 HubSpot에서 호스팅되는 페이지에 CTA를 삽입할 수 있습니다.

1. 콘텐츠로 이동합니다:

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

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

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

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

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

1. 콘텐츠로 이동합니다:

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

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

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

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

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

1. HubSpot 계정에서 마케팅 > 이메일로 이동합니다.
2. CTA를 추가할 이메일에 마우스를 가져간 다음 편집을 클릭합니다. 또는 새 이메일을 작성합니다.
3. 왼쪽 패널에서 버튼 모듈을 클릭하고 이메일 편집기로 드래그합니다
   

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

참고: 이메일용 CTA를 만들거나 선택할 때는 하나의 버튼 또는 이미지만 지원됩니다. 버튼과 이미지 등 여러 요소가 포함된 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를 추가하려면:

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

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

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

플레이스홀더의 동일한 창에서 링크를 열려면 사용자가 대상 속성 태그를 target="_self".

로 수동으로 변경할 수 있습니다

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

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

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

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