ConvertKit을 사용하여 GatsbyJS에서 뉴스레터 양식 작성

"Florian Klauer의 Unsplash님의 사진"

🔔 이 글은 원래 제 사이트MihaiBojin.com에 게시된 글입니다. 🔔


2020년부터 뉴스레터가 대세! 모두가 거의 멸종했다고 생각했던 매체가 그 어느 때보다 강력하게 돌아왔습니다!

이 사실은 build a site from scratch에 대한 나의 결정에 부분적으로 영향을 미쳤습니다.

내 뉴스레터 가입을 위한 '퍼널의 상단' 역할을 할 것입니다.

기술적인 세부 사항에...

이메일 마케팅 도구와 통합

I chose ConvertKit because I can start free and build it up in time. It's built with the small creator in mind by an Indie Hacker .

이메일 목록 작성을 시작하고 싶었습니다. 하지만 아직 콘텐츠가 많지 않았기 때문에 너무 공격적인 입장을 취하고 사용자에게 뉴스레터 가입을 강요하는 것은 말이 되지 않았습니다.

내 사이트 바닥글에 뉴스레터 양식을 추가하기로 결정했습니다.

GatsbyJS에는 이메일 마케팅 도구(또는 명시적으로 ConvertKit)를 통합하는 간단한 방법이 없습니다.

두 가지 옵션이 있습니다.

간단한 HTML 양식을 직접 작성하고 ConvertKit에 직접 게시

ConvertKit의 Javascript 기반 양식을 표시하기 위해 React 구성 요소 작성

더 좋은 UX와 몇 가지 추가 기능이 내장되어 있기 때문에 후자를 선택했습니다. 이에 대해서는 아래에서 설명하겠습니다.

Gatsby는 모든 페이지를 미리 렌더링하므로 스크립트 태그를 직접 포함할 수 없습니다. 스크립트 태그는 빌드 시 해석되며 최종 사용자에게는 작동하지 않습니다.

해결책은 DOM을 사용하여 스크립트 요소를 만들고 표시하는 것이었습니다.

구성 요소의 코드는 다음과 같습니다.

import * as React from "react";
import { Component } from "react";

class Newsletter extends Component {
  componentDidMount() {
    const script = document.createElement("script");
    script.src = "CONVERTKIT-FORM-URL";
    script.async = true;
    script.setAttribute("data-uid", "CK-UID");
    this.instance.appendChild(script);
  }

  render() {
    return (
      <div>
        <h3>Subscribe to my newsletter</h3>
        <div ref={(el) => (this.instance = el)}></div>
      </div>
    );
  }
}

export default Newsletter;

변환키트

Once I finished the coding part, I had to customize ConvertKit.

I didn't want to use my personal Gmail as the sender of the newsletter, but I also did not want to set up a separate account or pay for email hosting.

이메일 전달

I created a simple email forwarding rule in https://forwardemail.net 모든 이메일을 내 Gmail 계정으로 전달합니다.

이 프로세스의 첫 번째 단계는 도메인 소유권을 확인하는 것입니다. 계정을 만든 후 도메인의 DNS 레코드를 업데이트했습니다.

https://cloudflare.com을 통해 모든 도메인을 관리하고 https://www.terraform.io/을 사용하여 모든 관리 작업을 자동화합니다.

Terraform 하위 수준(문서가 훌륭함)에 대해서는 다루지 않겠지만 사용하는 구성은 다음과 같습니다.

variable "zone_id_com_mihaibojin" {
  default = "GET-THIS-FROM-CLOUDFLARE"
}

resource "cloudflare_record" "com_mihaibojin_mx1" {
  zone_id = var.zone_id_com_mihaibojin
  name = "@"
  value = "mx1.forwardemail.net"
  priority = 10
  type = "MX"
}

resource "cloudflare_record" "com_mihaibojin_mx2" {
  zone_id = var.zone_id_com_mihaibojin
  name = "@"
  value = "mx2.forwardemail.net"
  priority = 20
  type = "MX"
}

resource "cloudflare_record" "com_mihaibojin_forwardemail_spf" {
  zone_id = var.zone_id_com_mihaibojin
  name = "@"
  value = "v=spf1 a mx include:spf.forwardemail.net -all"
  type = "TXT"
}

