Usage / Sample Code 창

Usage / Sample Code 창은 뉴스레터 구독 기능을 공개 웹페이지에 연결하기 위한 샘플 코드와 사용 방법을 제공합니다.

이 기능은 뉴스레터 구독 폼을 페이지에 추가하거나, 보안 토큰을 적용하거나, 관리자 페이지로 바로 이동하는 링크를 만들 때 매우 중요합니다.

Modal 탭 구성

Usage / Sample Code 창은 세 개의 탭으로 구성됩니다.

Usage 탭

Usage 탭은 뉴스레터 기능이 어떻게 동작하는지 요약해서 보여줍니다.

공개 구독 페이지

공개 뉴스레터 페이지는 방문자가 뉴스레터를 신청할 수 있는 페이지입니다.

/ShowPage/Newsletter

이 페이지는 독립적인 뉴스레터 신청 페이지가 필요할 때 사용할 수 있습니다. 홈페이지 푸터, 팝업, 랜딩 페이지, 문의 페이지 등에 연결할 수 있습니다.

링크 예시

<a href="/ShowPage/Newsletter" target="_blank">
    Subscribe to Newsletter
</a>

Public Page Code 탭

Public Page Code 탭은 공개 뉴스레터 구독 폼 샘플 코드를 제공합니다. 이 코드는 페이지, 레이아웃 영역, 팝업, 사용자 정의 HTML 영역에 복사해서 사용할 수 있습니다.

샘플 폼에는 일반적으로 다음 요소들이 포함됩니다.

• 뉴스레터 CSS 파일 참조
• 구독 폼 form 태그
• 숨겨진 보안 토큰 필드
• 폼 시작 시간 hidden 필드
• 스팸 방지를 위한 Honeypot 필드
• 이름, 성, 회사명, 이메일, 국가 등의 입력 필드
• 보안 토큰을 불러오고 폼을 제출하는 JavaScript 로직

CSS 참조

샘플 코드에는 다음과 같은 뉴스레터 스타일시트가 포함될 수 있습니다.

<link href="/iboard/skin/common/admin2/css/newsletter/newsletter.css" rel="stylesheet" />

Form 구조

공개 뉴스레터 폼은 보통 다음과 같은 ID로 구성됩니다.

<form id="newsletterSubscribeForm" class="nl-form">
    ...
</form>

이 폼은 구독자 정보를 입력받고 뉴스레터 구독 처리 경로로 전송하는 데 사용됩니다.

Security Token

샘플 폼에는 숨겨진 Anti-forgery Token 필드가 포함되어 있습니다.

<input type="hidden"
       id="NewsletterSubscribeToken"
       name="__RequestVerificationToken"
       value="" />

폼을 제출하기 전에 이 토큰을 먼저 불러와야 합니다. 이 값은 뉴스레터 폼이 정상적인 웹사이트 요청인지 검증하는 데 사용됩니다.

서버의 뉴스레터 처리 기능이 토큰 검증 없이 동작하도록 의도적으로 설정된 경우가 아니라면, Anti-forgery Token 필드를 제거하지 않는 것이 좋습니다.

Form Started Time

샘플 폼에는 폼이 시작된 시간을 저장하는 hidden 필드가 포함될 수 있습니다.

<input type="hidden"
       id="NewsletterFormStartedAt"
       name="FormStartedAt"
       value="" />

이 값은 봇이 너무 빠르게 폼을 제출하는 것과 같은 의심스러운 요청을 감지하는 데 사용할 수 있습니다.

Honeypot 필드

샘플 코드에는 숨겨진 Honeypot 필드가 포함될 수 있습니다.

<input type="text"
       name="NewsletterFaxNumber"
       class="nl-honeypot"
       tabindex="-1"
       autocomplete="new-password"
       aria-hidden="true" />

실제 사용자는 이 필드를 입력하지 않아야 합니다. 자동화된 스팸 봇은 이 필드를 잘못 입력할 수 있고, 시스템은 이를 이용해 비정상 제출을 감지할 수 있습니다.

Honeypot 필드는 일반 사용자에게 보이지 않도록 유지해야 하며, 스팸 방지를 위해 제거하지 않는 것이 좋습니다.

구독자 입력 필드

샘플 폼에는 일반적으로 아래와 같은 구독자 입력 필드가 포함됩니다.

구독 해지 폼

뉴스레터 구독 해지 요청은 아래 경로로 전송됩니다.

/ShowPage/Newsletter/Unsubscribe

구독자가 더 이상 뉴스레터를 받지 않도록 처리할 때 이 구독 해지 경로를 사용합니다.

구독 해지 요청은 반드시 존중해야 합니다. 명확한 동의 없이 구독 해지 사용자를 다시 활성화하지 않는 것이 좋습니다.

Admin Link Code 탭

Admin Link Code 탭은 관리자 화면, 대시보드, 바로가기, 내부 페이지에서 뉴스레터 구독자 목록으로 이동하기 위한 샘플 링크 코드를 제공합니다.

뉴스레터 구독자 목록으로 바로 이동하는 버튼이나 링크를 만들 때 사용할 수 있습니다.

관리자 링크 예시

<a href="/Admin/Newsletter" target="_blank">
    Open Newsletter Subscribers
</a>

Copy Code 버튼

Copy Code 버튼은 현재 표시된 샘플 코드를 복사합니다. 이 버튼을 사용하면 코드를 다른 페이지나 레이아웃 영역에 쉽게 붙여넣을 수 있습니다.

1. Usage / Sample Code 버튼을 클릭합니다.
2. 필요한 탭을 선택합니다.
3. 표시된 샘플 코드를 확인합니다.
4. Copy Code 버튼을 클릭합니다.
5. 대상 페이지, 템플릿, 팝업 또는 레이아웃 영역에 코드를 붙여넣습니다.
6. 저장 후 공개 뉴스레터 폼을 테스트합니다.

권장 연동 순서

1. Admin > CRM > Newsletter 메뉴로 이동합니다.
2. Usage / Sample Code 버튼을 클릭합니다.
3. Usage 탭에서 뉴스레터 기능 흐름을 확인합니다.
4. Public Page Code 탭을 엽니다.
5. Copy Code 버튼을 클릭합니다.
6. 대상 페이지 또는 레이아웃 영역에 샘플 코드를 붙여넣습니다.
7. 페이지를 저장합니다.
8. 공개 페이지에서 구독 테스트를 진행합니다.
9. 관리자 Newsletter 화면으로 돌아와 구독자가 생성되었는지 확인합니다.

구현 시 주의사항

• 서버 처리 기능이 별도로 설정된 경우가 아니라면 Anti-forgery Token을 제거하지 마세요.
• 스팸 제출을 줄이기 위해 Honeypot 필드를 유지하는 것이 좋습니다.
• 필수 입력 필드가 서버의 뉴스레터 모델과 맞는지 확인하세요.
• 샘플 코드를 페이지에 붙여넣은 뒤 반드시 테스트하세요.
• 뉴스레터 CSS 경로가 현재 설치 환경에서 올바른지 확인하세요.
• 구독 해지 링크나 구독 해지 폼을 만들 때는 Unsubscribe 경로를 사용하세요.