Изображение от @mathyaskurmann на Unsplash

Позволяването на хората да получават актуализации от вашия блог е чудесен начин да създавате и да се ангажирате с вашата аудитория. Исках да създам компонент за абониране за моя блог. Да, това може да се постигне с RSS емисии, но си помислих, че би било хубаво да добавим нов компонент на потребителския интерфейс и да се интегрираме с услуга. Избрах Mailchimp, за да позволя на посетителите да се абонират за моя блог! Най-добрата част е, че вече има плъгин Gatsby, който се справя с тежката работа.

Създайте акаунт в MailChimp 📬

Преминете към Mailchimp и създайте акаунт. Безплатното ниво трябва да е повече от достатъчно, за да започнете. За да използваме приставката, трябва да вземем вашата крайна точка на Mailchimp.

След като акаунтът ви е напълно настроен, отидете на Създаване -› Формуляр за регистрация. Щракнете върху Начало и трябва да видите създателя на шаблон за формуляр Mailchimp. Превъртете надолу до секцията Копиране/поставяне във вашия сайт и копирайте URL стойността от <form action="%URL%"...>. Ще започне така https://dev.us18.list-manage.com/subscribe/....

Добавяне и настройка на пакет с добавки 📦

Добавете Gatsby Plugin Mailchimp към вашето хранилище:

npm install gatsby-plugin-mailchimp

Настройте приставката във вашия gatsby-config.js. Исках да запазя крайната си точка защитена, затова я добавих към моя .env файл и посочих крайната точка чрез променливата на средата.

require('dotenv').config()
...
    {
      resolve: 'gatsby-plugin-mailchimp',
      options: {
        endpoint:
          'process.env.MAILCHIMP_ENDPOINT',
      },
    },

Създайте компонента за абониране 🧩

Използвам компоненти Ant Design в моя сайт, но можете да използвате подобна библиотека с компоненти на потребителския интерфейс или ваши собствени ръчно навити компоненти. Крайният резултат ще бъде същият, ще създадем нова форма с три елемента; поле за име, имейл и бутон. Формулярът при изпращане ще използва addToMailChimp импортиране от gatsby-plugin-mailchimp, за да изпрати въведените данни към Mailchimp и да накара потребителя да се абонира за цялото ви страхотно съдържание.

import React from 'react'
import addToMailchimp from 'gatsby-plugin-mailchimp'
import { Form, Input, Button, Divider } from 'antd'
import { UserOutlined, MailOutlined } from '@ant-design/icons'
import 'antd/dist/antd.css'

export default class Subscribe extends React.Component {
  constructor() {
    super()
    this.state = { name: '', email: '', result: null }
  }

  handleSubmit = async (e) => {
    const result = await addToMailchimp(this.state.email, { FNAME: this.state.name })
    if (result.result === 'error') {
      alert(`Whoops, ${this.state.name} you're already subscribed!`)
    } else {
      alert(`Thank you for subscribing ${this.state.name}!`)
    }
    this.setState({ result: result })
  }

  handleEmailChange = (event) => {
    this.setState({ email: event.target.value })
  }

  handleNameChange = (event) => {
    this.setState({ name: event.target.value })
  }

  render() {
    return (
      <React.Fragment>
        <Divider />
        <div className="subscribe">
          <h3 className="subscribeInfo">
            Like the article? Subscribe to get notified whenever a new article gets published!
          </h3>
          <Form name="subscribe" onFinish={this.handleSubmit} layout="inline">
            <Form.Item
              label="E-mail"
              name="email"
              rules={[{ required: true, message: 'Please input your email.' }]}
            >
              <Input prefix={<MailOutlined />} onChange={this.handleEmailChange} />
            </Form.Item>

            <Form.Item
              label="Name"
              name="name"
              rules={[{ required: true, message: 'Please input your name.' }]}
            >
              <Input prefix={<UserOutlined />} onChange={this.handleNameChange} />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" shape="round">
                Subscribe
              </Button>
            </Form.Item>
          </Form>
        </div>

        {/* --- STYLES --- */}
        <style jsx>{`
          .subscribe {
            .subscribeInfo {
              text-align: center;
              padding-bottom: 20px;
            }
          }
          .ant-form .ant-form-inline {
            justify-content: center;
          }
        `}</style>
      </React.Fragment>
    )
  }
}

Завършвам 🏁

Сега, когато компонентът е създаден, можете да го добавите в сайта си, където искате. Някои го добавят като popover или отстрани. Исках моята да е в края на всеки пост. За да постигна това, просто добавих компонента в края на шаблона за публикация.

import Subscribe from '../Subscribe'
...
<Subscribe />

Време е да се насладите на готовия продукт.

Оттук нататък може да искате да направите някои тестове, за да се уверите, че всичко работи. Опитайте да добавите себе си или приятел към аудиторията си. Mailchimp предлага автоматизирани имейли от RSS емисии, самостоятелни имейли и други начини да се ангажирате с вашата новосъздадена аудитория. Щастливи пътеки!