resource "cloudflare_record" "com_mihaibojin_forwardemail_ver" {
  zone_id = var.zone_id_com_mihaibojin
  name = "@"
  value = "forward-email-site-verification=GET-THIS-FROM-FORWARDEMAIL"
  type = "TXT"
}

업데이트된 도메인의 DNS는 간단한 명령입니다!

terraform plan && terraform apply

ConvertKit 구성

After I configured email forwarding and verified I could receive emails, it was time to set up ConvertKit. After adding my email 확인 이메일을 기다렸다가 제공된 링크를 클릭했습니다.

SPF 및 DKIM

I also set up "Sender Policy Framework" (SPF) and "Domain Keys Identified Mail" (DKIM). Read more here 보내는 이메일을 확인하는 것이 필수적인 이유(스포일러 경고: 주로 이메일이 스팸으로 분류되지 않도록 하기 위함).

다시 한 번 Terraform을 사용하여 이 단계를 자동화했습니다.

resource "cloudflare_record" "om_mihaibojin_convertkit_cname1" {
  zone_id = var.zone_id_com_mihaibojin
  name = "ckespa.mihaibojin.com"
  value = "spf.dm-2m2gkx6y.sg7.convertkit.com"
  type = "CNAME"
}

resource "cloudflare_record" "com_mihaibojin_convertkit_cname2" {
  zone_id = var.zone_id_com_mihaibojin
  name = "cka._domainkey.mihaibojin.com"
  value = "dkim.dm-2m2gkx6y.sg7.convertkit.com"
  type = "CNAME"
}

DMARC

I went the extra mile and also configured DMARC . 많은 양의 이메일을 보내지 않을 때 신경쓰지 않아도 되지만 제대로 시작하고 미래의 성공을 위해 준비하고 싶었습니다!

DMARC의 정책 설정 중 하나는 p=none 입니다. 즉, 데이터가 수집되지만 실행되지는 않습니다. 이것이 이 시나리오에서 원하는 것입니다.

수집된 데이터를 모니터링하기 위해 https://dmarcian.com/에 계정을 만들었습니다. 데이터를 분석하고 모든 위협에 대해 보고하는 서비스를 제공합니다.

DMARC의 DNS 레코드 구성이 Terraform에서 다음과 같이 표시됩니다.

resource "cloudflare_record" "com_mihaibojin_dmarc" {
  zone_id = var.zone_id_com_mihaibojin
  name = "_dmarc.mihaibojin.com"
  value = "v=DMARC1; p=none; rua=mailto:GET-THIS-FROM-DMARCIAN;"
  type = "TXT"
}

자세한 내용은 다음 리소스를 참조하세요.

https://www.newslettercrew.com/blog/what-is-dmarc

https://dmarcian.com/start-dmarc/

GDPR 및 뉴스레터 가입

I wrote about privacy and GDPR in the European Union in my privacy-friendly analytics 기사.

ConvertKit에는 사용자가 GDPR의 지침에 해당하는 기능을 명시적으로 선택할 수 있는 옵션이 있습니다. 그러나 그 결과 사용자는 가입 후 별도의 페이지로 리디렉션됩니다.

기본적으로 ConvertKit은 사용자를 https://app.convertkit.com/confirm-subscription으로 보냅니다. 이로 인해 사용자가 내 사이트에서 멀어지기 때문에 사용자가 홈페이지나 다른 기사로 다시 이동할 수 있도록 동일한 메시지를 https://mihaibojin.com/confirm-subscription에 복제했습니다!

URL은 Settings -> Incentive로 이동하여 URL을 추가하여 ConvertKit에서 생성된 각 양식에 대해 구성할 수 있습니다.

결론

I hope you found this post useful. If you have any thoughts or comments, please share your thoughts .

That's all for now. In the future, I may drop the ConvertKit Javascript code and implement an HTML form since I'm not particularly fond of tracking JS running on my site.

Until then, stay safe!

---

If you liked this article and want to read more like it, please subscribe to my newsletter ; 몇 주에 한 번씩 보내드립니다!