지원 고객 지원 문의 | 시스템 상태 시스템 상태
페이지 내용

    HubSpot에 대한 사용자 정의 리드 양식 생성

    이 항목에서는 HubSpot 양식을 사용하여 브라이트코브 플레이어 내에서 리드 데이터를 캡처하는 방법을 배웁니다.

    Audience 모듈은 브라이트코브 플레이어 내부에서 비디오를 재생할 때 시청자 정보를 캡처할 수 있는 맞춤형 리드 양식을 만들 수 있는 기능을 제공합니다. 리드 데이터는 HubSpot으로 전송되고 처리됩니다.

    사용자 정의 가망 고객 양식을 생성하려면 다음 단계를 수행해야 합니다.

    1. 허브스팟에서 양식 만들기
    2. 양식 임베드 코드 복사 및 편집
    3. 오디언스 모듈에서 사용자 지정 리드 양식 만들기
    4. 플레이어에게 리드 양식 지정
    5. HubSpot에서 양식 데이터의 유효성을 검사

    허브스팟에서 양식 만들기

    HubSpot 양식은 웹 사이트 방문자의 리드 정보를 생성하는 데 사용할 수 있습니다. 이러한 양식은 브라이트코브 플레이어 내부에서도 표시할 수 있습니다. 아래 단계에서는 시청자 정보를 캡처할 수 있는 간단한 양식을 만듭니다. HubSpot 양식에 대한 자세한 내용은HubSpot 설명서를 참조하십시오 .

    1. HubSpot 계정에 로그인합니다.
    2. 마케팅 > 양식을누릅니다. 클래식 메뉴를 사용 하는 경우연락처 > 양식을클릭 합니다.
    3. 양식 작성을클릭합니다. 기본적으로 양식에는이메일필드와제출버튼이 포함됩니다.
    4. 일반 양식유형이 선택되어 있는지 확인합니다. 다음을 클릭합니다.
    5. 빈 템플릿이선택되어 있는지 확인합니다. 시작을 클릭합니다.
    6. 머리글에서 기본 이름을 클릭하고 양식의 이름을 지정합니다. Enter키를 눌러 변경 사항을 저장합니다.
    7. 머리글에서 기본 이름을 클릭하고 양식의 이름을 지정합니다. Enter키를 눌러 변경 사항을 저장합니다.
    8. 페이지의 왼쪽에는 양식에 추가할 수 있는 필드 목록이 있습니다. 양식에 원하는이름및 성필드를 페이지 오른쪽에 끌어다 놓습니다.
    9. 필드를 필수로 만들려면 필드 위에 마우스를 놓고더보기 필드로 > 만들기를클릭합니다. 필수 필드에는 필드 레이블 옆에*가 표시됩니다.
    10. 페이지 상단에 있는옵션링크를 클릭합니다.
    11. 방문자가 이 양식을 제출한 후 수행할 작업에대해 감사 메시지 표시를클릭합니다. 기본 메시지는 절대로 표시되지 않으므로 유지합니다.
    12. 페이지 상단에 있는스타일 및 미리 보기링크를 클릭합니다. 기본적으로바탕 화면미리 보기가 나타납니다.
    13. 페이지 상단에 있는 [ 게시 ] 를 클릭하여 변경 내용을 양식에 게시합니다.

    양식 임베드 코드 복사 및 편집

    Audience 모듈의 내부 양식을 사용하려면 양식 포함 코드를 복사하고 편집해야합니다. 또한 양식에 기본 스타일을 지정할 수도 있습니다. 아래 단계에서, 우리는 HTML 편집기에 양식 포함 코드를 복사 한 다음 폼에 몇 가지 스타일을 변경합니다.

    1. 페이지 오른쪽 위에 있는공유를클릭하고 임베드 코드를 클립보드에 복사합니다.
    2. 임베드 코드를 선택한 HTML 편집기에 붙여 넣습니다.
    3. 임베드 코드는 약간의 변경이 필요하므로 Audian이 제출 될 때 양식을 닫는 것을 알 수 있습니다. 줄 끝에 쉼표 formId:추가가 있는 줄을 찾습니다.
    4. 이 줄을 줄 아래에 formId:추가하십시오. 
      onFormSubmit: bcLeadForm.submit
    5. 기본적으로 양식이 브라이트코브 플레이어 내부에 표시되면 해당 양식이 플레이어 위에 투명한 배경에 표시됩니다. 다음 CSS를 embed 코드에 추가하여 배경색을 회색으로 변경합니다.
      <style>
      body {
      background-color: rgba(204,204,204,0.9);
      margin: 0;
      padding: 20px;
      height: 100%;
      }
      </style>

    오디언스 모듈에서 사용자 정의 리드 양식 만들기

    양식 임베드 코드가 편집되면 Audience 모듈에서 사용자 정의 리드 양식을 만들고 잠재 고객 양식을 오디언스 지원 플레이어와 연결합니다.

    1. 오디언스 모듈을 엽니다.
    2. 왼쪽 탐색에서가망 고객 양식을클릭합니다. 잠재 고객 양식이 생성된 경우 해당 양식이 표시됩니다.
    3. 가망 고객 양식 생성을 클릭합니다.
    4. 가망 고객 양식에 설명이 포함된 이름을 지정합니다.
    5. 양식 언어를 선택합니다.
    6. 양식 타이밍을 선택합니다. 양식 타이밍은 가망 고객 양식이 표시되는 시점을 결정합니다.
      가망 고객 양식 편집 (1)
    7. 양식 유형을사용자 정의 리드 양식으로설정합니다.
    8. 양식 포함 코드를붙여 넣습니다.
    9. ( 선택 사항)확인 HTML에붙여 넣습니다. 확인 보기가 5초 동안 표시되고 비디오 재생이 재개됩니다. 확인 HTML이 포함되어 있지 않으면 양식 제출 후 비디오가 다시 재생됩니다.
      가망 고객 양식 편집 (2)
    10. (선택사항) 양식 미리보기를 클릭하여 양식 미리보기를 엽니다.
    11. 저장을 클릭하여 가망 고객 양식을 저장합니다.

    플레이어에 가망 고객 양식 할당

    리드 양식이 생성되면 플레이어에게 할당해야 합니다. 플레이어에게 리드 양식을 할당하려면 다음 단계를 따르십시오.

    1. 왼쪽 탐색에서대상 플레이어를클릭합니다.
    2. 플레이어를 찾고Lead Form드롭다운 목록을 사용하여 리드 양식을 선택합니다.

    이제 설정이 완료되었으며 가망 고객 정보를 수집할 준비가 되었습니다. 시청자 지원 플레이어를 사용하여 비디오가 게시되면 양식 타이밍 설정에 따라가망 고객 양식이 표시됩니다.

    HubSpot에서 양식 데이터의 유효성 검사

    사용자 정의 리드 양식을 사용하여 캡처한 리드는 HubSpot 계정에 연락처로 추가됩니다. 리드 양식에서 캡처한 데이터를 쉽게 볼 수 있는 방법은 HubSpot에서 스마트 목록을 만드는 것입니다.

    1. HubSpot 계정에 로그인합니다.
    2. 마케팅 > 가망 고객 캡처 > 양식을누릅니다.
    3. 양식을 마우스 오버하면동작메뉴가 나타납니다. 작업 제출 > 보기를 클릭합니다. 양식 제출 목록이 나타납니다.
      리드 양식 - 플레이어 할당
    4. 행을 마우스 오버할 때 제출 서류 보기를 눌러 양식 데이터를 봅니다.
      리드 양식 - 플레이어 할당