리드젠에서 제공된 랜딩페이지 CTA 버튼 적용, 꾸미기

소개

마케팅을 처음 접하고 퍼널시스템도 처음 접하고 막연히 아~ 이렇게들 하고 있었구나 하면서 많이 배우고 있습니다. 퍼널을 실습하기 위해 리드젠을 사용하면서 리드젠에서 제공하는 기본 버튼을 좀 더 활용해 볼 수 없을까 하는 생각에 버튼 텍스트와 색상을 변경해보았습니다.

2주차에 랜딩페이지를 만들었고 3주차에는 리드젠에서 제공되는 문자발송 세팅과 리드젠 CTA 버튼 추가하는 작업을 해보았습니다.

한국어 신청서 스크린샷
한국어 신청서가 화면에 표시됩니다

진행 방법

  1. 2주차에 랜딩페이지를 만들었고 3주차에는 리드젠에서 제공되는 문자발송 세팅과 리드젠 CTA 버튼 추가하는 작업을 해보았습니다.

  2. 퍼널설계-퍼널문자 메뉴를 통해 발송할 문자 설정

    한국어 텍스트가 있는 웹사이트의 스크린샷
  3. 퍼널설계-그룹관리 메뉴를 통해 조건에 맞는 그룹, 문자 설정

  4. 2주차에 커서, 클로드를 통해 만들어낸 랜딩페이지에 제작된 버튼을 삭제하고 리드젠에서 제공하는 버튼을 추가해야 버튼클릭시 DB수집을 비롯한 리드젠 서비스를 사용할 수 있으므로 기본제공된 리드젠 버튼을 꾸며보았다.

    1. 기본 제공되는 버튼의 텍스트는 아래와 같은 메뉴에서 변경이 가능하나

      숫자가 적힌 정사각형 사진

      라디오 버튼 선택에 따라 동적으로 내가 만든 버튼이 아닌 리드젠에서 제공된 기본 버튼의 텍스트를 변경하고 마우스가 올라갔을때 hover 기능을 추가하였다.

    2. 지난번 글의 클로드 채팅창에서 이어서 질문 했고 현재 클로드는 내가 랜딩페이지를 만들고 있고 그 랜딩페이지를 리드젠이라는 회사의 서비스에 올리고 있다는 걸 알고 있는 상태입니다.

      한국어가 포함된 한국 웹사이트의 스크린샷
    3. 브라우저 개발자 도구를 사용해서 페이지의 소스를 보고 수정하는 부분의 클래스명을 알려주면 거기에 맞게 소스를 수정해준다는 이야기에 브라우저 개발자 도구를 이용하여 리드젠에서 제공되는 버튼주변의 소스를 캡쳐하여 클로드에게 주었습니다.

      (크롬 브라우저 개발자 도구의 단축키는 F12버튼)

      어도비 포토샵 cs6
      Adobe Adobe Adobe Adobe Adobe의 코드 편집기 스크린샷
      한국어 코딩 언어의 스크린샷
  5. 신청하기 완료후 또 다른 페이지로 유도 해야 하기에 우선은 발송완료 페이지를 만들어 캔바에서 만든 이미지를 등록하여 연결했습니다.

    한국어 텍스트가 포함된 웹페이지의 스크린샷
    하트가 있는 한국어 말풍선

휴대폰으로 한국어로 된 메시지
  1. 랜딩페이지

    1. http://leadz.kr/xG3

도움 받은 글

참고한 지피터스 글이나 외부 사례를 알려주세요.

‎​

8
3개의 답글

👉 이 게시글도 읽어보세요