오늘은 이메일마케팅을 위한 뉴스레터 구독자를 모집 방법 중 웹 사이트에서 팝업을 띄워 보다 효율적으로 구독자를 모집하는 방법에 대해 알아 보도록 하겠습니다.

웹사이트을 돌아다니다보면 도중에 뉴스레터 가입을 권유하는 팝업이 뜨는 경우를 종종 보는데요. 관심없는 사람에게는 팝업을 닫아야 하므로 귀찮게 느껴질 수 있지만 상당히 주목을 받을 수 있기 때문에 뉴스레터 구독자 모집에 유리한 방법중의 하나입니다.

참고로 여기서 구현하는 방법은 워드프레스룰 기준으로 합니다.

▽ 마케팅 관련 팁을 공유하는 Hubspot.com의 뉴스레터 가입 권유 팝업창이 뜬 모습

1. 메일침프에서 팝업 뉴스레터 가입폼 만들기

가장 먼저 해야하는 일은 팝업 뉴스레터 가입폼을 만드는 것입니다.

메일침프(Mailchimp) 사이트 Signup Forms로 이동하면 general Forms, Embedded forms, Subscriber pop-up, Form integrations의 4가지 형태를 선택할 수 있는 화면이 나옵니다.

1.1. Subscriber pop-up 선택

팝업 뉴스레터 가입폼을 만들어야하므로 세번째에 있는 Subscriber pop-up을 선택합니다.

1.2. 팝업 뉴스레터 가입폼 디자인

여기에서 팝업 뉴스레터 가입폼의 레이아웃 디자인, 가입 시 입력할 정보, 메세지 등을 적습니다.

팝업 뉴스레터 가입폼 디자인 기본 디자인

팝업 뉴스레터 가입폼의 레이아웃을 어떻게 짤 것인지? 글자 컬러라든지 기본적인 디자인 사항을 정합니다.

뉴스레터 가입 정보

두번째로는 뉴스레터 가입에 필요한 정보를 설정합니다. 향후 유용한 마케팅 전개를 위해서는 성별, 나이 등등의 다양한 정보를 얻을수록 좋겠지만 갈수록 개인정보보호가 강화되고 개인 정보 오픈에 대한 거부감이 심하므로 가능하면 간결한 정보만을 수집하는 것이 좋습니다.

저는 테스트삼아 운영하므로 이름과 메일주소 2개만 수집하기로 하였습니다.

뉴스레터 가입폼 팝업 관련 세탕

뉴스레터 가입폼을 언제 띄울것인지, 팝업폼의 크기는 얼마로 할 것인지 그리고 가입 신청 시 바로 가입을 받을 것인지 아니면 이메일로 컨펌 단계를 거칠것인지를 정합니다.

뉴스레터 가입폼 메세지

뉴스레터 가입폼에서 어떤 메세지를 전달할지를 내용을 정합니다.
최근 추세는 군더더기 이야기를 다 빼고 곡 필요한 이야기만하는 미니멀리즘에 기반하 가입폼이 대세인 것 같습니다.

저의 경우는 추기 조금 전달하고싶은 메세지를 길게 적었습니다. 인지도가 낮기 때문에 좀 더 말로 때우겠다는..

이러한 작업이 끝나고 Publish 버튼을 누르면 저장이 됩니다. Publish했다고 자동으로 웹사이트에서 팝업창이 뜨는 것은 결코 아닙니다.

마지막으로 view code 버튼을 눌러서 code를 복사해 둡니다.
저의 경우 아래와 같은 코드가 나오더군요.

<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us15.list-manage.com","uuid":"bd2faec6f6317ee4ea750cb74","lid":"903f360618"}) })</script>

2. 워드프레스 테마에서 팝업을 띄우도록 설정

이제는 워드프레스에서 뉴스레터 가입폼이 자동으로 팝업으로 뜰 수 있도록 조치를 취해야 합니다.

대부분의 워드프레스 테마들은 자동으로 팝업을 띄우는 기능이 없으므로 팝업을 띄워주는 플러그인을 설치하거나 다른 방안을 찾아야 합니다.

여기에서는 테마에 Html 코드를 추가함으로써 팝업을 띄우는 방법에 대해서 알아보겠습니다. 이 방법은 MailChimp Popup Script that works with WordPress sites
에서 소개하고 있는 방식인데요. 별도 플러그인이 필요하지 않아서 속도 저하를 걱정할 필요가 없습니다.

2.1. 팝업 스크립트 작성

위 메일침프에서 가져온 코드에 든 정보(baseUrl, uuid, lid )를 기반으로 아래 스크립트를 완성해 줍니다.

아래 스크립트 중 baseUrl, uuid, lid 3가지 정보만 업데이트해주고 나머지는 그대로 사용합니다.

<script>
    // Fill in your MailChimp popup settings below.
    // These can be found in the original popup script from MailChimp.
    var mailchimpConfig = {
        baseUrl: 'mc.us15.list-manage.com',
        uuid: 'bd2faec6f6317ee4ea750cb74',
        lid: '903f360618'
    };

    // No edits below this line are required
    var chimpPopupLoader = document.createElement("script");
    chimpPopupLoader.src = '//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js';
    chimpPopupLoader.setAttribute('data-dojo-config', 'usePlainJson: true, isDebug: false');

    var chimpPopup = document.createElement("script");
    chimpPopup.appendChild(document.createTextNode('require(["mojo/signup-forms/Loader"], function (L) { L.start({"baseUrl": "' +  mailchimpConfig.baseUrl + '", "uuid": "' + mailchimpConfig.uuid + '", "lid": "' + mailchimpConfig.lid + '"})});'));

    jQuery(function ($) {
        document.body.appendChild(chimpPopupLoader);

        $(window).load(function () {
            document.body.appendChild(chimpPopup);
        });

    });
</script>

2.2. Custom html에 스크립트 적용

테마의 적절한 곳에 완성된 스크립트를 적용합니다.
제가 사용하는 newspaper theme는 custom html 코드를 넣는 곳이 있는데요. 저는 이곳에 넣었습니다. 테마 설며에 의하면 페이지의 끝 부분에 위치한다고 합니다.

별 이상없이 잘 작동합니다.

▽ 메일침프 뉴스레터 가입폼 팝업이 적용 된 모습