뉴스레터 배너 연결
이번 글은 워드프레스 블로그 개설 과정 4 뉴스레터 배너 연결에 대해 작성하고자 한다. 앞서 3편은 포스팅 글의 중간에 위치하는 뉴스레터 배너를 만들었다. 이제 이렇게 만든 배너의 Subscribe Now라는 버튼을 클릭하면 Email 주소를 넣을 수 있는 팝업이 뜨도록 구성을 해보자. 먼저 대쉬보드 왼쪽 메뉴에 있는 Hustle을 클릭한다.
뉴스레터 팝업이 떠야 하기에 팝업을 선택한다.
방문자에게 이메일 주소를 입력받는 형태이기에 이름과 타입을 아래와 같이 설정한다.
뉴스레터 팝업 템플릿을 골라 선정한다.
Title에 작성하는 글은 뉴스레터 팝업의 가장 큰 글씨로 표현된다. 또한 이미지도 원하는 이미지로 변경한다.
세부내용에 대해 적을수 있는 공간이다.
방문자의 이메일을 받고 이 이메일로 최신 소식을 전해줘야 하기에 Emails를 클릭한다.
Subsmission Behavior는 방문자의 이메일이 정상적으로 입력되어지면 보여줄 Success Message를 작성하는 항목이다. 그리고 자동으로 팝업이 사라지지 않게 Never를 선택한다.
화면 하단의 Integration을 클릭한다.
방문자가 제출한 이메일은 Hustle메뉴의 Email Lists에서 Local List에서 확인이 가능하다.
특별하게 변경할 내용이 없기에 화면 하단으로 이동해 Appearance를 눌러 다음 화면으로 넘어간다.
Appearance 화면에서 아무것도 바꾸지 않고 VISIBILITY를 누른다.
아래의 페이지에서는 Email을 적을 수 있는 팝업이 뜨는 조건에 대해 설정하는 화면이다.
모든 페이지에 팝업을 뜨게 하고 싶으면 Pages를 클릭하고 닫으면 된다. 이런식으로 각각의 조건을 확인하고 적용하면 된다. 해당 조건을 설정하고 ADD Conditions을 클릭한다.
화면 하단의 Behavior를 클릭한다.
팝업을 뜨게 하는 트리거를 결정하는 부분이다. default값은 시간으로 누군가 홈페이지에 방문 시 3초 후에 팝업이 자동으로 뜨게 하는 것이다.
그러나 지금은 이 Time 트리거를 사용하지 않고 클릭을 했을 때 팝업이 뜨는 형식으로 구현해보자. 아래의 그림과 같이 CSS selector를 입력해줘야 한다. 이 CSS selector값을 알고자 한다면 대시보드의 AE Templates 메뉴에서 제작해 두었던 Blog Newsletter Form을 클릭한다. 그리고 나서 나온 페이지에서 elementor 버튼을 클릭한다.
여기에서 Subscribe NOW 버튼을 클릭한 후 왼쪽의 Content 탭에서 Button ID 항목에 명명하고자 하는 임의의 값을 입력한다. 그리고 그 입력한 값을 복사해놓는다.
이 텍스트를 CSS selector 항목에 앞에 #을 붙인 후 붙여넣기한다.
그리고 화면 맨 하단으로 이동하여 publish 버튼을 눌러준다.
이렇게 마무리하면 이제 방문자가 해당 배너의 Subsceibe Now 버튼을 누르면 E-mail 주소를 입력할 수 있는 팝업과 연결되고 그 팝업에 이메일 주소를 입력하면 해당 이메일 주소는 Hustle의 로컬 이메일 리스트에 저장되게 된다.
아래의 화면과 같이 Hustle 메뉴의 Integrations을 클릭하면 굉장히 많은 앱과 연동할 수 있음을 알 수 있다. 그 중에 하나가 MailChimp이다.
이렇게 많은 앱 중에 MailChimp를 클릭하여 연동해보자.
뉴스레터에 가입한 사용자들에게 각종 최신 소식과 마케팅 정보를 전달하기 위해 이메일 마케팅 솔루션으로 유명한 MailChimp을 사용해보자. MailChimp는 2,000개의 이메일 주소까지는 무료로 사용이 가능하며 그 이상 사용하고자 하면 유료 플랜 구독을 하는 솔루션이다.
MailChimp를 클릭하면 먼저 API키가 있어야 연동이 가능함을 알 수 있다. Identifier 에는 이름을 그냥 적어주면 된다. API 키를 발급받기 위해서는 MailChimp 사이트에 방문해서 회원가입을 먼저 해야 한다. 회원가입은 일반적인 방법이라 생략한다. 회원가입을 완료하고 화면 우측 상단의 이름 또는 이미지를 클릭한 후 Profile 항목을 클릭한다.
API Key Name은 Hustle에서 MailChimp와 연동하기 위해 작성한 이름과 같은 이름으로 정해준다.
여기까지 진행 후 Connect 버튼을 누르면 MailChimp와 Hustle간의 연동이 끝난다.
