eccube and mautic

EC-CUBEとMautic間で顧客情報を同期してみよう

July 28, 2021 2 分で読めます
EC-CUBE、Mautic間で顧客情報を同期する簡単なサンプルアプリを作成してみました。
eccube and mautic

EC-CUBE上で構築したECサイトに、Mauticでパーソナライズされた顧客アプローチを行うことで、見込顧客の発掘やリピート購入を促す施策を提供することが可能です。両者はオープンソースソフトウェアとして公開されているため、無料ですぐに使い始めることができます。

EC-CUBE、Mautic共にプラグインを開発して公開することができますが、残念ながらまだ両者の連携プラグインは存在しません。なので今回はNode.jsのExpressフレームワークを使用して、EC-CUBE⇄Mautic間で顧客情報を同期する簡単なサンプルアプリを作成してみました。

Watch 【3分動画】EC-CUBEとMauticで顧客情報を同期するデモ on YouTube.
eccube and mautic

完全なソースコードはGithubから確認できます。

https://github.com/hmaruyama/eccube-mautic-demoapp

事前準備

  • EC-CUBE環境を用意しましょう。
  • Mautic環境を用意しましょう。
    • アクイアが提供するMauticのSaaS製品「Campaign Studio」の1週間無料環境を使用するのが簡単です。登録はこちらから。
  • Node.jsサーバーとしてherokuを利用します。herokuアカウントを作成しておきます。

手順1 herokuでNode.jsサーバーを用意する

サンプルアプリのリポジトリをローカル環境にクローンし、プロジェクトルートに移動します。

$ git clone [email protected]:hmaruyama/eccube-mautic-demoapp.git
$ cd eccube-mautic-demoapp


コマンドラインからherokuアプリを作成し、ソースコードをデプロイします。heroku CLIのインストール、ログインが完了している場合は heroku create から実行します。

# heroku CLIのインストール
$ brew install heroku/brew/heroku

# herokuコマンドを扱うために、ターミナル上でログインする
$ heroku login

# herokuアプリを新規作成
$ heroku create

# ソースコードをherokuアプリにデプロイ
$ git push heroku master

# 作成されたアプリにブラウザからアクセス
$ heroku open


heroku open で、https://{{your-heroku-app}}.herokuapp.com のようなURLにアクセスできると思います。真っ白の画面がブラウザで表示されていればOKです。

手順2 EC-CUBEでAPIを利用するための設定

EC-CUBEの管理画面で、

①Web APIプラグインのインストールと有効化
②APIクレデンシャルの新規作成
③Webhookの新規作成

を順に行っていきます。①Web APIプラグインのインストールと有効化を行うと、管理画面上からAPI管理のためのGUIが提供されます。

EC-CUBEの管理画面のメニューから、設定 > API管理 > OAuth管理 に遷移して②APIクレデンシャルを新規発行します。スコープはread, write両方にチェックを入れます。リダイレクトURIは https://{{your-heroku-app}}.herokuapp.com/auth/ec/callback を指定します。

eccube and mautic

③Webhookの新規作成をおこないます。API管理 > Webhook管理から [新規登録] をクリックします。Payload URLには https://{{your-heroku-app}}.herokuapp.com/webhook/ec を入力します。シークレットは16文字以上のランダム文字列を入力します。有効フラグに切り替えて保存します。

eccube and mautic

手順3 MauticでAPIを利用するための設定

Mauticの管理画面で、

①APIクレデンシャルの新規作成
②Webhookの新規作成

を順に行っていきます。管理画面右上の歯車マーク > API Credentials > + New をクリックします。Authorization Protocolは OAuth 2 とします。名前は「顧客同期サンプルアプリ」とします。Redirect URIに https://{{your-heroku-app}}.herokuapp.com/auth/mt/callback と入力して保存します。

次に②Webhookを新規作成します。管理画面右上の歯車マーク > Webhooks > + New をクリックします。Webhook POST Url に https://{{your-heroku-app}}.herokuapp.com/webhook/mt を入力します。Webhook Eventsには Contact Identified Event、Contact Updated Eventの二つにチェックを入れます。

eccube and mautic

手順4 Mauticのカスタムフィールドを作成

Mauticには、姓名、メールアドレス、会社名など、コンタクト情報に紐づくフィールドが標準でいくつか用意されています。今回、EC-CUBE側の会員IDをMauticのコンタクト情報に渡したいので、Mautic側で「カスタムフィールド」を一つ作成します。

管理画面右上の歯車マーク > Custom Fields > + New をクリックします。Labelに「EC-CUBEの会員ID」、Aliasに「eccubecustomerid」と入力し、他はデフォルトのまま保存します。

eccube and mautic

手順5 heroku管理画面から環境変数の設定

最後に、サンプルアプリを動かすために必要な環境変数を設定します。

https://dashboard.heroku.com/apps/{{your-heroku-app}} にアクセスし、Settingsタブをクリックします。Config Varsという項目があるので、ソースコードの .env.sample ファイルに書かれている環境変数を全て登録していきます。

eccube and mautic

サンプルアプリを動かす

これでサンプルアプリを動かすための設定が完了しました。

ブラウザで https://{{your-heroku-app}}.herokuapp.com/auth/ec にアクセスして、EC-CUBE APIのアクセストークンを取得します。EC-CUBEの管理アカウントへのログインが求められるので画面に従いログインします。

Mauticも同様に、https://{{your-heroku-app}}.herokuapp.com/auth/mt にアクセスし、アカウントにログインしてアクセストークンを取得します。

EC-CUBEのショップサイトから新規会員登録を行ったのちに、MauticのContact情報にEC-CUBEで登録した会員情報が参照できるか確認します。

このサンプルアプリを通して、Node.jsでのOAuthクライアントの実装、Web APIのリクエスト送信例をぜひ参考にしていただければと思います。

関連情報