Изображение от @mathyskurmann на 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>
    )
  }
}

Завершаем 🏁

Теперь, когда компонент создан, вы можете добавить его на свой сайт, где хотите. Некоторые добавляют его как всплывающее окно или в стороне. Я хотел, чтобы мой был в конце каждого поста. Для этого я просто добавил компонент в конец шаблона сообщения.

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

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

Отсюда вы можете провести некоторое тестирование, чтобы убедиться, что все работает. Попробуйте добавить себя или друга в свою аудиторию. Mailchimp предлагает автоматические электронные письма из RSS-каналов, автономные электронные письма и другие способы взаимодействия с вашей новой аудиторией. Счастливых троп!