【Nuxt×MailChimp】MailChimp Marketing APIを使ってメルマガ登録フォームを作成する

今回はNuxtのserverMiddlewareプロパティ（とExpress）を利用して

MailChimpのAudienceリストにメールアドレスが登録できるようにしてみます。

MailChimp：All-In-One Integrated Marketing Platform for Small Business | Mailchimp

今回はMailChimpで試しましたが、SendGridでもログイン認証でも同じ要領でできると思います。

AudienceIDとAPI Keyを準備

AudienceIDの確認場所

Audience > Audience dashboard - Manage Audienceプルダウン - Settings > Settings - Audience name and defaults

ここでメールアドレスを登録したいリストのAudienceIDをメモ。

API Keyの発行

ユーザーメニュー - Profile > Extras > API keys

Your API keysの「Create A key」で発行＆メモ。

.envに格納するのがおすすめ。

インストール

npm i -S mailchimp-api-v3 vee-validate

バリデーションもついでに作っちゃおうと思うので、

バリデーションで使用する「vee-validate」も一緒にインストールします。

バリデーション設定を作る

pluginsにコンポーネントで呼び出す設定を登録します。

/pluginsにvee-validate.jsを作成（分かれば名前は何でも良いです）

nuxt.config.js

  plugins: [
    '~/plugins/vee-validate'
  ],
  build: {
    transpile: [
      'vee-validate/dist/rules'
    ]
  }

次に中身を書きます。

今回はメルマガ登録用のメールアドレス入力欄だけなので、

• required
• email

の2つにします。

vee-validate.js

import Vue from 'vue'
import { ValidationProvider, ValidationObserver, localize, extend } from 'vee-validate'
import ja from 'vee-validate/dist/locale/ja.json'
import { required, email } from 'vee-validate/dist/rules'

// メール：通常はこんな感じ
extend('email', email)

// 必須項目：カスタム文章にするならこんな感じ
extend('required', {
  ...required,
  message: '必須だよ'
})

Vue.component('ValidationProvider', ValidationProvider)
Vue.component('ValidationObserver', ValidationObserver)
localize('ja', ja)

フォームを作成する

<template lang="pug">
  div
    client-only
      form
        ValidationObserver(v-slot="props" ref="subscribe" tag="form" @submit.prevent="!props.invalid && subscribe()")
          fieldset
            validation-provider(v-slot="props" rules="required|email")
              input(type="email" v-model="form.email")
              span(v-show="props.errors.length") {{ props.errors[0] }}
          button(type="submit" :disabled="props.invalid") 登録する
</template>

<script>
export default {
  data () {
    return {
      form: {
        email: '',
      },
      props: []
    }
  }
}
</script>

ValidationObserverはフォーム（のどれか）でエラーがある時にsubmitボタンをdisabledにするのに使用。

ValidationProviderでフォームのバリデーションを指定・監視。

あとで名前などの項目を増やしても良いようにformにメールアドレスを格納します。

serverMiddlewareの設定

/apiディレクトリを作成、その中にindex.jsを作ります。

参考：serverMiddleware プロパティ - NuxtJS

nuxt.config.js

  serverMiddleware: [
    { path: '/api', handler: '~/api/index.js' }
  ],

中身を書きます。

index.js

import express from 'express'
import Mailchimp from 'mailchimp-api-v3'

const apiKey = process.env.MAILCHIMP_API_KEY
const audienceId = process.env.MAILCHIMP_AUDIENCE_ID
const mailchimp = new Mailchimp(apiKey)

const app = express()
app.use(express.json())

app.post('/subscribe', async(req, res) => {
  const { email: emailAddress } = req.body
  try {
    const response = await mailchimp.request({
      method: 'post',
      path: `/lists/${audienceId}/members`,
      body: {
        emailAddress,
        status: 'subscribed'
      }
    })
    const { _links, ...result } = response
    res.status(result.statusCode).json(result)
  } catch (err) {
    res.status(err.status).send(err.detail)
  }
})

export default {
  path: '/api',
  handler: app
}

MailChimpに送る

「フォームを作成する」で作成したvueのscriptに追記していきます。

<script>
export default {
  data () {
    return {
      form: {
        email: '',
      },
      props: [],
      response: {
        status: null,
        message: ''
      },
      cachedForm: {},
    }
  },
  mounted () {
    this.cachedForm = { ...this.form }
  },
  methods: {
    async subscribe (event) {
      const formData = { ...this.form }
      try {
        const { data, status } = await this.$axios.post('/api/subscribe', formData)
        this.response.status = status
        this.response.message = `${data.email_address}を登録しました`
        this.form = { ...this.cachedForm }
        this.$refs.subscribe.reset()
        alert(this.response.message)
      } catch (err) {
        this.response.message = 'エラーです'
        alert(this.response.message)
      }
    }
  }
}
</script>

これで完了。

MailChimpの管理画面でメールアドレスが登録されていることを確認してください。

参考：Nuxt.js Mailchimp Integration Add Contact to List | Hash Interactive