RailsのサイトにMauticを導入する方法

Rails Mautic マーケティングオートメーション

f:id:masakiz_blog:20180611001026p:plain Railsで作られたアプリケーションにMauticを導入してマーケティングオートメーションの環境を構築する方法について説明する。
Mauticとは？
https://jp.mautic.org/

Google アナリティクスのようにWebサイトへのアクセスデータを収集し、ユーザの行動からメール等でコンタクトを取ることができるようになる。
SalesforceなどCRMとの連携はプラグインがあるため簡単に連携できるが、RailsなどカスタムサイトはAPI経由で連携する必要があるため、その方法を記載する。

Mauticサーバの立ち上げ

  • Dockerを利用して立ち上げ
    Dockerfile
version: '3'
services:
  ma:
    image: mautic/mautic
    volumes:
      - mahtml:/var/www/html
    ports:
      - "8081:80"
    links:
      - madb:mysql
    environment:
      - MYSQL_ROOT_PASSWORD=password
  madb:
    image: mysql:5.6
    volumes:
      - madata:/var/lib/mysql
    environment:
      - MAUTIC_DB_HOST=madb:3306
      - MAUTIC_DB_USER=root
      - MAUTIC_DB_PASSWORD=password
      - MAUTIC_DB_NAME: mauticdb
volumes:
  mahtml:
    external: true
  madata:
    external: true
  • Mauticサーバ起動
docker-compse up

Mauticの設定

  • APIの有効化 Mauticにログイン後、設定画面から「API Settings」メニューを選択し、「API enabled?」をONに変更する。 f:id:masakiz_blog:20180607013626p:plain
  • API Credentialsを新規作成
    Redirect URIはhttp://localhost:8080/mautic/connections/:ID/oauth2を指定する。
    ID：Rails側のmautic_connectionsテーブルに追加したレコードのIDであり、ひとまず"1"を設定する。 f:id:masakiz_blog:20180607013228p:plain
  • カスタムフィールド追加
    RailsのUser IDを設定するためのカスタムフィールドを追加する。
    Label=user_id, Object=Contact f:id:masakiz_blog:20180608011518p:plain

Railsの設定

  • Gemfileに以下の行を追加
gem 'mautic'
  • Mauticをインストール
bundle install
  • config/routes.rbに以下の行を追加
mount Mautic::Engine => "/mautic"
  • config/initializers/mautic.rbを作成
Mautic.configure do |config|
  # This is for oauth handshake token url. I need to know where your app listen
  config.base_url = "http://localhost:8080"
  # *optional* This is your default mautic URL - used in form helper 
  config.mautic_url = "http://localhost:8081"
end
  • DBにMautic接続用のテーブル追加
rake db:migrate
  • データを追加（作成した際に自動採番されるIDがMauticの管理画面で必要となる）
Mautic::Connection.create(type: 'Mautic::Connections::Oauth2', url: 'http://localhost:8081', client_id: '1_637m4pv6tqg4kwcw88oo8ckggg4s8wcc8ww8w000gso8oo4og8', secret: '4iq54rrzot2c0sg4kk4s0g0k0k0oo0gw44owckokg8w8ks44c0')

localhost:8081はMauticサーバだが、Docker環境で動かしているとコンテナ内にアクセスしてしまうため、Mauticサーバにアクセスできない。
linkを利用するように設定し、url:'http://ma'のような感じでデータを登録する必要がある。

RailsとMautic間でユーザ情報連携

Railsに登録されたユーザをMauticに連携する。
* MauticのタグをRailsに埋め込む Mauticの設定画面からタグを出力し、app/views/layouts/application.html.erbに貼り付ける f:id:masakiz_blog:20180608013941p:plain ※GTMでもよい

  • 埋め込んだタグを一部修正 ユーザがログイン状態のときは、Railsのユーザ情報をMauticに送信する
    あとでRailsからユーザ情報を連携する際の検索条件に利用する
mt('send', 'pageview', {'user_id': '<user.id>', 'email': '<user.email>' })
  1. バッチ等でRailsからMauticへユーザ情報を連携 user_idまたはemailを検索キーとしてMauticから情報を取得し、Railsのデータで名前等の個人情報を補完し、Mauticに保存する
# Mauticに接続する
conn = Mautic::Connection.last

# 実際はallではなく条件を絞り込んだほうがよい
User.all.each do |user|
  # ucdまたはemailが一致しているデータをMauticへ連携する
  contact = conn.contacts.where(search: "user_id: #{user.id}").first
  contact = conn.contacts.where(search: "email: #{user.email}").first if contact.blank?

  # ユーザ情報を格納する
  contact.firstname = user.first_name
  contact.lastname = user.last_name

  # ユーザ情報をMauticに保存する
  if contact.save then
    Rails.logger.info('success')
  else
    Rails.logger.error("error: #{contact.errors}")
  end
end

エラー対応

  • データを取得しようとすると404エラーが発生する

    Mautic::RecordNotFound: 404 エラーに遭遇したようです (エラー #404)。もし同じことが起こったらシステム管理者に通報してください。

Mauticサーバのログは200で正常に返っている場合、キャッシュに問題があるため削除する。

rm -rf app/cache/*

あとキャッシュディレクトをWeb rootディレクトリ以外に変更する。 f:id:masakiz_blog:20180610235830p:plain

  • AWS ELBを利用しSSL経由でアクセスすると一部のURLでhttpが使われる
    ELBにSSLを設定してアクセスした場合、外部からは443ポートでアクセスできるが、EC2側は80ポートでアクセスされる。
    そのため、mtc.jsのURLが"http://www.hogehoge.com/mtc.js"になってしまいブラウザでエラーが発生する。
    回避方法としてMauticのコードを一部修正する。
    修正ファイル：/var/www/html/index.php
    以下の行を追加する
if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https') {
    $_SERVER['HTTPS'] = 'on';
}